一，属性选择符：
选择符 版本 描述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 { width:300px;}
div { width:50%;}
2.高度height : auto | length
例：
img { height:200px;}div { height:100px;}
3.外边距margin : auto | length
例：
div { width:300px; height:100px; margin:10px;}div { width:300px; height:100px; margin:0 auto;}
margin-top 设置上边的外边距
margin-bottom 设置下边的外边距margin-left 设置左边的外边距margin-right 设置右边的外边距 缩写型式：margin: 上边距 右边距 下边距 左边距
margin: 上下边距 左右边距
margin: 上边距 左右边距 下边距
4.内边距
padding : length
例：
div { width: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 { width: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 { width:300px; height:100px; border-style:solid; border-width:1px; ｝ border-top-width 设置上边框宽度border-bottom-width 设置下边框宽度
border-left-width 设置左边框宽度
border-right-width 设置右边框宽度
3.边框颜色border-color : color
例：div {
width:300px; height:100px; border-style:solid; border-width: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 { width:300px; height:100px; border-style:solid; border-width:1px; border-color:#FF0000; }缩写后：
div { width:300px; height:100px; border:1px solid #FF0000;}