div和span

**将一个页面划分为逻辑区**

<div></div>

*在页面中要使用<div>，但不能滥用 要为<div>增加id 例如：

增加边框

#elixirs{
border-width:thin;
border-style:solid;
border-color:#007e7e;
}

处理elixirs的宽度：width属性允许你指定元素内容区的宽度，设置宽度有多种不同方法：
1、直接用像素
2、如果使用百分数，那么宽度会计算为元素所在容器宽度的一个百分比（容器可以是、

等）
如果没有设置一个元素的宽度，则默认是auto，auto允许内容填满可用的所有空间

设置内边距

padding-right:20px;
padding-left:20px;
padding-bottom:20px;

设置外边距

margin-left:20px;

文本居中
text-align属性会对块元素中的所有内联内容对齐。text-align只能在块元素上设置，如果直接在内联元素上使用则不起作用。

text-align:center;

添加背景图片

background-image:url(images/cock.gif);
background-repeat:repeat-x;

选择子孙的方法

div h2{
color:black;
}

#elixirs h2{
color:black;
}
#elixirs>h2{
color:black;
}

---

学习快捷方式

padding：0px 20px 30px 20px;(上右下左)
margin：0px 20px 30px 20px;(上右下左)
padding：20px 30px;(上和下 左和右)

border:thin solid #007e7e;(可以采用喜欢的任何顺序)
background:white url(images/lala.gif) repeat-x;(可以采用喜欢的任何顺序)

font:font-style font-variant font-weight font-size/line-height font-family
font-size前面的属性是可选的，可以指定这些属性的任意组合，不过他们必须出现在font-size的前面。
font:small/1.6em Verdana,Helvetica,Arial,sans-serif;

建立内联内容的逻辑分组

<ul>
<li><span class=”cd”>The first song</span></li>
<li><span class=”cd”>The second song</span></li>
<li><span class=”cd”>The third song</span></li>
</ul>

在css中

.cd{
font-style:italic;
}

内联元素上的外边距和内边距与块元素稍有不同，如果一个内联元素四周都增加了外边距，只能看到左边和右边会增加空间

伪类
<a>元素和他的多重人格，根据元素的状态指定样式

a:link{
color:green;
}
a:visited{
color:red;
}
a:hover{
color:yellow;
}

另外还有focus和active.浏览器将焦点放在你的连接上时就是focus状态。有些浏览器允许用户点击tab键访问页面上的所有链接，浏览器访问到某个链接时浏览器就拥有焦点。用户第一次单击一个链接时，就处于active状态。

a:focus{
  color: #f37e16;
}
a:active{
  color: #f5f21f;
}

层叠

1、收集所有样式表
2、找到所有匹配的申明
3、对所有匹配的规则排序（按照作者、读者、浏览器的顺序）
4、现在按特定性对所有声明排序
5、最后对于冲突的规则，按照他们在各自样式表中出现的顺序进行排序。

计算特定值
000
第一个0：选择器每包含一个id加一分
第二个0：每个伪类或者类加一分
第三个0：一个元素名加一分
然后比较大小