CSS层叠样式表（Cascading Style Sheets）
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>