CSS概要

CSS规则由两部分组成：选择符和属性

selector{    property:value;    property:value value value;    property:value,value,value,value;}selector,selector{    property:value;}

选择符

- 类型选择符

样式化的元素或HTML标签命名

h1{    font-size:120%;}p{    color:blue;}

- 类选择符

可以在不同的元素上多次使用相同的CSS规则，类选择符以“.”开头

.warning{    border:1px solid black;    padding:40px;}

- ID选择符

类似于类选择符，但是一个ID选择符在整个Web文档中只出现一次，以”#“开头

#navigation{    text-align:justify;}

- 后代选择符

后代选择符在一行里依次相接，并且将覆盖类型选择符合类选择符的样式

li a{    text-decoration:none;}

- 子选择符

只有当一个元素是父元素的直接子代时，该元素才会被样式化

div > strong{    text-decoration:underline;}

- 通配选择符

仅以一个”*“表示，在该选择符中设定的属性会应用于所有元素

*{    font-family:Verdana,Arial,sans-serif;}

- 相邻选择符

相邻描述的是页面标记流里两个元素左右相邻的关系，用”+“衔接

li + li{    font-size:200%;}

该规则选择的是紧跟在li之后的li对象

- 属性选择符

• [属性] - 基于属性的匹配

a[href]{    text-decoration:none;}

只要a标签申明了href属性，超级链接就没有下划线

• [属性=值] - 基于值的匹配

a[href='csscookbook.com']{    text-decoration:none;}

只要链接指向的是csscookbook.com，这个链接就没有下划线

• [属性~=值] - 有些元素属性中可能包含若干个值（以空格分开），这种模式匹配属性值中包含特定值的所有元素

a[title ~= 'digital']{    text-decoration:none;}

只要“digital”出现在a元素的title属性里，这个链接就没有下划线修饰

• [属性 |= 值] - 这种模式匹配属性值里包含特定值，且特定值后带有连字号的匹配

a[href |= 'digital']{    text-decoration:none;}

如果a元素的href属性里带有“digital-”，这个链接就没有下划线

- 伪类

a:link {color: #FF0000}a:visited {color: #00FF00}a:hover {color: #FF00FF}a:active {color: #0000FF}

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。

p:first-child {    font-weight: bold;}

选择首个子对象

q:lang(no){    quotes: "~" "~"}<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>

:lang 伪类允许您为不同的语言定义特殊的规则

- 伪元素

“first-letter” 伪元素用于向文本的首字母设置特殊样式

p:first-letter{    color:#ff0000;    font-size:xx-large;}

“first-line” 伪元素用于向文本的首行设置特殊样式

p:first-line{    color:#ff0000;    font-variant:small-caps;}

“:before” 伪元素可以在元素的内容前面插入新内容

h1:before{    content:url(logo.gif);}

“:after” 伪元素可以在元素的内容之后插入新内容

h1:after{    content:url(logo.gif);}

盒模型

[CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距(margin），边框(border)，填充(padding)，和实际内容(content)。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

1. W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分
2. IE盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的content 部分包含了 border 和 padding
   ](http://img.blog.csdn.net/20170615132137163?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTURyZWFtbG92ZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)