1. 学会使用CSS选择器
2. 熟记CSS样式和外观属性
3. 熟练掌握CSS各种选择器
4. 熟练掌握CSS三种显示模式
5. 熟练掌握CSS背景属性
6. 熟练掌握CSS三大特性
7. 熟练掌握CSS盒子模型
8. 熟练掌握CSS浮动
9.熟练掌握CSS定位
CSS初识
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
引入CSS样式表（书写位置）（三种）
1内部样式表<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
2行内式（内联样式）
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
3外部样式表（外链式）
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
CSS基础选择器
1标签选择器（元素选择器） 标签名{属性1:属性值1; 属性2:属性值2;}
2类选择器 .类名{属性1:属性值1; 属性2:属性值2;}
3多类名选择器 <div class="pink fontWeight font20">亚瑟</div>
4id选择器 #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
5通配符选择器 * { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
CSS字体样式属性
1font-size:字号大小
2font-family:字体
3font-weight:字体粗细
4font-style:字体风格
CSS外观属性
1color:文本颜色
2line-height:行间距
3text-align:水平对齐方式
4text-indent:首行缩进
5text-decoration 文本的装饰
CSS复合选择器
1交集选择器
记忆技巧：交集选择器 是 并且的意思。 即...又...的意思
2并集选择器记忆技巧：并集选择器 和 的意思， 就是说，只要逗号隔开的，所有选择器都会执行后面样式。
3后代选择器
4子元素选择器
5伪类选择器
6链接伪类选择器
标签显示模式（display）
1块级元素(block-level)
2行内元素(inline-level)
3行内块元素（inline-block）
标签显示模式转换 display
块转行内：display:inline;
CSS书写规范
空格规范 【强制】 选择器 与 { 之间必须包含空格。
选择器规范 【强制】 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。
属性规范 【强制】 属性定义必须另起一行。
CSS 三大特性
1CSS层叠性
2CSS继承性
3CSS优先级
CSS 背景(background)
background-color背景颜色
background-image背景图片地址
background-repeat是否平铺
background-position背景位置
background-attachment背景固定还是滚动
圆角边框(CSS3)
border-radius: 50%; 让一个正方形 变成圆圈
盒子阴影(CSS3)
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
浮动(float)
浮动(float)
1什么是浮动？
元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。
2浮动详细内幕特性
浮动脱离标准流，====脱标==== 不占位置，会影响标准流。浮动只有左右浮动。
3为什么要清除浮动
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
清除浮动的方法
1额外标签法
2父级添加overflow属性方法
3使用after伪元素清除浮动
4使用before和after双伪元素清除浮动
定位(position)
元素的定位属性
top顶端偏移量，定义元素相对于其父元素上边线的距离
bottom底部偏移量，定义元素相对于其父元素下边线的距离
left左侧偏移量，定义元素相对于其父元素左边线的距离
right右侧偏移量，定义元素相对于其父元素右边线的距离
1静态定位(static)
2相对定位relative
3绝对定位absolute
4固定定位fixed |
|
收藏
淘帖
踩
