CSS简介
CSS全称为：层叠样式表（Cascading Style Sheets），主要用于定义HTML内容在浏览器内的显示样式，如文字大小，颜色，字体加粗等。
使用CSS样式通过定义某个样式，可以让不同网页位置的文字有着同一的字体效果。
语法：
p{color:blue;}
p 选择符又称选择位，指明网页中应用样式规则的元素，其他元素不受影响{} 声明，在大括号内的都是声明color 属性位： 属性分隔符blue 值位; 多条声明时用分号分隔
例：
p{font-size:12px;color:red;font-weight;bold; }
注释
CSS中也有专门的注释语句
格式：
/*注释内容*/
CSS三种引入方式
内联式：直接将CSS样式写入html标签中。
<p style="color:red">字体颜色为红色</p>
嵌入式：
嵌入式写在代码中的head标签中间，集中对指定范围内的代码进行操作。
例：
<style type="text/css"><>p{color:red;}</style>
外部式
将CSS写一个独立的以.css文件命名的文件，使用link标签将css样式文件爱你链接到HTML文件内。
例：
<link href="base.css" rel="stylesheet" type="text/css" />
优先级：
内联式 > 嵌入式 > 外部式
离作用代码越近的方式优先级越高
选择器
选择器用来指定样式的作用范围。
css构成：
选择器{样式;}
标签选择器：
直接以html中的标签作为选择器：
<style tye="text/css">p{font-size:12px;line-height:1.6em;}</style>
类选择器：
类选择器在css中比较常见，首先要在普通标签中设置一个类，类名不可为中文，然后在 style 标签中添加该类名的样式。
类选择器在选择器前要加一个点”.”
例子：
<head><style type="text/css">.shasha{color:red;font-size:20px; }<style></head><body><h1 class="shasha">标题</h1><p class="shasha">第一段</p><p> 第二段</p></body>
样式会作用于class类型为shasha的标签内容上，类名可以随便取，别用中文。
ID选择器
ID选择器与类选择器大致相同，不同的是：
ID选择起标签内部指定ID；ID选择器前面不用点”.”，而用井号”#”ID选择器只能起一个ID名；类选择器可以起多个类名。
例子：
<head><style type="text/css">#shasha2{color:red;font-size:20px; }<style></head><body><h1 id="shasha2">标题</h1><p id="shasha2">第一段</p><p> 第二段</p></body>
子选择器：
小于这个类的子标签
例子：
.shasha>li{border:1px solid red;}
所有后代标签选择器
小于号代表第一个后代，空格可以指定其所有后代标签
例子：
.shasha li{border:1px solid red;}
通用选择器
通用选择器，选择html文档中的所有标签。
*{border:1px solid red;font-size:20px;}
伪类选择符
给标签的某一个状态设定一个类，例如超链接标签可以设置为鼠标停留后显示别的颜色。
最常用的也就是a:hover
a:hover{color:red;font-size:20px; }
分组选择符
选择符中间以逗号隔开，等于同时给多个选择符添加样式
.shasha,#shasha2 span{color:red;}
总结：
普通标签选择：以html中的标签选择类选择器：给标签添加一个类属性，根据类属性添加样式，可以使用多个类名，多次使用ID选择器：给标签添加一个ID属性，ID必须是要唯一的，一个文档只能使用一次ID选择器。子选择器：用小于号分隔，指其选择器中的子标签包含选择器：用空格分隔，指其选择器中的所有后代标签通用选择器：对html中所有的标签有效伪类选择器：给标签的一个动作添加一个选择器分组选择器：逗号分隔，同时作用给多个标签CSS的继承，层叠和特殊性
继承：
继承就是指定作用的某个标签其子标签也会被样式作用到。
有些CSS是具有继承性的。
例如：
{color:red;} color就具有继承性{border:1px solid red;} 这个样式就没有继承性
权限：
同时给一个元素设置了不同的样式，系统默认会用那个样式呢？答：系统会用权限最高的样式。
标签额权限是相加得出来的：
标签的权限为1，类选择符的权限为10，ID选择符权限最高为100
p{color:red;} /*权限为1*/p span{color:green;} /*权限为 1+1=2*/.warning(color:white;) /*权限为10*/p span.warning{color:purple;} /*权限为 1+1+10=12*/#footer .note p{color:yellow;} /*权限为100+10+1=111*/
得出的权限越大就使用这个样式
层叠
如果同一个标签使用了同样权限的样式，那会使用那个呢？答：两个会同时存在，不过后一个样式会覆盖掉前一个样式。
p{color:red;}p{color:green;}
重要性 !important
可以给某个样式使用配置最高权限，!important。
这样它的样式就首先使用了。
p{color:red!important;}注意：!important要在分号“;”前面
文本样式：
字体
现在网页大部分用的是微软雅黑，或者宋体。
例：
<style type="text/css">body{font-family:"Microsoft Yahei"}body{font-family:"宋体"}</style>
字号，颜色
字号的单位叫做像素，颜色可以用三原色调出不同的颜色#000，也可以用英文单词配色
例:
<style type="text/css">body{font-size:12px;color:#666;}</style>
两个属性中间用分号分隔
粗体
p span{font-weight:bold;}
斜体
p a{font-style:italic;}
设置下划线
p a{text-decoration:underline;}
删除线
.oldPrice{text-decoration:line-through;}
缩进
中文书写中，每一段的要空前两个文字位。代码表达如下：
p{text-indent:2em;}2em标识文字的2倍大小
行间距（行高）
p{line-height:1.5em}行高的倍数为1.5倍
字间距
中文字间距：h1{letter-spacing:50px;}英文单词间距：h1{word-spacing:20px;}
排版：居中，居左，居右
对块状文本，图片都能操作
居中
h1{text-align:center;｝
居左
h1{text-align:left;}
居右
h1{text-align:right;｝
CSS盒模型
元素分类：
html中标签元素分为3类：
块状元素；内联元素（行内元素）；内联块状元素
常用块状元素
<div>；<p>;<h1>...<h6>;<ol>;<ul>;<dl>;<table>;<address>;<blockquote>;<from>
常用内联元素
<a>;<span>;<br>;<i>;<em>;<strong>;<label>;<q>;<var>;<cite>;<code>
常用内联块状元素
<img>;<input>
块状元素（块级标签）
每一个块状元素独占一行；块状元素的高度，宽度，行高以及顶和底边距都可设置；元素宽度在不设置的情况下，是他本身父容器的百分之百，除非设置一个宽度。内联元素变块状元素
a{display:block;}
内联元素（内联标签）
与其他元素在一行；元素的高度，宽度不可修改；元素的宽度就是包含文字或图片的宽度，不可修改。块级标签转内联标签：
div{display:inline;}
内联块级标签
内联块级标签是同时包含内内联标签和块级标签特征的标签
特点：
1. 和其他元素在一行
2. 元素的高度，宽度，行高以及顶和底边距都可设置
将元素设置为内联块级元素：
a{display:inline-block;}
盒子模型
我们把所有的块级标签比作一个个盒子，盒子之间可以嵌套
congtent与盒子之间的边距叫做内填充（padding）盒子的边框叫border盒子与盒子之间的距离叫做外边距（margin）每一个边距都有top,dottom,left,right 四个属性
盒子的边框
盒子的边框就是围绕盒子的线(border)，可以设置粗细，样式和颜色，三个属性。
border-style(边框样式)常见有：
dashed（虚线）dotted（点线）solid（实线）
border-color（边框颜色）中的颜色可设置为十六进制颜色或英文颜色，如：
border-color:#888;
border-width(边框宽度)中的宽度也可设置：
npx 设置为多少像素
下面三种不常用：
thin
medium
thick
例：
div{border-width:2px;border-style:solid;border-color:#888;}简写：div{border:2px solid red;}
上面的例子直接对4个边的边框进行操作，如果只需要对某一边的边框操作的话需要怎么做呢？
border-bottom:2px solid red; 下边框border-top:2px solid red; 上边框border-left:2px solid red; 左边框border-right:2px solid red; 右边框
这样就可以直接对某一条边框进行操作了。
p{border-bottom:2px solid red;}
盒子的宽度和高度
一个块级标签的实际宽度包含内容的宽度，左填充，右填充，左边框，右边框，左边界，右边界的所有宽度的和。
高度也是一样的，因为块级标签的默认占用父容器的百分之百。
盒模型填充（padding）
元素内容的边框之间是可以设置距离的，称之为填充（padding）。填充分为上，右，下，左（顺时针）
盒模型的填充顺序是不可以搞混的。
例子
分开写：div{padding-top:20px;padding-right:10px;padding-bottom:15px;padding-bottom:30px;}简写：div{padding:20px 10px 15px 30px;}上右下左都是同样的像素时可以这么写：div{padding:10px;}上下一样，左右一样时可以这么写：div{padding:10px 20px;}
边界（margin）
块级与块级之间的边距叫做边界，边界也是按照顺时针方向：上，右，下，左的顺序。
分开写：div{margin-top:20px;margin-right:10px;margin-bottom:15px;margin-left:30px;}简写：div{margin:20px 10px 15px 30px;}四边边距相同时：div{margin:10px;}上下相同，左右相同时：div{margin:10px 20px;}
padding在边框里，margin在边框外
CSS布局模型
流动模型（Flow）；浮动模型（Float）；层模型（Layer）
流动模型（Flow）
Flow是网页默认的布局模型，Flow有以下几个特点：
块级标签都会在所处的包含元素内自上而下顺序眼神分布，块级模块默认的宽度为100%。内联标签都会在所处的包含元素内从左到有水平分布显示。
浮动模型（Float）
浮动模型可以让一行中显示多个块级模块。
例子；可以让多个块级标签按照从左或从右的顺序排列。
div{width:200px;height:200px;border:2px red solid;float:left;float:right}#div1{float:left;}#div2{float:right;}<div id="div1">1</div><div id="div2">2</div>
层模型
层模型分为三种形式：
绝对定位（position:absolute）相对定位（position:relative）固定定位（position:fixed）
绝对定位（position:absolute）
想为元素设置层模型中的绝对定位，需要设置position:absolute(绝对定位)，这条语句使用left,right,top,bottom属性，相对于其最接近的一个具有定位属性的父块含块进行绝对定位。如果不存在这样的包含块，则相对与body元素，即相对于浏览器窗口。
例子：使div元素相对于浏览器窗口向右移动100px，向下移动50px。
div{width:200px;height:200px;border:2px red solid;position:abbsolute;left:100px;top:50px;}<div id="div1"></div>
相对定位（position:relative）
相对于这个块级标签原来的位置做移动。
例：
#div1{width:200px;height:200px;border:2px red solid;position:relative;left:100px;top:50px; }
固定定位（position:fixed）
固定定位标识，就爱那个块级标签定位在窗口试图的某个位置，就算下拉网页，其位置也不会改变，类似与购物网站的标题。
例：
#div1{width:200px;height:200px;border:2px red solid;position:fixed;left:100px;top:50px;}
Relative与Absolute组合使用（相对定位和绝对定位组合使用）
使用此组合必要的几个条件：
1. 参考定位的元素必须是相对应定位元素的前辈元素；
2. 参考定位的元素必须加入position:relative;
3. 定位元素加入position:absolute，变可以使用top,bottom,left,right来进行偏移定位。
例：
<head><style>.box1{width:200px;height:200px;position:relative;}.box2{position:absolute;top:0;left:0;}</style><head><body><div class="box1"><div class="box2">相对应元素</div></div></body>
