CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
一、CSS特性：
- 1、继承性：继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。并不是所有样式都可以继承，如：border:1px solid red;
- 2、特殊性：当同一元素被设置不同的CSS样式代码时，根据权值选择元素格式。
- 3、层叠性：在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
- 4、重要性：我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，这时候我们可以使用!important来解决。
二、权值的规则：
标签的权值为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*/
三、具体实现
1、CSS添加注释：/*添加注释*/
2、设置相应的格式：
p{
font-size:20px;/*设置文字字号*/
color:red;/*设置文字颜色*/
font-weight:bold;/*设置字体加粗*/
}
选择要设置格式的文本：
<p>文本</p>
- 3、CSS 样式代码插入的形式
分为：内联式、嵌入式和外部式 - 内联式（直接写在html标签中）：
<p style="color:red">这里文字是红色。</p>
- 嵌入式（写在当前文件中）：把css样式代码写在<style>标签之间。
<style type="text/css">要设置的格式</style>
- 外部式（写在单独文件中）：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
- 4、类选择器：
.类选器名称{css样式代码;}
.stress{
font-size:12px;
background:#900;
color:090;
}
<span class="stress">胆小如鼠</span>
- 5、ID选择器：
#ID选择器{css样式代码;}
#stress{
font-size:12px;
background:#900;
color:090;
}
<span id="stress">........</span>
类选择器和ID选择器区别：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
- 6、子选择器：
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
- 7、包含(后代)选择器：
.first span{color:red;}
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
- 8、通用选择器：
* {color:red;}
- 9、伪类选择符：
a:hover{color:red;}
当鼠标滑过这段内容是，内容变成红色。
四、CSS盒模型
（一）盒模型中的标签及其含义
- 内填充（内容与边框的距离）：padding
- 外边距：margin
- 盒子边框：border
以上三个都有四个方向：top、bottom、left、right - 元素分类：
- 常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。常用的内联元素有：
<a>、<span>、
、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。常用的内联块状元素有：<img>、<input>
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
（二）设置边框格式：
div{
border:2px solid red;/*全部边框*/
}
div{
border-right:2px soid red;/*只设置右边框*/
}
/*其余格式设置同上*/
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。
五、布局模型
在网页中，元素有三种布局模型：
- 1、流动模型（Flow）
特点：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行） - 2、浮动模型 (Float)
- 3、层模型（Layer）
六、浮动模型
块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，设置元素浮动就可以实现这一愿望。任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
七、层模型
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。
层模型有三种形式：
- 1、绝对定位(position: absolute)
将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
- 2、相对定位(position: relative)
通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。 - 3、固定定位(position: fixed)
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。当这四个值相同时，可以只写一个，如：margin:10px 10px 10px 10px;可以简写为margin:10px;7
