CSS学习，最全CSS样式学习，15分钟学会CSS

CSS简介：
1）什么是CSS
CSS（Cascading Style Sheets）层叠样式表
样式用来定义浏览器如何显示html元素(美化元素)
样式通常存放在样式表中

2）使用CSS样式好处
 a.样式声明实现所以元素的通用
 b.可以实现页面内容与表现的分离
 c.可以提高代码的复用性和维护性

3）CSS的使用
 a.行内式：样式定义在html元素中，只对当前元素有效
       写法：step1：给元素添加
		  
		  div{}中div是选择器
		  样式声明规则：选择器{样式声明}
 c.外部式（推荐方式）：定义在外部的.css文件中，css文件是一个纯文本文件，以.css为后缀，此文件只包含样式声明规则
      写法：step1：创建外部样式文件（.css）   @charset "utf-8";
            step2：将样式文件引入到html页面头部标签中，
			       
			       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使用）