W3C英文网站：https://www.w3.org/
W3Shcool中文网站：http://www.w3school.com.cn
概述
CSS指层叠样式表(Cascading Style Sheets),用来指导HTML元素的显示，实现了内容与表现分离，极大提高了工作效率。
通常采用外部样式表导入的方式实现内容与表现分离。
HTML引入CSS的4种方式：（优先级1-4, 1优先级最高）
1--内联样式（在HTML元素内）
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
2--内部样式表（位于
标签内）<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
type可以不写！
3--外部样式表在header引入
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
4--浏览器默认样式
CSS语法
CSS语法由选择器和多条申明构成。
selector {declaration1; declaration2; ... declarationN }
h1 {color:red; font-size:14px;}
p {font-family: "sans serif";}
如果值为若干单词，则要给值加引号
每行只描述一个属性，用分号结束
CSS对大小写不敏感（注意：class 和 id 名称对大小写敏感）
p标签设置颜色的几种写法：
p { color: #ff0000; }
p { color: #f00; }
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
CSS选择器
- 标签选择器：
h1,h2,h3,h4,h5,h6 {
color: green;
}
body {
font-family: Verdana, sans-serif;
}
根据上面这条规则，站点的 body 元素将使用 Verdana 字体
- 派生选择器：
li strong {
font-style: italic;
font-weight: normal;
}
- id选择器：
#red {color:red;}
- 类选择器：
.center {text-align: center}
- 属性选择器：
[title]{
color:red;
}
- 通配符选择器(*)：
*{
color:red;
}
- 指定标签选择器:
p.box{
color:red;
}
标注p的class为‘box’的p标签。
- 并集选择器
h1,h2,h3,h4,h5,h6 {
color: green;
}
- 伪类选择器
a:link 访问前
a:visited 访问后
a:hover 鼠标移动到上方
a:active 点击状态
优先级：id选择器 > 类选择 > 标签选择器
CSS样式
- 背景
背景颜色：p {background-color: gray;}
背景图像：body {background-image: url(/i/eg_bg_04.gif);}
背景重复：background-repeat:
背景定位：background-position
- 文本
缩进文本：p {text-indent: 5em;}或者p {text-indent: -5em;}或者p {text-indent: 20%;}
水平对齐：text-align
字间隔： p.spread {word-spacing: 30px;}或者p.tight {word-spacing: -0.5em;}
字母间隔：h4 {letter-spacing: 20px}或者h1 {letter-spacing: -0.5em}
字符转换：h1 {text-transform: uppercase}
文本装饰：
a {text-decoration: none;}
a {text-decoration: underline;}
a {text-decoration: overline;}
a {text-decoration: line-through;}
a {text-decoration: blink;}
处理空白字符：
p {white-space: normal;}
white-space 属性的行为：
pre-line、 normal、 nowrap、 pre、 pre-wrap
-
字体
CSS 定义了 5 种通用字体系列： Serif 字体、Sans-serif 字体、Monospace 字体、Cursive 字体、Fantasy 字体
指定字体系列：body {font-family: sans-serif;}
字体风格：normal、italic、oblique
字体加粗：
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
字体大小：
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
h1 {font-size:3.75em;} /* 60px/16=3.75em /
h2 {font-size:2.5em;} / 40px/16=2.5em /
p {font-size:0.875em;} / 14px/16=0.875em */ -
设置连接样式：
样式：
a:link {color:#FF0000;} /* 未被访问的链接 /
a:visited {color:#00FF00;} / 已被访问的链接 /
a:hover {color:#FF00FF;} / 鼠标指针移动到链接上 /
a:active {color:#0000FF;} / 正在被点击的链接 */
背景色：
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;} -
无序列表：
列表类型：ul {list-style-type : square}
列表图像：ul li {list-style-image : url(xxx.gif)}
（ 另外的列表标签：有序列表ol：li。 普通列表dl：dt，dd） -
表格：
表格边框：
table, th, td{
border: 1px solid blue;
}
折叠边框：
table{
border-collapse:collaps
}
表格宽度和高度
table{
100%;
}
th{
height:50px;
}
表格文本对齐
td{
text-align:right;
}
表格内边距：padding
表格颜色：color
CSS定位
position: absolute; left,top,right,bottom对父类绝对定位。
position: fixed; left,top,right,bottom对浏览器绝对定位。
position: relative 相对定位。
"left:20" 会向元素的 LEFT 位置添加 20 像素。
h2{
position:absolute;
left:100px;
top:150px;
}
display：显示类型
overflow：控制超出父级内容如何显示
overflow可能的值：
visible
默认值。内容不会被修剪，会呈现在元素框之外。
hidden
内容会被修剪，并且其余内容是不可见的。
scroll
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit
规定应该从父元素继承 overflow 属性的值。
visibility：
可能的值
visible
默认值。元素是可见的。
hidden
元素是不可见的。
collapse
当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit
规定应该从父元素继承 visibility 属性的值。
CSS表格属性
border-collapse 是否合并表格边框
border-spacing 相邻表格的距离
caption-side 规定表格标题的位置
empty-cells 规定是否显示空单元格的背景和边框
table-layout 设置用于表格的布局算法
CSS的层叠性和继承性
选择你器优先级相同的情况下，后写的样式覆盖先写的。
继承属性：文字控制属性能继承，区块控制属性不能继承。
CSS 巧用 :before和:after
:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。
CSS盒子模型
margin 外边距
border 边框
padding 内边距
width、hight 宽、高
padding：10px 20px 40px 80px（顺序：上、右、下、左）
padding：10px 20px（三值写法：上、左右、下）
padding：10px 20px（两值写法：上下、左右）
padding：10px(单值写法：4边值相同)
firebug选中标签有可能下边距变窄，使用标签的类会解决此问题。firebug的bug。
如果盒子添加了border和padding属性，在宽高基础上减去相应的border和padding，否则整体尺寸会变大。
外边距塌陷/合并问题1：上下两个div，外边距margin合并，哪个边距大取哪个的值。
外边距塌陷/合并问题2：嵌套排列的div。
解决1：给父级添加border，或者overfloat：hidden。
解决2：给子级添加float: left属性。
行内标签的垂直内外边距：
margin和padding无效，垂直方向使用line-height
盒子居中：
margin 上下随意，左右设置为auto。条件：盒子有宽度，显示模式为块级
css知识碎片
- 行高
要使div里面一行文字垂直居中，设置div的line-hight跟文字一样高。 - 去掉下划线
text-decoration:none - 添加下划线
text-decoration:underline - 网页3步准备工作：
- 清空标签的默认样式。比如h1的margin，input的padding
body,div,p,span,a,image,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,input{ margin:0; padding:0; list-style:none;}
这种效率比较低，不建议使用：* { margin:0; padding:0; list-style:none;} - 设置全局样式
设置body的文字3属性 - 超链接的默认样式
超链接的颜色和下划线。
a {text-decration:none; color:#000eee; }
a:hover {}
- 浮动
标准流：块标签div独占一行，行标签span一行多标签共存。
属性：float: left | right
作用：使块级标签在一行共存。多个div可以在同一行排列 - 清除浮动
清除浮动的元素布局不会受到之前元素浮动的影响。 - 左右结构布局
任何左右结构都由3部分完成，一个标准流下的父级和2个浮动流的左右子级。 - 定位
-
相对定位：占位脱离，不改变盒子的显示模式。
positon: relative left | top -
绝对定位：脱离标准流，不占位置，行内模式
positon: absolute left | top
绝对定位默认以浏览器为参照物。
绝对定位使用规则：子级对决定位，父级相对定位。 -
固定定位：实现盒子固定到浏览器之上。ie6显示为行内块。
positon: fixed left | top -
z-Index作用：调整标签z轴堆叠顺序。z-index取值为整数，取值越大，堆叠越靠上。必须和定位属性配合使用才能生效。
-
- CSS精灵
1张大图上包含小图。大图叫精灵或雪碧。核心技术：背景图定位 - 热区链接
要使用Dreamweaver软件。典型案例，地图上点击省份跳转到对应的网页。 - 浏览器兼容性测试：火狐和IE6，只测试这2款。（火狐兼容性最好，ie6兼容性最差）
- IE6兼容性问题：
- 双倍边距问题（IEtester插件测试ie6），解决：添加_display:inline(下划线志愿id6认识)
- 图片链接有描边。解决：在清空标签默认环境设置img的border属性：border:none
- 书写不规范插入图像底下留白问题。解决：1.父级添加overflat:hidden.2.img添加display：block
- CSS滤镜显示问题。ie11以下支持的滤镜：filter:alpha(opacity=60),其他浏览器:opacity:0.6
解决办法：2中都写上。注意：滤镜同时透明背景和内容，将内容和背景拆开存放分别定位。