CSS

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言

语法

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明:

h1{color:blue;font-size:12px;}

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

注释为：

/*
*/

id和class选择器

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

以下的样式规则应用于元素属性 id=”para1”:

#para1
{
    text-align:center;
    color:red;
}

ID属性不要以数字开头

class选择器

class可以在多个元素中使用

.center {text-align:center;}

类名的第一个字符不能使用数字！

CSS 创建

插入样式表的方法有三种:

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)

外部样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

以下是一个样式表css文件的例子

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

不要在属性值与单位之间留有空格

内部样式表

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

优先级

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

背景

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

水平或垂直平铺

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

不平铺：background-repeat:no-repeat;

设置定位

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

文本

颜色

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

对齐方式

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

当text-align设置为”justify”，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

文本修饰

a {text-decoration:none;}

删除下划线

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

上 中 下

文本转换

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

指定大小写字母

文本缩进

p {text-indent:50px;}

首行缩进

字体

在CSS中，有两种类型的字体系列名称：

  • 通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
  • 特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）

字体系列

font-family 属性设置文本的字体系列。

p{font-family:"Times New Roman", Times, serif;}

字体样式

font-style主要是用于指定斜体文字的字体样式属性。

这个属性有三个值：

  • 正常 - 正常显示文本
  • 斜体 - 以斜体字显示的文字
  • 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

字体大小

font-size 属性设置文本的大小。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

在所有浏览器的解决方案中，设置 元素的默认字体大小的是百分比：

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

链接

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

当设置为若干链路状态的样式，也有一些顺序规则：

  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面

列表

list-style-type属性指定列表项标记的类型是：

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
 
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

所有的CSS列表属性

属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图像设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

表格

边框

table,th,td
{
    border:1px solid black;
}
table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

（上面的是双边框，下面的是单边框）

表格宽度和高度

table 
{
    width:100%;
}
th
{
    height:50px;
}

表格文字对齐

td
{
    text-align:right;
}

向左，右，或中心

td
{
    height:50px;
    vertical-align:bottom;
}

顶部，底部或中间

表格填充

td
{
    padding:15px;
}

表格颜色

table, td, th
{
    border:1px solid green;
}
th
{
    background-color:green;
    color:white;
}

盒子模型

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。
div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

边框

border-style 属性用于指定要显示的边框类型。

允许的值如下：

  • dotted：定义点状边框。
  • dashed：定义虚线边框。
  • solid：定义实线边框。
  • double：定义双线边框。
  • groove：定义三维沟槽边框。效果取决于 border-color 的值。
  • ridge：定义三维脊状边框。效果取决于 border-color 的值。
  • inset：定义三维嵌入边框。效果取决于 border-color 的值。
  • outset：定义三维突出边框。效果取决于 border-color 的值。
  • none：定义无边框。
  • hidden：定义隐藏边框。

边框宽度

p.one
{
    border-style:solid;
    border-width:5px;
}
p.two
{
    border-style:solid;
    border-width:medium;
}

边框颜色

p.one
{
    border-style:solid;
    border-color:red;
}
p.two
{
    border-style:solid;
    border-color:#98bf21;
}

单独设置各边

p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

属性 说明 值 CSS
outline 在一个声明中设置所有的轮廓属性 *outline-color outline-style outline-width *inherit 2
outline-color 设置轮廓的颜色 *color-name hex-number rgb-number *invert inherit 2
outline-style 设置轮廓的样式 none dotted dashed solid double groove ridge inset outset inherit 2
outline-width 设置轮廓的宽度 thin medium thick *length *inherit 2

外边距

值 说明
auto 设置浏览器边距。 这样做的结果会依赖于浏览器
length 定义一个固定的margin（使用像素，pt，em等）
% 定义一个使用百分比的边距

填充

值 说明
length 定义一个固定的填充(像素, pt, em,等)
% 使用百分比值定义一个填充

分组和嵌套

h1,h2,p
{
    color:green;
}
p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}
  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class=”marked” 的元素指定一个样式。
  • .marked p{ }: 为所有 class=”marked” 元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class=”marked” 的 p 元素指定一个样式。

尺寸

属性 描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

显示

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

定位

position 属性指定了元素的定位类型。

position 属性的五个值：

  • static
  • relative
  • fixed
  • absolute
  • sticky

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非事先设定position属性。他们也有不同的工作方式，这取决于定位方法。

static:HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

fixed:元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

relative:相对定位元素的定位是相对其正常位置。

absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

sticky:基于用户的滚动位置来定位

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

重叠

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

overflow

overflow属性有以下值：

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

float

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

CSS 中所有的浮动属性

“CSS” 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。

属性 描述 值 CSS
clear 指定不允许元素周围有浮动元素。 left right both none inherit 1
float 指定一个盒子（元素）是否可以浮动。 left right none inherit 1

组合选择符

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

  • 后代选择器(以空格 分隔)
  • 子元素选择器(以大于 > 号分隔）
  • 相邻兄弟选择器（以加号 + 分隔）
  • 普通兄弟选择器（以波浪号 ～ 分隔）

伪类

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

a.red:visited {color:#FF0000;}
 
<a class="red" href="css-syntax.html">CSS 语法</a>

伪元素

selector::pseudo-element {
    property: value;
}

一般是设置首行 首字母