CSS简介：
1）什么是CSS
CSS（Cascading Style Sheets）层叠样式表
样式用来定义浏览器如何显示html元素(美化元素)
样式通常存放在样式表中
2）使用CSS样式好处
a.样式声明实现所以元素的通用
b.可以实现页面内容与表现的分离
c.可以提高代码的复用性和维护性
3）CSS的使用
a.行内式：样式定义在html元素中，只对当前元素有效
写法：step1：给元素添加<style>属性
step2：style直接写样式声明
例：
<p style="样式:样式值;样式:样式值;"></p>
b.内部式(内嵌式)样式定义在html页面的<head>头元素标签内，仅对当前页面中标签起作用。
写法：step1：在<head>标签中添加<style>标签，
step2：<style>标签中写CSS样式对应的语法（样式定义）
例：
<head>
<style>
div{
color:red;
}
</style>
</head>
div{}中div是选择器
样式声明规则：选择器{样式声明}
c.外部式（推荐方式）：定义在外部的.css文件中，css文件是一个纯文本文件，以.css为后缀，此文件只包含样式声明规则
写法：step1：创建外部样式文件（.css） @charset "utf-8";
step2：将样式文件引入到html页面<head>头部标签中，
<link type="text/css" href="文件路径" rel="stylesheet"/>
rel：表示被链接的文件是个样式表
step3：在样式文件中写样式规则
CSS的注释方式：/*注释文字*/
2.CSS选择器：
选择器是用来选中指定的节点（标签、标记、元素）
1）元素选择器：元素名{}—通过元素名称作为CSS选择器
2）类选择器： .类名{}--自定义选择器，通常用作将页面不同节点设置同一种样式
3）id选择器： #id名{}---自定义的选择器，同一个页面中id是唯一的
ps:元素、类、id选择器是基本选择器
4）交集选择器
要求同时满足选择器和选择器不能有任何符号
5）并集选择器
将多个选择器用逗号隔开，实现相同的样式作用于多个元素
6）派生选择器：用于选择子元素
后代选择器：找全部的后代元素，选择器之间用 空格隔开
子元素选择器：找儿子元素，选择器之间用 >
下一个弟弟选择器：找同级元素（相邻选择器），选择器之间用 +
7）伪类选择器
用于设置同一个元素在不同状态下的样式
:link 未被访问的状态
:hover 鼠标悬停的样式
:active 鼠标按下的样式
:visited 已被访问的样式
爱恨原则：LoVe，HAte
:focus 获取焦点样式
CSS特性：
1）继承性
父元素的CSS声明可以被子元素继承
2）层叠性
同一个元素存在多个CSS样式，对于不冲突的声明可以叠加显示
3）权重（样式的优先级）：优先级由权重来决定
同一个元素存在多个CSS样式，对于冲突的声明以权重（优先级）高的为准
优先级高低：
选择器：id选择器>类选择器>元素选择器
引用方式：行内式>内部式>外部式
权重的等级：
1）!important加在样式值后，权重值为10000，（提升优先级，一般不让用）
2）行内式（内联样式）权重值为1000
3）id选择器权重值为0100
4）类、伪类和属性选择器权重值为0010
5）元素选择器权重值为0001
6）通用选择器（*），子选择器（>）,相邻下一个弟弟选择器（+），权重值为0000
7）继承样式没有权重（子元素有自己的样式，听从自己样式显示，否则继承父元素样式）
8）如果权重值一样，后来者居上（就近原则）
样式冲突比较规则：
1）先看是否选中，若一个选中，一个没选中，听选中的；
2）若都选中，比权重值，听权重大的
3）若都没选中，听距离近的，若远近都一样，再比权重
CSS的常用样式：
1）背景样式： background
拆分：
background-color:背景色;
background-image:url(“背景图片地址”);
background-repeat:平铺方式;
平铺方式:no-repeat,repeat-x,repeat-y,repeat
background-attachment:定位;
值：scroll滚动，fixed固定
background-position:位置;
值：上top，下bottom，左left，右right，中center
合并：
background：色 图 铺 定 位
颜色表示方式：
1.单词：(red、green)
2.三原色：rgb(255,255,255),rgba(255,255,255,0.5)—a/0.5表示透明度，0-1，0完全透明，1完全不透明
3.16色：16进制数表示颜色，
2)边框样式 border
3要素：width边框粗细 style边框样式 color边框颜色(默认黑色)
4个方向：上top，右right，下bottom，左left
style值：solid实践，dotted点线，dashed虚线
合并：border:width style color;
border-radius:边框弧度;
3)盒子模型
width:宽度
height:高度
padding:内边距
border:边框
margin:外边距
水平方向实际距离=width+2pading+2border+2margin
垂直方向实际距离=height+2pading+2border+2margin
注意：如果一个盒子的margin-bottom和另一个盒子的margin-top发生坍塌（重叠）问题，小的被大的包裹
4个边合并写：pading上 右 下 左 —四个值
pading上 右左 下 —三个值
pading上下 右左 —两个值
pading上下右左 —一个值
margin同理
margin：解决水平居中问题：margin:0,auto;--0上下边距，auto左右边距，自动平分
4）文本字体样式text font
font-family：字体类型;
font-size:字体大小;
font-weight:字体粗细; 100的整数倍（100-100）
font-style:字体风格;
color:字体颜色;
text-indent:首行缩进; 单位em字体的倍数
text-align:字体位置;
text-decoration:字体修饰; underline none overline
line-height:行高; 默认1em（通常1.2~1.5em）
显示方式：display
每个元素都有自己默认的显示方式
a.块元素 h1-h6 p div table ul ol
独占一行，从上往下，可以设置宽高
display:block
b.行内元素 span a
从左往右，不换行，不可以设置宽高
display:inline
c.行内块元素img input
从左往右，不换行，可以设置宽高
display:inline-block
display应用：如果需要修改元素的默认显示方式可以通过display样式进行修改
d.隐藏元素
display:none;//隐藏内容会让出位置
opacity:0;//隐藏元素不让出位置
定位：定位元素相对于正常位置应该出现的位置
a.流定位(流布局) 符合标准文档流（默认定位）
–块级元素 从上到下
–行内元素 从左到右
b.浮动定位 脱离标准文档流,让出原位置
float:left/right;
浮动会对下面的节点有影响
父元素的浮动会对子元素有影响
清除浮动带来的影响
clear:left/right/both;
left/right代表左边或者右边不允许有浮动元素，both代表两边都不允许有浮动影响
哪个元素受到影响就在哪个元素里面写clear清除影响
c.position定位(结合位置使用上、下、左、右)
相对定位：relative
相对于自己原来的位置，不脱离标准文档流，不出让位置
绝对定位：absolute
相对于定位过了的祖先元素，如果没有定位了的祖先元素，
则按照最初包含块的元素定位，脱离标准文档流，让出原来位置
固定定位：fixed
以当前窗口为参考点，脱离标准文档流，让出原来位置
堆叠
z-index:数值;
数值越大距离用户越近（集合position使用）
9443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
