1.属性选择器
E[att]：选择具有att属性的E元素。
1 /* 获取具有class属性的p元素 */
2 p[class]{
3 color: red;
4 }
5
6 <p class="a">class:a</p>
E[att="val"]：选择具有att属性且属性值等于val的E元素。
1 /* 获取class属性的值为"a"的p元素 */
2 p[class="a"]{
3 color: red;
4 }
5
6 <p class="a">class:a</p>
E[att~="val"]：选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
1 /* 获取class属性值里有以空格分隔的"a"的p元素 */
2 p[class~="a"]{
3 color: red;
4 }
5
6 <p class="b a c">class:b a c</p>
E[att^="val"]：选择具有att属性且属性值为以val开头的字符串的E元素。
1 /* 获取class属性值以"a"开头的p元素 */
2 p[class^="a"]{
3 color: red;
4 }
5
6 <p class="abc">class:abc</p>
E[att$="val"]：选择具有att属性且属性值为以val结尾的字符串的E元素。
1 /* 获取class属性值以"a"结尾的p元素 */
2 p[class$="a"]{
3 color: red;
4 }
5
6 <p class="bca">class:bca</p>
E[att*="val"]：选择具有att属性且属性值为包含val的字符串的E元素。
1 /* 获取class属性值包含"b"的p元素 */
2 p[class*="b"]{
3 color: red;
4 }
5
6 <p class="abc">class:abc</p>
E[att|="val"]：选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
1 /* 获取class属性值以"a"开头并用连接符"-"分隔的字符串的p元素 */
2 p[class|="a"]{
3 color: red;
4 }
5
6 <p class="a-bc">class:a-bc</p>
2.CSS属性
- font-family
font - family属性指定一个元素的字体。
font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。
有两种类型的字体系列名称：
- family-name - 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
- generic-family - 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace。
使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。
注意： 每个值用逗号分开。
1 /* 设置p元素的字体 */
2 p{
3 font-family:"Times New Roman",Georgia,Serif;
4 }
5
6 <p>Times New Roman</p>
- font-size
设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。浏览器默认的字体大小一般为16px左右。
1 /* 设置p元素的字体大小为16px */
2 p{
3 font-size: 16px;
4 }
5
6 <p>font-size: 16px</p>
- font-weight
设置文本的粗细，可取100~900的整百位的值，数字值 400 相当于 关键字 normal，700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗。
1 /* 设置p元素的字体粗细为"bold" */
2 p{
3 font-weight: bold;
4 }
5
6 <p>font-weight: bold</p>
- font-style
该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。理论上讲，用户代理可以根据正常字体计算一个斜体字体。
1 /* 设置p元素的字体为斜体 */
2 p{
3 font-style: italic;
4 }
5
6 <p>font-style: italic</p>
- font
font 简写属性在一个声明中设置所有字体属性。
可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"
font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
注意： line - height属性设置行与行之间的空间。
1 /* 设置p元素的字体为斜体、加粗、大小16px、行高20px、微软雅黑字体 */
2 p{
3 font: italic bold 16px/20px "微软雅黑";
4 }
5
6 <p>font: italic bold 16px/20px "微软雅黑"</p>
- color
color 属性规定文本的颜色。
这个属性设置了一个元素的前景色（在 HTML 表现中，就是元素文本的颜色）；光栅图像不受 color 影响。这个颜色还会应用到元素的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖。
1 /* 设置p元素的文字颜色为红色 */
2 p{
3 color: red;
4 }
5
6 <p>color: red</p>
- text-decoration
text-decoration 属性规定添加到文本的修饰。
注释：修饰的颜色由 "color" 属性设置。
这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。
1 /* 设置p元素的文字修饰为下划线 */
2 p{
3 text-decoration: underline;
4 }
5
6 <p>text-decoration: underline</p>
- text-shadow
text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。
可取值和说明如下：
| 值 | 描述 |
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。 |
1 /* 设置p元素的文字阴影向右和下各偏移3px，模糊距离为2px，颜色为红色 */
2 p{
3 text-shadow: 3px 3px 2px red;
4 }
5
6 <p>text-shadow: 3px 3px 2px red</p>
- width
width 属性设置元素的宽度。
说明：这个属性定义元素内容区的宽度，在内容区外面可以增加内边距、边框和外边距。行内非替换元素会忽略这个属性。
1 /* 设置p元素宽度为100px */
2 p{
3 width: 100px;
4 }
5
6 <p>width: 100px</p>
- height
height 属性设置元素的高度。
1 /* 设置p元素高度为100px */
2 p{
3 height: 100px;
4 }
5
6 <p>height: 100px</p>
- margin
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值。
取四个值时分别代表：上、右、下、左。
取三个值时分别代表：上、左右、下。
取两个值时分别代表：上下、左右。
1 /* 设置p元素的外边距按上右下左依次为：5px、10px、15px、20px */
2 p{
3 margin: 5px 10px 15px 20px;
4 }
5
6 <p>margin: 5px 10px 15px 20px</p>
- padding
padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。
padding属性的顺序规则和margin属性一致。
1 /* 设置p元素的内边距按上右下左依次为：5px、10px、15px、20px */
2 p{
3 padding: 5px 10px 15px 20px;
4 }
5
6 <p>padding: 5px 10px 15px 20px</p>