一：认识css
1.认识css
层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式
2.css语法
css 样式由选择符和声明组成，而声明又由属性和值组成。
选择符：又称选择器，指明网页中要应用样式规则的元素。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔。
最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
3.css注释
/*注释语句*/来标明。
4.css样式
内联式、嵌入式和外部式三种。
5.内联式
内联式css样式表就是把css代码直接写在现有的HTML标签中。
<p style="color:red">这里文字是红色。</p>
css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。、
<p style="color:red;font-size:12px">这里文字是红色。</p>
6.嵌入式
嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。
<style type="text/css">span{color:red;}</style>
7.外联式
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，
在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
<link href="base.css" rel="stylesheet" type="text/css" />
rel="stylesheet" type="text/css" 是固定写法不可修改。
<link>标签位置一般写在<head>标签之内。
二：选择器
1.标签选择器
标签选择器其实就是html代码中的标签。
p{font-size:12px;line-height:1.6em;}
2.类选择器
.类选器名称{css样式代码;}
设置类：
<span class="stress">胆小如鼠</span>
写css样式：
.stress{color:red;}/*类前面要加入一个英文圆点*/
3.ID选择器
为标签设置id="ID名称"，而不是class="类名称"。
ID选择符的前面是井号（#）号，而不是英文圆点（.）。
设置ID：
<span id="setGreen">公开课</span>
写选择器：
#setGreen{
color:green;
}
4.类选择器与ID选择器的异同点
可以应用于任何元素
A: ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
<p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>
B: 可以使用类选择器词列表方法为一个元素同时设置多个样式。
.stress{color:red;}
.bigsize{font-size:25px;}
<p>到了<span class="stress bigsize">三年级
5.子选择器
还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。
.food>li{border:1px solid red;}
6.包含（后代）选择器
加入空格,用于选择指定标签元素下的后辈元素。
.first span{color:red;}
7.子选择器宇后代选择器的区别
子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
8.通用选择器
使用一个（*）号指定，它的作用是匹配html中所有标签元素
* {color:red;}
9.伪类选择器（有机会认真学习）
允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
:hover 可以放在任意的标签上。
10.分组选择器
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）。
编辑器中的h1、span标签同时设置字体颜色为红色：
h1,span{color:red;}
三：样式优先级问题
1.继承
CSS的某些样式是具有继承性的。
允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
注意有一些css样式是不具有继承性的。如border:1px solid red;
2.特殊性
为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?
浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
3.层叠
层叠就是在html文件中对于同一个元素可以有多个css样式存在。
当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
4.重要性（最高优先级）
有些特殊的情况需要为某些样式设置具有最高权值。
可以使用!important来解决。
注意：!important要写在分号的前面。
四：格式化排版
1.字体设置
body{font-family:"宋体";}
现在一般网页喜欢设置“微软雅黑”，如下代码：
body{font-family:"Microsoft Yahei";} ======== body{font-family:"微软雅黑";}
2.字号与颜色
body{font-size:12px;color:#666}
3.文字样式--粗体
p span{font-weight:bold;}
4.文字样式--斜体
p a{font-style:italic;}
5.文字样式--下划线
p a{text-decoration:underline;}
6.文字样式--删除线
.oldPrice{text-decoration:line-through;}
7.段落排版--缩进
p{text-indent:2em;}
2em的意思就是文字的2倍大小。
8.段落排版--行高
p{line-height:2em;}
9.段落排版--文字间距与字母间距
h1{letter-spacing:50px;}
h1{word-spacing:50px;}
10.段落排版--对齐
对于文字可以，对于图片仍然可以。
h1{text-align:center;}
left
right
五：盒子模型
1.元素分类
块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
2.块级元素
将元素转为快级元素吗，使得该元素有快级元素的特点：
{ display:block}。
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
3.内联元素
当然块状元素也可以通过代码 display:inline 将元素设置为内联元素
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
4.内联块状元素
就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
5.盒子模型（块级元素都具备这个特点）
6.边框
可以设置它的粗细、样式和颜色(边框三个属性)。
div{border:2px solid red;}
或者：
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。
注：
为 标签单独设置下边框，而其它三边都不设置边框样式。
{border-bottom:1px solid red;}
top
reigt
left
7.宽度与高度
一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
8.填充
元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：
div{padding:20px 10px 15px 30px;}
9.边界
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
div{margin:20px 10px 15px 30px;}
六：布局模型
1.分类
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
2.流动模型
默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。(块状元素)
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素)
3.浮动模型
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。
4.层模型
让html元素在网页中精确定位。
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
5.绝对定位
需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，
然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
可以实现div元素相对于浏览器窗口向左移动100px，向下移动50px。
6.相对定位
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，
然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
下代码实现相对于以前位置向下移动50px，向右移动100px
注：
偏移前的位置保留不动。解释如下：
7.固定定位
固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
8.将relative与absolute相结合
相对于其它元素进行定位。
使用position:relative来帮忙，但是必须遵守下面规范：
1、参照定位的元素必须是相对定位元素的前辈元素：
2、参照定位的元素必须加入position:relative;
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
七：缩写
1.盒子模型缩写
2.颜色值的缩写
3.字体缩写
在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
八：值
1.颜色值
在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：
1、英文命令颜色
前面几个小节中经常用到的就是这种设置方法：p{color:red;}
2、RGB颜色
这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
p{color:rgb(133,45,200);}
每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：
p{color:rgb(20%,33%,25%);}
3、十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。
p{color:#00ffff;}
2.长度值
目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
90像素=1英寸
p{font-size:12px;line-height:130%}：
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。
注：
