css

<p style="color:red"> //1,内联式css样式
<p style="color:red;font-size:12px">
<style type="text/css"> //2,嵌入式css样式，
span{
color:red;
}
</style>
<link href="base.css" rel="stylesheet" type="text/css" /> //3,外部式css样式

选择器{
样式;
}
选择符{属性:值}
p{color:red;}

标签选择器
p{font-size:12px;line-height:1.6em;}

类选择器
.类选器名称{css样式代码;}
<span class="stress">胆小如鼠</span>
.stress{color:red;}

ID选择器
#ID选择器{css样式代码;}
<span id="id1">胆小如鼠</span>
#id1{color:red;}

子选择器
.food>li{border:1px solid red;} //这行代码会使class名为food下的子元素li加入红色实线边框。

包含(后代)选择器
.first span{color:red;} //选择指定标签元素下的后辈元素

通用选择器
* {color:red;} //它的作用是匹配html中任意标签元素

伪类选择符
a:hover{color:red;}它允许给html不存在的标签设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：

分组选择符
h1,span{color:red;} //h1、span标签同时设置字体颜色为红色

CSS的继承、层叠和特殊性。
如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。

权值来判断使用哪个css样式
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
p{color:red;} /*权值为1*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
继承也有权值但很低，有的文献提出它只有0.1

CSS格式化排版
1，段落排版--缩进
p{text-indent:2em;}

2，段落排版--行间距
p{line-height:1.5em;}

3, 段落排版--字间距、字母间距
h1{
letter-spacing:50px;
}

单词间距设置：
h1{
word-spacing:50px;
}

CSS盒模型
div{
border-width:2px;
border-style:solid;
border-color:red;
}
盒模型--边界
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
可更换成padding
padding在边框里，margin在边框外。

css布局模型
流动模型（一）
自上而下。

浮动模型
任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>

层模型有三种形式
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)