CSS（Cascading Style Sheets）：层叠样式表，主要用于定义HTML内容在浏览器内的显示样式。
CSS样式由选择符和声明组成，声明由属性和值组成。
选择符：又称选择器，指明网页中要应用样式规则的元素。
声明：声明放在英文大括号中”{}“，属性和值之间用冒号：分隔，多个声明之间用分号；分隔。
CSS注释：/*注释语句*/
内联式css：内联式CSS样式表九十八CSS代码直接写在现有的HTML标签中。要写在元素开始标签里，CSS代码写在style=""双引号中，如果有多条CSS代码中间用分号隔开。
如：
<p style="color:red"这里文字是红色。></p>嵌入式css：把css代码写在<style type="text/css"></style>中，嵌入式css样式必须写在<style></style>之间，并且嵌入式css样式一般写在<head></head>之间。
外部（联）式css样式：将css代码代码单独写在一个文件中，这个css样式文件以".css"为扩展名。在<head></head>标签内使用<link>标签将css样式文件链接到HTML文件内。
<link href="main.css" rel="stylesheets" type="text/css" />三种样式优先级：内联式>嵌入式>外部式， 嵌入式>外部式 前提：嵌入式css样式的位置一定在外部式的后面。离被设置元素越近优先级越高。
选择器：选择器指明了{}的样式作用的对象
选择器{
样式;
}标签选择器：为标签设置样式
类选择器：英文圆点开头，类选择器名字可以任意取，但是不能取中文
.类选择器名称{
样式代码：
}.setColor{
color:red;
} /* 设置类选择器*/
<span class=".setColor">作用对象</span> /*使用*/
ID选择器：
#ID选择器{
样式代码;
}#setGreen{
color:green;
} /*设置*/
<span id="setGreen">作用对象</span>类和ID选择器的区别：ID选择器只能在文档中使用一次。可以使用类选择器词列表方法为一个元素同时设置多个样式，不能使用ID词列表。
.setColor{
color:red;
}
.setSize{
size:20px;
}
<span class="setColor setSize">作用对象</span> /*合法*/
#setColorID{
color:red;
}
#setSizeID{
size:20px;
}
<span id="setColorID setSizeID">作用对象</span> /*不合法*/
子选择器：>选择指定标签的第一代子元素
.food>li{border:1px solid red;} /* 将class名为food下的子元素加入红色实线边框 */包含（后代）选择器：加入空格，选择指定标签下的后辈元素
.fisrt span{color:red;}子选择和包含选择器的区别：子选择器作用于直接后代，或者说是作用于第一代后代。包含选择器作用于所有的子后代元素。
>作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器：* 匹配HTML中所有的标签元素
* {color:red;}伪类选择符：允许给HTML中不存在的标签（标签的某种状态）设置样式。
a:hover{color:red;} /* a标签设置鼠标滑过颜色变红 */分组选择符：为HTML中多个标签设置多一个样式，使用分组选择符逗号，
h1,span{color:red;}继承：为某个标签设置了某种样式，标签的子元素文本也获得了这种样式。但是有一些css样式不具有继承性。如：border:1px solid red;
特殊性：标签的权值为1，类选择符的权值为10，ID选择符为100。如果同一个元素有多个css样式存在，元素将会应用权值最高的样式。
层叠：在HTML文件中对于同一个元素可以有多种css样式存在，当有相同权重样式存在时，会根据css样式的先后顺序来决定，应用后面的样式，后面会覆盖前面。层叠即为后面覆盖前面，由此就不难理解css样式的优先级：内联式（标签内部）
重要性：使用!important为样式设置最高权值，!impotant写在分号前面
p{color:green!important;} /*权值最高 显示绿色*/
p{color:red}字体：使用的字体要为常用字体，如果本地电脑没有安装设置字体，就会显示浏览器默认字体
body{font-family:"Microsoft Yahei";} /*设置字体为微软雅黑*/字号、颜色：
body{font-size:12px;color:#666;} /*字体为12像素，颜色为#666(灰色)*/粗体：
p{font-weight:bold;}斜体：
p{font-style:italic;}下划线：
p{text-decoration:underline;}删除线:
p{text-decoration:line-through;}缩进：
p{text-indent:2em;} /*首行缩进两个空格*/行间距：
p{text-height:2em;} /*行间距2em*/中文字间距、字母间距：
h1{letter-spacing:50px;} /*中文字间隔、字母间隔*/h1{word-spacing:50px;} /*英文单词间隔*/对齐：
div{text-align:center;}/*center:居中 left:居左 right:居右 */常用的块状元素：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>常用的内联元素：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>常用的内联块状元素：
<img>、<input>块级元素：将元素显示为块级元素，块级元素特点：每个块级元素都新起一行，其后元素也另起一行。元素的高度、宽度、顶部和底部边距都可以设置，元素宽度在不设置的情况下，是它本身父容器的100%
a{display:block;} /*将内联元素a转换为块状元素*/内联元素：将元素显示为内联元素，内联元素特点：和其它元素都在一行上，元素的高度、宽度、顶部和底部边距都不可以设置，元素的宽度就是它包含文字或图片的宽度不可改变。
div{display:inline;}内联块状元素：同时具备块级元素和内联元素的特点，inline-block元素特点：和其它元素都在一行上，元素的高度、宽度、顶部和底部边距都可以设置。
a{display:inline-block;}盒模型-边框：盒子模型的边框就是围绕着内容及补白的线，可以设置这条线的粗细、样式、颜色。
div{
border-width:2px;
border-style:solid;
border-color:red;
} /*为div设置边框粗细为2px，样式为实心，颜色为红色*/
div{border:2px solid red;} /*上面代码的缩写形式*/border-style:边框样式，常见的边框样式：dashed 虚线 dotted 点线 solid 实现
边框2：css允许只为一个方向设置边框
div{border-top:1px solid #ccc;} /* 上边框 */
div{border-bottom:1px solid #ccc;} /* 下边框 */
div{border-left:1px solid #ccc;} /* 左边框 */
div{border-right:1px solid #ccc;} /* 右边框 */盒模型-宽度和高度：一个元素的实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
div{
width:200px; /*内容宽度*/
padding:20px; /*填充宽度*/
border:1px; /*边框宽度*/
margin:10px; /*边界宽度*/
}盒模型-填充：元素内容和边框之间可以设置距离，称为填充。填充按顺时针分为上、右、下、左。顺序不能交换。
div{padding:20px 30px 40px 50px;}
div{
padding-top:20px;
padding-right:30px;
padding-bottom:40px;
padding-lefr:50px;
} /*防止顺序错误可以这样写*/
div{padding:20px} /*上、右、下、左填充都为20px*/
div{padding:10px 20px} /*上下填充为10px、左右填充为20px*/
盒模型-边界：元素与元素之间的距离使用边界来设置，边界分为上、右、下、左。padding和margin的区别：padding在边框里，margin在边框外。
div{margin:20px 30px 40px 50px;} /*上 右 下 左*/
div{
margin-top:20px;
margin-right:30px;
margin-bottom:40px;
margin-left:50px;
}
div{margin:20px} /* 上下左右边界都为20px */
div{margin:20px 30px} /*上下边界为20px 左右边界为30px */css布局模型：流动模型(Flow)、浮动模型(Float)、层模型(Layer)
流动模型：流动是网页的默认布局模式，特点：块状元素都会在所处的包含元素内自上而上按顺序垂直分布。在默认状态下，块状元素的宽度都为100%。内联元素都会在所处的包含元素内从左到右水平分布显示。
浮动模型：浮动模型可以让两个块状元素并排显示
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
} /*左浮动*/
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
} /*右浮动*/
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;} /*一左一右显示*/层模型：图层精确定位，绝对定位(position:absolute)、相对定位(position:relative) 、固定定位(fixed)。
层模型-绝对定位：对于其最接近的具有定位属性的父包含块进行绝对定位，如果不存在这样的包含块，则相对于body元素，即浏览器窗口。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute; /*绝对定位*/
top:20px;
left:20px;
} /*相对于浏览器窗口下移20px 向右移20px */层模型-相对定位：相对定位是先按static(float)方法生成一个元素,然后相对于以前的位置移动。移动的方向和幅度由left、right、bottom、right属性决定，偏移前的位置保留不动,覆盖不了前面div没有偏移前的位置。
div{
width:200px;
height:200px;
border:2px red solid;
position:relation; /*绝对移动*/
left:100px; /*右移100px*/
top:50px; /*下移50px*/
}固定定位：相对移动的坐标是视图(屏幕内的网页窗口)本身，由于视图本身是固定的，他不会随浏览器窗口的滚动条滚动而变化。
div{
width:200px;
height:200px;
border:2px red solid;
position:fixed; /*固定移动*/
left:100px; /*向右移动100px*/
top:50px; /*向下移动50px*/
}relative与absolute组合使用：absolute可以实现相对于浏览器定位，再加上relative就可以实现相对于元素定位。参照定位元素必须是相对定位元素的前辈元素。
#box1{
width:200px;
height:200px;
positon:relation;
} /*参照定位的元素*/
#box2{
positon:absolute;
top:20px;
left:30px;
}/*定位元素*/
/*box2相对于父元素box1进行定位*/
盒模型代码简写：
p{
margin:10px 20px 30px 20px;
}
p{
margin:10px 20px 30;
} /* 左右 相同的缩写 */颜色值缩写：16进制色彩值，每两位相同可以缩写一半。
p{
color:#336699
}
p{
color:#369;
} /* 颜色缩写 */字体缩写：使用简写至少要指定font-size和font-family属性，其它属性未设置将会使用默认值。在缩写是font-size于line-height之间要加"/"斜杠。
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
} /* 缩写 */颜色值：字体颜色(color)、背景颜色(background-color)、边框颜色(border)。
英文命名颜色：
p{color:red;}RGB颜色：由R(red)、G(green)、B(blue)三种颜色比例来配色。每一项的值可以是0-255的数，也可以是百分数。
p{color:rgb(123,234,123);}
p{color:rgb(10%, 20%,30%);}十六进制颜色：也是RGB原理，将0-255映射成了十六进制00-ff
p{color:#00ffff;}像数：像数指的是显示器上面的小点，css规范90像数=1英寸。
em：本元素给定的font-size值，font-size=12px，那么1em=12px。当给font-size设置为em时，计算是以父元素的font-size为基础。
百分比：line-height = 12 * 1.2 = 14.4px
p{font-size:12px;line-height:120%;}水平居中-行内元素：通过给父元素设置text-align:center让文字、图片等行内元素水平居中。
<style>
.texCenter{
text-align:center;
}
</style>
<body>
<div class="textCenter>在父容器中水平居中的内容</div>
</body>水平居中设置-定宽块状元素：定宽块状元素为宽度为固定值的块状元素，满足定宽和块状的元素可以通过设置左右margin值为auto来实现居中。
<style>
div{
border:2px red solid;
width:200px; /* 宽度为固定值 */
margin:10px auto; /* margin-left和margin-right设置为auto */
}
</style>
<body>
<div>定宽块状元素水平居中</div>
</body>水平居中设置-不定宽块状元素：加入table标签，利用table标签的长度自适应性。table其长度根据其内的文本长度决定。然后利用定宽块状元素水平居中的margin方法。首先为居中元素加一个table标签，然后为这个table标签设置margin。
<style>
table{
margin: 0 auto;
}
</style>
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>居中内容</li>
</ul>
</td></tr>
</tbody>
</table>
</div>水平居中设置-不定宽块状元素：改变块状元素的display为inline类型，然后用text-align:center实现水平居中。
<style>
.container{
text-align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
} /* 消除文本与div边框之间的距离 */
.container li{
margin-right:8px;
display:inline;
}/* 设置li文本之间的间隔 */
</style>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>
</body>水平居中-不定宽元素：给父元素设置float，给父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现水平居中。
垂直居中-父元素高度确定的单行文本：通过设置父元素的height和line-height一致实现。
垂直居中-父元素高度确定的多行文本：使用插入table标签，同时设置vertical-align:middle。
垂直居中-父元素高度确定的多行文本：设置块级元素的display为table-cell(表格单元显示)，激活vertical-align属性。但是这种实现方式兼容性差。
隐性改变display属性：当元素(display:none 除外)设置下面两行代码中的任意一行，元素的display显示类型会自动变成display:inline-block
position:absolute
float:left 或者 float:right