CSS：描述样式
一、CSS
css：Cascading Style Sheet，层叠样式表，用于描述网页样式
1. 同一个标签可以有多个选择器作用，给他增加样式；
2. 有继承性，祖先的标签的一些属性，可以继承给后代标签；
3. 有层叠性，当遇见冲突的时候有着一套严密法律，规定谁生效谁被杠掉。
css的维护者是w3c，最新版是css3，但是浏览器没有那么好的兼容
css分成两部分：
1. 选择谁？
2. 设置什么样式？
二、选择器
1. 标签选择器
2. id选择器 "#"
3. class选择器 "."
给某一类元素，设置相同的类名，然后通过这个类名来选择它们。
原子类：将一些简单的属性做成一个类，然后元素自行选择
4. 后代选择器 .div1 .div3 p{}
5. 交集选择器 p.ha{}
6. 并集选择器 p,div{}
7. 通配符 *{}
继承性
css规定，有一些属性，给某一个元素设置了，它的后代元素同样拥有这个属性了。
有了继承性，就能够把一些初始的，基本的，普遍的设置，写在body里
哪些元素具有继承性呢？
color
text-系列，例如 text-decoration:underline;
font-系列，例如 font-size:30px;
line-系列
特别的，要知道不能继承的属性：background-color、所有盒模型的属性（width、height、border、padding、margin）都是不继承的！
层叠性
处理冲突的能力，就是当多个选择器都选择上了同一个标签，听谁的？
权重：id > class > 标签
1. 选择上了
先比权重--再比远近（style出现的顺序）
2. 没有选择上
先比远近（祖辈标签的距离）--再比权重
应用场景：先设置共性、再针对设置私有（层叠掉共性）
!important提升权重：严禁滥用!important提升权重，只能在原子类的情况时有！
三、设置样式
颜色表示法
1. 单词
black、white、red、green、blue、yellow、pink、orange、purple、gold、gray、yellowgreen、greenyellow等等
2. rgb()
红色
background-color: rgb(255,0,0);
绿色
background-color: rgb(0,255,0);
蓝色
background-color: rgb(0,0,255);
黑色
background-color: rgb(0,0,0);
白色
background-color: rgb(255,255,255);
灰色
background-color: rgb(111,111,111);
3. 十六进制
1. 文字样式
color
font-size：尺寸
line-height：行高
font-family：字体
网页中，为了让所有用户都有一致的体验，只能使用宋体、微软雅黑
font-family:"Arial","Microsoft Yahei","SimSun";
font-weight：字体权重
font-weight:bold; ---> font-weight:700; 加粗
font-weight:normal; ---> font-weight:400; 不加粗
font-style:样式
font-style:italic; 倾斜
font-style:normal; 不倾斜
text-decoration:字体装饰
text-decoration:underline; 下划线
text-decoration:none; 默认，没有下划线
text-decoration:line-through; 删除线
font综合
font:italic bold 12px/20px "arial","Microsoft Yahei","SimSun";
2. 盒子模型
盒模型就是width、height、padding、border、margin这几个属性
真实占有宽度 = width + 左边padding + 右边padding + 左边border + 右边border
padding：上、右、下、左
padding-top、padding-right、padding-bottom、padding-left;
padding:10px 20px 30px; /*等价于*/ padding-top:10px; padding-right:20px; padding-bottom:30px; padding-left:20px;/*和右边一样*/
border：粗细 线型 颜色
border:1px solid red; 工作中只许用solid（实线）和dashed（虚线），其他线型都有兼容问题
border-width、border-style、border-color;
border-top-width、border-top-style、border-top-color;
border-bottom:none; 如果某一个边框我们不想要，那么就写none
margin：外边框
margin-top、margin-right、margin-bottom、margin-left;
注意：相邻的两个margin有塌陷现象，以margin大的为准。
居中策略
text-align:center; 盒子中的文字水平居中
margin:0 auto; 盒子本身水平居中
line-height:盒子高度; 但行文本的垂直居中
3. 浮动
标准文档流
从左至右、从上到下、有一个"光标"的概念
性质：空白折叠现象；高矮不齐，底边对齐；把元素分为"块级元素"和"行内级元素"
块级元素：div、h、p、ul、li、dl、dt、dd
能够设置宽度、高度（没有设置宽度，默认是父亲的宽度）
不能并排
行内级元素：span、a、b、u、i、em、strong
不能设置宽度、高度
可以并排
块级和行内相互转换
display:block; 把行内-->块 非常有用
display:inline; 把块-->行内 丝毫无用，工作10年都遇不到
我们发现标准文档流是做不出网页的，因为它太迂腐：能够设置宽度的不能并排，能够并排的不能设置宽高
所以需要脱离标准流：脱离标准流一共有三种方法：浮动、绝对定位、相对定位
浮动：float
浮动是做并排用的
浮动元素脱离了文档流，所以没有inline、block之分了
浮动的儿子不能撑高父亲
浮动在竖直方向上的margin塌陷现象消失
浮动字围效果
清除浮动
有高度的盒子能够管住自己内部的浮动元素
如果盒子没有高度，内部浮动的元素序列就乱套了，第二个序列就会追随第一个序列了。
解决办法1：给后面的盒子加上clear:both
缺点：box还是没有高度、margin失效
解决方法2：隔外墙
虽然margin失效，但可以用小技巧来弥补，可以用墙的高度来做间隔
但是盒子依然没有高度
解决办法3：内墙
现在有了margin、也有了高度了，但是放置的标签太多。这些标签没有语义，看起来不爽。
解决办法4：overflow:hidden;
工作中常用的
在浮动的父盒子上加 overflow:hidden;
在两个大部分之间隔外墙
<div class="box1"> → 这个盒子没高，就写上overflow:hidden; <p>1</p> <p>2</p> <p>3</p> <p>4</p> </div> <div class="box2"> → 这个盒子没高，就写上overflow:hidden; <p>1</p> <p>2</p> <p>3</p> </div>
4. 定位
position:relative; 相对定位
position:absolute; 绝对定位
position:fixed; 固定定位
子绝父相
z-index 只有定位的元素才能写z-index值；从父现象（父亲怂了，儿子再牛逼也没有用）
5. 背景
属性
background:red url(1.jpg) no-repeat -10px -100px fixed;
background-color:red;
background-image:url(images/1.jpg);
background-repeat:no-repeat/repeat-x/repeat-y;
background-attachment:fixed; 固定
background-position:100px 200px;
最常见的应用：CSS精灵
就是把多个小杂碎图片，合成一张图片，然后通过backgroud-position定位只显示其中一部分。
这样能够显著降低HTTP请求数
应用：
通栏banner/大背景
background-position:center top; ---->background-position:50% 0;
背景图的应用
先导符号放到padding里
<h1>爱前端-专业的前端开发培训</h1>
.header h1{ width: 221px; height: 68px; background:url(images/logo.png); /*h1中的文字方便搜索引擎抓取，背景图用于展示*/ line-height: 400px; overflow: hidden; }
6. 表格、列表
ul{
list-style:none;
}
7. 超链接美化
伪类：link、visited、hover、active
爱恨准则：love hate
常见写法：
a:link,a:visited{}
a:hover{}
/*楔形小三角*/ div{ width: 0px; height: 0px; border: 10px solid white; border-top-color:blue; border-bottom: none; transition:all 0.4s ease 0s; } div:hover{ transform:rotate(180deg); }
