第十一章 div和span 高级网站构建

1、<div>用来把页面分割成逻辑部分（logical sections）或者组。在你的页面中使用<div>，但不要滥用，借助结构，把页面分成几个合理的逻辑结构，这样有助于网页结构的清晰和样式化。如果添加<div>只是想使页面中有更多的结构，那么这样做除了使页面变得复杂之外没有任何真正的好处。

2、#elixirs {

     border-width: thin;

     border-style: solid;

     border-color: #007e7e;

}添加边框

3、width属性用来定义元素的内容的宽度。

4、你不能定义整个元素的宽度，你只能定义内容区，补白、边框和边界的宽度，把这些全加起来就是整个元素的宽度。

5、padding-right:20px;

     Padding-bottom: 20px;

     Padding-left :20px;   增加补白

6、margin-left: 20px;  在左侧加了一些边界

7、text-align: center;  在块元素中用text-align来设置其中的文本对齐样式。这是居中。text-align属性会影响一个元 素中所有内联内容的对齐样式，不管text-align的名字叫什么，都会影响各种内联元素，text-align属性只能用于块元素，如果直接用于内联元素（如<img>）就没有作用了。

8、background-image:url(images/cocktail.gif);

     background-repeat: repeat-x;最后定义一个图像作为背景，把background-repeat属性设置为repeat-x，只在水平方向上重复图像。

9、选择子孙的方法：#elixirs h2 { color:black; }

10、改变标题的颜色  #elixirs h2 { color:black; }

#elixirs h3 { color:#d12c47; }

11、h1 { fat-size:200%!important; }这会忽略所有同属性的作者样式。

12、<div>元素用来把相关的元素组成逻辑部分。

13、创建逻辑部分有助于标识页面的主内容区、标题和页脚。

14、可以用<div>元素把需要相同样式的元素组成一组。

15、用嵌套的<div>元素给文件添加更深一层的结构，这样有利于结构清晰和样式设计。不过除非真正需要，否则别轻易添加结构。

16、用<div>元素把几部分内容组成一组，就可以跟其他块元素一样给它设计样式，例如，可以用border属性给一组被<div>包围着的元素添加边框。

17、width属性用来设置元素内容区的宽度。

18、一个元素的总宽度等于内容区的宽度加上所有补白、边框和边界的宽度。

19、一旦设置了一个元素的宽度，它就不再随浏览器窗口的宽度变化而伸缩了。

20、Text-align是一个用于块元素的属性，可以使块元素中的所有内联内容居中。它可以被任何嵌套的块元素继承。

21、可以用子孙选择符选择嵌套在其他元素中的元素，例如，子孙选择符 div  h2 { ……}  ，选择所有嵌套在<div>元素中的<h2>（包括孩子，孙子等）

22、可以用缩写方式定义相关的属性，例如，padding-top,padding-right,paddint-bottom,paddint-left,都是关于padding的属性，可以用一个缩写定义，padding.

23、padding,margin,border,background,font 属性都可以用缩写规则指定。

24、<span>内联元素跟<div>元素一样，它用来把相关的内联元素和文本组成一组。

25、跟<div>一样，也可以把<span>元素添加到类中（或者给<span>元素添加类中，（或者给<span>元素设置唯一的id）来给它们设计样式。

26、<a>元素是有不同状态的元素的一个例子。<a>元素主要的状态有unvisited,visited和hover。

27、可以用伪类单独地给每个状态设计样式。伪类和<a>元素一起最常用 的是：:link,用于未被访问的链接，：visited,用于已经访问的链接，:hover，用于停留状态。

28、其他元素支持：hover伪类，一些浏览器也支持：first-child,active,：focus伪类用于其他元素。

29、如果想强调某些单词，就用<em>;如果想重点强调，就用<strong>;如果只是改变某些文字的样式，就用<span>。