一，属性选择符：
选择符 版本 描述
E[att] css2 选择具有att属性的E元素
E[att="val"] css2 选择具有att属性值等于val的E元素。
E[att~="val"] css2 选择具有att属性值为一用空格分割的字词列表，其中一个等于att的E元素
E[at^="val"] css3 选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"] css3 选择具有att属性且属性值为以val结尾的字符串的E元素
E[att*="val"] css3 选择具有att属性且属性值为包含val的字符串的E元素
E[att|="val"] css3 选择具有att属性且属性值以val开头并用连接符"-"符串的E元素
例：
<p class="a">测试数据1</p>
<p class="qq">测试数据2</p>
<p class="xyz abc">测试数据3</p>
<p class="aa123">测试数据4</p>
<p class="test-abc">测试数据5</p>
<p class="hello-z-world">测试数据6</p>
<p class="y-1">测试数据7</p>
<p class="y-2">测试数据7</p>
p[class]{color:green;}
p[class="qq"]{color:red;}
p[class~="abc"]{color:blue;}
p[class^="aa"]{color:yellow;}
p[class$="abc"]{color:black;}
p[class*="z"]{color:orange;}
p[class|="y"]{color:#ccc;}
二，字体样式：
1.字体名称
语法
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 | itaic | 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>
说明:
颜色属性值分三种值的格式
a). 英文单词，比如 red , yellow ,green …
b). 十六进制表示方式，#开头，6个十六进制的字符或数字 组合。比如：#FFFFFF，#000000，
#CCCAAA，#22BCAD。十六进制： 0-9 和 a-f
c).RGB模式，红 0-255，绿 0-255，蓝 0-255。比如： RGB(120,33,234)
RGBA(255,0,0,.5) RGBA模式，最后的A表示透明度50%
例：
p{
color:#FF0000;
}
7. text-decoration(文本装饰线条)
控制文本装饰线条
text-decoration : none || underline || blink || overline || line-throug
例：
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 必需。水平阴影的位置。允许负值。
hadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊的距离。
color 可选。阴影的颜色。
实例：
h1{
text-shadow: 2px 2px #ff0000;
}
三,元素样式：
1.宽度
width : auto | length
例：
p { 300px;}
div { 50%;}
2.高度
height : auto | length
例：
img { height:200px;}
div { height:100px;}
3.外边距
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 : length
例：
div { 300px; height:100px; padding:10px;}
padding-top 设置上边的内边距
padding-bottom 设置下边的内边距
padding-left 设置左边的内边距
padding-right 设置右边的内边距
缩写型式：
padding: 上边距 右边距 下边距 左边距
padding : 上下边距 左右边距
padding : 上边距 左右边距 下边距
5.透明度
opacity: <number>
number值为 0.0-1.0 之间的小数
例：
div { opacity: .3 ; } /*30%透明，小数点之前的0可以省略*/
兼容全浏览器的写法：
div{ filter:alpha(opacity=50); } /* IE6-IE8 */
div{ opacity:.5; } /* 现代浏览器 */
6.盒子模型
盒子模型就是指CSS布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。对我们来说，只需
要理解元素在页面中所占据的位置。
元素最终所占宽度：
左边框宽 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽
四，边框样式：
1.边框线
border-style : none | hidden | dotted | dashed | solid | double | groove |
ridge | inset | outset
例：div { 300px; height:100px; border-style:solid; ｝
border-top-style 设置上边框线
border-bottom-style 设置下边框线
border-left-style 设置左边框线
border-right-style 设置右边框线
2.边框宽度
border-width : medium | thin | thick | length
例：
div { 300px; height:100px; border-style:solid; border-1px; ｝
border-top-width 设置上边框宽度
border-bottom-width 设置下边框宽度
border-left-width 设置左边框宽度
border-right-width 设置右边框宽度
3.边框颜色
border-color : color
例：div {
300px;
height:100px;
border-style:solid;
border-1px;
border-color:#FF0000;
}
border-top-color 设置上边框颜色
border-bottom-color 设置下边框颜色
border-left-color 设置左边框颜色
border-right-color 设置右边框颜色
4.边框样式缩写
border : border-width || border-style || border-color
例：
div {
300px;
height:100px;
border-style:solid;
border-1px;
border-color:#FF0000;
}
缩写后：
div {
300px;
height:100px;
border:1px solid #FF0000;
}