标签：
第一章 CSS需要的HTML
一、用HTML来组织内容，用CSS使内容看起来更美观
思考布局结构：
（1）HTML根据逻辑划分和识文本在网页中所起的作用，如<h1> 标签介绍最重要的网页内容，其他标题将内容分为其他次要的，但却与之相关的小节。
（2）使用名称意思与该内容在网页中所起的作用最接近的标签，而不是根据内容的外观定义标签
（3）简洁、清晰的HTML可以提升网页在搜索引擎网站上的排名
注：登录HTML5doctor.com网站，有助于理解好HTML5标签
二、IE条件注释
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
只有IE9之前的版本可见js代码
三、可以忘却的HTMl标签和属性
（1）<font>来控制显示文本
（2）不要使用<b>和<i>
<strong>用来强调某一个词或者短语，对于较次要的文字，则可以使用<em>标签进行强调
（3）不要使用<table>标签进行布局
（4）不要使用仅能修饰内容外观的笨拙的<body>标签属性
（5）不要滥用<br>标签
注：http://validator.w3.org上，能快速确定HTML是否有效
四、doctype 文档的重要性
解释了哪些标签、属性、或值对于HTML的某一个特定类型是有效的。告诉web浏览器你正在使用哪个版本的HTML或XHTML。
第二章 创建样式和样式表
一、解读样式表
大多数情况下，选用外部样式表较好。它使得网页创建变得更加容易、更新网站也更迅速。对于接收端来说，外部样式表有助于使网页载入时速度更快。此外，web浏览器在下载外部样式表时，还会在访问者的计算机上保存这个文件，便于下一次快速访问，当访问者跳转到该网站使用同一份样式表的其他网页时，浏览器就不必下载样式表，只要将这个外部样式表从高速缓存中调用出来
注：强制从新加载ctrl+F5 解决高速缓存问题
二、几种不同类型的样式表
（1）内部样式表
<style>
h1 {
color: #ffffff;
font-family: Arial;
}
</style>
注：1、<style>标记是html的，而不是css的
2、javacript代码一般放在 样式表之后，许多js代码都依赖于css
3、HTML对于内部样式只要求有开始的<style>标签
早期版本：必须加上type= "text/css" 如<style type= "text/css"> 如果没有，可能会出错。
4、http://jigsaw.w3.org/css-validator/可以检验css代码是否有错
（2）外部样式表
1)HTML的<link>标记
HTML5: <link rel="stylesheet" href="css/style.css">
HTML4.01: <link rel="stylesheet" type="text/css" href="css/style.css">
XHTML: <link rel="stylesheet" type="text/css" href="css/style.css"/
2）css的@improt指令
<style>
@import url(css/syltes.css)
</style>
特别注意：
<style>
@import url(css/form.css)
@import url(css/syltes.css)
p { color:red; }
</style>
要把@improt写在css样式规则之前，如果现在之后，如
<style>
p { color:red; }
</style>
则浏览器会忽略@import url(css/form.css)、@import url(css/syltes.css)
总结：<link>标签更常用，有些情况下@import方法会减缓样式表的下载速度
（3）行内式（不推荐使用）
<h1 style="color: #666666"; font-size:3 em;" >
第三章 选择器：明确设置哪些样式
一、选择器类型
1、标签选择器：整体控制
h1 {
font-size: 12px;
}
2、类选择器： 精确控制
精确控制网页上的某个具体元素，而不管它有哪些标签
注意：
（1）：每个选择器名称的开头出都有一个圆点 .copyright .special
(2): 类名的命名规范
1)只允许使用字母、数字、连接符（-）和下划线（_）
2)必须始终以字母开头
3）类名称区分大小写
.SIDEBAR和.sidebar是两个不同的类
3、ID 选择器：控制特殊的网页元素
ID选择器对基于JavaScript,或者非常冗长的网页有些特殊的用途
1）命名规则，同类选择器
2）使用规则
#banner {
background: #CC0000;
}
4、派生选择器:所有出现在某个标签内部的标签都添加相同的样式
ul li a{
font-size: 14px;
}
所有出现在li内部的链接a都使用14号大小的字体
注意：同 p.intro的区别 p.intro:含有intro类的p标记
5、属性选择器
6、子选择器
(1) 尖括号>
body > h2
(2)
1）
:fist-child
例如li: fist-child 第一个子元素li
:fist-of-type
例如p:fist-of-type 所有p元素中的第一个
2)
:last-child
:last-of-type
3)
:nth-child()
:nth-of-type()
例如：
img:nth-of-type(odd) { float:left；}
img:nth-of-type(even} { float: right；}
基数的图片左浮动，偶数的图片右浮动
前后两者的区别：
如li: fist-child 第一个子元素li
li:fist-of-type
前者：父元素下第1个元素且这个元素为li ，若不是，则选择失败
后者：父元素下第一个li类型的元素
7、同胞选择器
1）相邻同胞选择器（+）
h2+p 每个<h2>下面的第一个段落
2）通用的同胞组合选择器（~）
h2~p 属于h2同胞标签（同一级）的所有<p>
8、：not()选择器 排除
否定伪类
例如
<p class="classy">
.classy { color:red; }
p:not(.classy) { color: blue; } ()里的内容表示不想选择的内容
注：:not()选择器 只是用与通用选择器、元素选择器、类选择器、ID选择器、或者伪类
9、伪类和伪元素：本身没有标签，但是仍然易于识别的网页部位
伪类:
1) 链接常用的四中伪类：
a: link 有链接属性时
a:visited 链接地址已被访问过
a:active 被用户激活
a:hover 鼠标悬停
2) 其他伪类
:focus 当获得焦点时
比如通过改变文本框的颜色，表明要输入的位置（当行文本框、密码框、或者多行的<textarea>方框）
input: focus { }
::selection 被选中的 必须要两个：
例如：
p::selection {
color: red;
}
伪元素：
:first-letter
:fist-line
:before 在指定的元素前添加内容
<p class="tip">
p.tip { content: "HOT TIP"}
:after 在指定的元素后面添加内容
二、
1、给标签组定义样式
1)构建群组选择器：创建一个用逗号分隔符的选择器列表
h1, p, .copyright, #banner {
color: #F1d33;
}
2)通用组选择器：给让网页的所有标签定义样式
* {
font-weight: bold;
}
2、给标签内的标签定义样式
1)祖先标签：当一个HTML标签涵盖另一个标签时，HTML就成了该标签的祖先
2)派生标签：处在一个标签或多个标签内部的标签就是派生标签
3）父标签：离一个标签最近的祖先
4）子标签：直接被另一个标签包围的标签就是子标签
5）同胞标签：彼此相邻，并且相连于同一个父标签的标签
标签：
原文地址：http://www.cnblogs.com/nankeyimeng/p/5023918.html
