CSS和html设计模式 2

1.使用层叠排序

一个通用的原则，普通的样式会设置文档的总体样式。更具体的选择符号会覆盖普通的选择符。
下面是6组从高到低的顺序：
（1）使用!important规则拥有最高的优先级。他会覆盖所有的非!iportant指定的规则
#Name{border:1px solid #eee!important}具有最高的优先级别。
e
（2）第二高的是嵌入在html中的style中的属性指定的css规则，这个不建议使用。
（3）第三高的是id选择符号
（4）类选择符号，伪类选择符号。
（5）元素选择符号
（6）通配符号*{……………………..}

如果2组规则都在同一个优先级，那么会优先选择更具体的样式。

一种简化层叠样式的方式是按照下面的规则来做：
1.通配选择符号
2.元素选择符号
3.类选择符号
4.id选择符号
5.通配选择符号
!important
6.元素选择符号
!important
7.类选择符号
!important
8.id选择符号
!important

2.关于html中的头部元素：
绑定css的语法：
<link rel="stylesheet" type="text/css"  href="url" media="print"/>,media 用来表示指定的媒体，href用来指定css连接

3.关于条件样式表：(只有在ie下这个条件语句才能成功)
<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6.css" media="all" type="text/css" />
<![endid]-->
<!--[if  IE 7]>
<link rel="stylesheet" href="ie7.css" media="all" type="text/css" />
<![endid]-->
还有其他的比较符号
lte：不大于
lt：小于
gt：大于
gte：不小于
注意，想表示等于的情况，可以省略掉等于符号：
<!--[if  IE 7]>

4.结构化的块状元素：
将文档结构化：
4种主要的块状结构化元素：
Ol：有序列表
Ul：无序列表
Dl：定义列表
Table：表格
其他9个支持块状结构化的元素：
Li
Dt
Dd
Caption
Thead
Tfoot
Tbody
Colgroup
Col

5.终端块状元素：
将文档结构转移到内容：用来终结文档的结构，（终节点），不能再包含块状元素只能包含文本和内联元素
<h1>：标题
<p>：段落
<blockquote>：块状引用
<dt>：定义
<address>：地址
<caption>：表格标题
这些元素都是内容的主要容器。

6.多目标块状元素：
在结构中嵌套结构用来扩展文档结构的

<div>
<li>
<dd>
<td>
<th>
<form>
<noscript>
这些元素如果以结构化的方式使用，就拥有结构化的语意，如果以终端的方式使用，就拥有语意的内涵。他既可以包含其他块状元素，也可以包含内容，但不能同时包含2种。文本和内联元素组合才能构成内容，块状元素不应该作为内联元素的兄弟元素，

7.内联元素：
为文本赋予明确的含义，还想为文本添加样式，以反应内部的含义
注意：最好是永远都把内联元素放在块装元素之中，而不是之间。
<span>
<em>
<strong>
注意收索引擎根据em和strong来对内容进行排
短语内联元素：<a><cite><code><kbd><samp><var>
单词内联元素：<acronym><abbr><dfn>
字符内联元素：<sub><sup>
排列控制：<br />
控制元素：<input> <textarea><select><button>
可替换元素：<img>可以用<object>替换<object>可以用视频声音文件来替换。