CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
选择器{
样式;
}
一、css三种样式方法
1、内联式css样式，直接写在html标签中
<p style="color:red;font-size:12px">这里文字是红色。</p>
【注意】如果有多条css样式代码设置可以写在一起，中间用分号隔开
2、嵌入式css样式，写在当前的文件中
<style type="text/css">
span{
color:red;
}
</style>
3、外部式css样式，写在单独的一个css文件中
<link href="base.css" rel="stylesheet" type="text/css" />
4、三种方式的优先级对比(默认三种权值一样下对比)
内联式 > 嵌入式 > 外部式
【注意】但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面
二、选择器
1、标签选择器
标签选择器其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>。例如下面代码：
p{font-size:12px;line-height:1.6em;}
上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。
2、类选择器(.classname)
. 类选器名称{css样式代码;}
如：<span class="stress">胆小如鼠</span>
.stress{color:red;}
3、ID选择器
如：<span id="setGreen">公开课</span>
#setGreen{ color:green; }
【注意】在一个HTML中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
4、包含(后代)选择器
如：.first span{color:red;} .first>span{color:red;}
【总结】>作用于元素的第一代后代，空格作用于元素的所有后代。
id权重 > class权重 > 标签权重
5、通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素
如：* {color:red;}
6、伪类选择符
为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:link{color:red;} 没有被访问的超级链接
a:visited{color:red;} 已被访问的超级链接
a:hover{color:red;} 正被鼠标悬停的超级链接
a:active{color:red;} 正被激活的超级链接(按下按键但是还没有松开)
7、分组选择符
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）
如：h1,span{color:red;}
8、元素关系选择器
子选择器，如：div>p；div的子标签p
相邻兄弟选择器，如：img+p；图片后面紧跟着的段落将被选中
通用兄弟选择器，如：p~span；p元素之后的所有同层级span元素
9、序号选择器
:first-child第一个子元素、:last-child
:nth-child(3) 第三个子元素 、 :nth-last-child(3)倒数第三个子元素
:nth-of-type(3) 第三个某类型子元素、 :nth-last-of-type(3) 倒数第三个某类型子元素
三、CSS的继承、层叠和特殊性
1、继承
p{color:red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
【注意】有一些css样式是不具有继承性的。如border:1px solid red;
2、特殊性
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
继承也有权值但很低，有的文献提出它只有0.1
3、层叠
当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
【总结】内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件）
4、重要性(优先级最高)
p{color:red!important;}
四、CSS格式化排版
1、字体
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;}
8、行间距(行高)
p{line-height:1.5em;}
9、中文字间距、字母间距
文字间隔或者字母间隔就可以使letter-spacing 来实现
h1{letter-spacing:50px;}
单词间距设置，可以使用 word-spacing 来实现
h1{word-spacing:50px;}
10、对齐——段落排版
h1{text-align:center;}
其他：值的含义
1、 像素
2、 em
如果元素的 font-size 为 14px ，那么 1.5em = 21px；
【注意】当给 font-size 设置单位为 em 时，此时计算的标准以父元素的 font-size 为基础。
五、CSS盒模型
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(padding),边框(border),内边距(margin),和实际内容(content)
(一)、CSS元素分类(在css中，html中的标签元素大体分为如下三种不同类型)
一、块状元素
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
a{display:block;} 可将内联元素a转换为块状元素
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
二、内联元素（行内元素）（inline）元素
<span>、<a>、<label>、 <strong> 和<em>
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
三、内联块状元素
同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
a{display:inline-block;}
(二)、CSS盒模型
盒子模型包含三种：
方向顺序都是上右下左(顺时针)，如pading-top/pading-right /pading-bottom/pading-right
一、padding内边距
盒子与内容（<p><a><img>……）的距离。
分为：padding—left（左）；padding—right（右）；padding—top（上）；padding—bottom（下）；
可以一同设置，全部在padding中。
二、margin 外边距：盒子与盒子之间的填充，与上同。
三、border：边框，一起写包含：border：1px solide #（颜色号）
一般用实心边框，其他的边框需要考虑兼容性问题！
1、border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。
同样border也有四种方向：border-top/border-right/border-bottom/border-left
【总结】上述盒模型代码缩写
一、有距离有关的元素
1、如果top、right、bottom、left的值相同
margin:10px;
2、如果top和bottom值相同、left和 right的值相同
margin:10px 20px;
3、如果仅是left和right的值相同
margin:10px 20px 30px 20px; 可缩写为：margin:10px 20px 30px;
二、颜色
几种方式：英文：p{color:red;} RGB ：p{color:rgb(133,45,200);} 十六进制：p{color:#00ffff;}
p{color: #336699;} 可以缩写为： p{color: #369;}
三、字体缩写
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;
}
六、CSS布局模型
一、流动模型（Flow）
Flow布局是默认的网页布局模式；默认状态下，块状元素的宽度都为100%；默认状态下，内联元素显示宽度是自身的宽度，内联元素都会在所处的包含元素内从左到右水平分布显示。
二、浮动模型 (Float)
float:left;
三、层模型（Layer）
1、绝对定位(position: absolute)
最接近的一个具有定位属性的父包含块进行绝对定位
使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位
2、相对定位(position: relative)
相对于以前的位置移动
3、固定定位(position: fixed)
相对于浏览器视图
4、Relative与Absolute组合使用
a、参照定位的元素必须是相对定位元素的前辈元素：
b、参照定位(父)的元素必须加入position:relative;
<div id="box3">
<img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">
<div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>
</div>
----------------------------------------------
div{border:2px red solid;}
#box3{
width:200px;
height:200px;
position:relative;
}
#box4{
width:90%;
position:absolute;
bottom:0px;
}
七、CSS样式设置小技巧
一、水平居中设置-行内元素
通过给父元素设置 text-align:center 来实现
来源: http://www.imooc.com/learn/9
1611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
