7.属性选择符
| 选择符 | 版本 | 描述 |
| E[att] | CSS2 | 选择具有att属性的E元素 |
| E[att="val"] | CSS2 | 选择具有att属性值等于val的E元素 |
| E[att~="val"] | CSS2 | 选择具有att属性值为一用空格分隔的字词列表，其中一个等于val的E元素。 |
| E[att=^"val"] | CSS3 | 选择具有att属性值为以val开头的字符串的E元素。 |
| E[att=$"val"] | CSS3 | 选择具有att属性值为以val结尾的字符串的E元素。 |
| E[att=*"val"] | CSS3 | 选择具有att属性值为包含val的字符串的E元素。 |
| E[att=|"val"] | CSS2 | 选择具有att属性值为以val开头并用连接符"-"分隔的字符串的E元素。 |
E[att]
<p class="a">测试数据1</p>
p[class]{color:green;}
E[att="val"]
<p class="qq">测试数据2</p>
p[class="qq"]{color:red;}
E[att~="val"]
<p class="xyz abc">测试数据3</p>
p[class~="abc"]{color:blue;}
E[att=^"val"]
<p class="aa123">测试数据4</p>
p[class^="aa"]{color:yellow;}
E[att=$"val"]
<p class="test-abc">测试数据5</p>
p[class$="abc"]{color:black;}
E[att=*"val"]
<p class="hello-z-world">测试数据6</p>
p[class*="z"]{color:orange;}
E[att=|"val"]
<p class="y-1">测试数据7</p>
<p class="y-2">测试数据7</p>
p[class|="y"]{color:#ccc;}
字体样式
1.font-family 字体名称
语法：
font-family：<family-name>
说明：
设置文字名称，可以使用多个名称，或者使用逗号分隔，浏览器则按照先后顺序依次使用可用字体。
例：
P{font-family:'宋体','黑体','Arial'}
2.font-size 字体大小
语法：
font-size：<length>|<percentage>
例：
p{font-size:14px;}
3.font-weight 字体加粗
语法：
font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
例：
p { font-weight:bold;}
4.font-style 字体斜体
语法：
font-style : normal | italic | oblique
例：
p { font-style: normal; }
p { font-style: italic; }
p { font-style: oblique; }
5.font 字体样式缩写
语法：
font : font-style || font-variant || font-weight || font-size || / line-height || font-family
例：
p{
font-style:italic;
font-weight:bold;
font-size:14px;
line-height:22px;
font-family:宋体;
}
缩写后：
p { font:italic bold 14px/22px 宋体}
6.color 字体颜色
语法：
color：<color>
p{color:#FF0000;}
7.text-decoration 文本装饰线条
控制文本装饰线条
text-decoration : none || underline || blink || overline || line-through
例：
p { text-decoration:overline;}
p { text-decoration:underline;}
p { text-decoration:line-through;}
8.text-shadow 文字阴影
说明：
控制文字的阴影部分。
text-shadow: h-shadow v-shadow blur color;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。
实例：
h1{text-shadow: 2px 2px #ff0000;}
元素样式
1.width 宽度
width : auto | length
例：
p { 300px;}
div { 50%;}
2.height 高度
height : auto | length
例：
img { height:200px;}
div { height:100px;}
3.margin 外边距
margin : auto | length
例：
div { 300px; height:100px; margin:10px;}
div { 300px; height:100px; margin:0 auto;}
说明：
margin-top 设置上边的外边距
margin-bottom 设置下边的外边距
margin-left 设置左边的外边距
margin-right 设置右边的外边距
缩写型式：
margin: 上边距 右边距 下边距 左边距
margin: 上下边距 左右边距
margin: 上边距 左右边距 下边距
4.padding 内边距
padding : length
例：
div { 300px; height:100px; padding:10px;}
说明：
padding-top 设置上边的内边距
padding-bottom 设置下边的内边距
padding-left 设置左边的内边距
padding-right 设置右边的内边距
缩写型式：
padding: 上边距 右边距 下边距 左边距
padding : 上下边距 左右边距
padding : 上边距 左右边距 下边距