HTML&CSS基础篇之十三：div&span

代码

body {
/*
font-size:           small;
font-family:         Verdana, Helvetica, Arial, sans-serif;
line-height:         1.6em;
*/
font: small/1.6em Verdana, Helvetica, Arial, sans-serif;
}

h1, h2 {
color:               #007e7e;
}

h1 {
font-size:           150%;
}

h2 {
font-size:           130%;
}

#guarantee {
color:               #444444;
/*
line-height:         1.9em;
font-style:          italic;
font-family:         Georgia, "Times New Roman", Times, serif;
*/

font:italic small/1.9em Georgia, "Times New Roman", Times, serif;

/*
border-color:        white;
border-width:        1px;
border-style:        dashed;
*/
border: dashed 1px white;

/*
padding:             25px;
padding-left:        80px;
*/
padding: 25px 25px 25px 80px;

/*
margin:              30px;
margin-right:        250px;
*/
margin: 30px 250px 30px 30px;

/*
background-color:    #a7cece;
background-image:    url(images/background.gif);
background-repeat:   no-repeat;
background-position: top left;
*/
background: #a7cece url(images/background.gif) no-repeat top left;
}

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

width: 200px;

/*
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
*/
padding: 0px 20px 20px 20px;

/*
margin-left: 20px;
*/
margin: 0px 0px 0px 20px;

text-align: center;

/*
background-image: url(images/cocktail.gif);
background-repeat: repeat-x;
*/
background: url(images/cocktail.gif) repeat-x;
}

#elixirs h2 {
color: black;
}

#elixirs h3 {
color: #d12c47;
}

#elixirs {
line-height: 1;
float: right;
}

#footer {
font: 50%/normal;
text-align: center;
margin: 30px 0px 0px 0px;
}

.cd {
font-style: italic;
}

.artist {
font-weight: bold;
}

#elixirs a:link {
color: #007e7e;
}

#elixirs a:visited {
color: #333333;
}

#elixirs a:hover {
background: #f88396;
color: #0d5353;
}

p a:link {
color: #007e7e;
}

p  a:visited {
color: #333333;
}

DIV元素

Div用来把页面分割成逻辑部分(logical sections)或者组

如何把一个页面分割成几个逻辑部分

介绍如何通过确定一些逻辑部分，然后把它们封装进一个div元素来添加另外一些结构。

确定逻辑部分

什么是逻辑部分？它只不过是页面上相互关联的一组元素。

用div 标记各部分

一般的做法是用div开始和结束标记把属于一个逻辑部分的元素包围起来。

标记div

把一些元素放进div里，就表明了它们都属于同一组。

用id属性为div提供一个唯一的标签。

标记div增加了页面代码的可读性。

添加一些样式

#cats {
background-image:url(leopard.jpg);
}

#dogs {
background-image:url(mutt.jpg);
}

设置div的背景，使包含在div中的元素也显示背景。

跟其他任何子元素一样，div中的元素也能从div继承一些属性。

DIV添加准则

用div给页面添加更多结构的原因有很多。

首先，可能想更深一步地展示一下你页面的基本逻辑结构，这样有助于别人理解网页，也有助于维护网页；

第二，可能经常需要用结构把样式应用到某一部分。

用div添加这个结构有助于思考页面设计。

在结构上添加结构

嵌套结构

比如 有一个猫部分和一个狗部分，两个部分一起就是页面中逻辑上的”pets”部分。可以把“cats”和“dogs”div都放进到”pets”div中。

div就像一个容器，可以把元素一起放进去。

通常把div描述为”containers”(容器）。

它们不仅可以作为包换一系列相关元素的逻辑容器，而且当我们开始样式化div，并用它们做排版时，发现它们还可以作为图形容器。

可以在真正需要的时候添加结构，而不是为了结构而添加结构。

DIV样式定义

可以把div放在一个类里。

在页面中使用div，但不要滥用。

借助结构，把页面分成几个合理的逻辑结构，这样有助与网页结构的清晰和样式化。

如果添加div只是想使页面中有更多的结构，那么这样做除了使页面变得复杂之外没有任何真正的好处。

添加边框

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

设置div宽度

width:200px;

width 属性用来定义元素的内容区和宽度。

浏览器布局规则会把嵌套在div中的所有元素调整成这个宽度。



width属性只用来定义内容区的宽度。

要指明整个盒子的宽度，需要添加内容区的宽度，左右边界宽度，左右侧补白以及边框的宽度。必须包括两次边框宽度。

整个宽度= width + 左右补白+ 左右边框+ 左右边界

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

块元素的默认宽度（width）是auto，就是说会延伸到所有的空间。

auto使内容充满所有的空间（除了补白、边框和边界）

如果没有边界、补白或边框，那么内容就会占满整个盒子。整个盒子宽度也就是300像素

定义宽度的方法

可以定义实际大小通常用像素。

可以第一百分数，如果用百分数，宽度就是相对于元素所在的容器（可以是body，div等）的宽度百分比。

如何定义高度

一般元素的高度用默认值就是auto，浏览器垂直扩展内容区，以使所有的内容都能看到，我们把宽度设置为200像素后，会发现div变得高多了。

可以明确地设置高度，但是如果设置的高度太小，内容尾部有可能丢失。因此一般不定义元素高度，而默认为auto。

补白，边框，边界，背景图像，文本位置设置

padding-right: 20px; 右补白

padding-bottom: 20px; 下补白

padding-left: 20px; 左补白

margin-left:20px; 左边界

text-align:center; 文本居中

background-image: url(images/cocktail.gif); 设置背景图像

background-repeat: repeat-x; 只在水平方向上重复图像

默认div的补白是0像素，要添加一些补白以增加内容的空间，注意上面没有添加补白，这多亏h2标题默认的边界已经有足够的空间。但左侧，右测和下面需要有补白。

在左侧加入一些边界，使这块部分比页面其他部分稍微有些缩进。

在块元素中用text-align来设置其中的文本对齐样式，设置为居中。

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

text-align 属性的疑问

图片居然也居中了

其实text-align属性会影响一个元素中所有内联内容的对齐样式。

text-align属性只能用于块元素，如果直接用于内联元素(如

<img>

)就没有作用了。

为什么text-align会影响到div元素中所有文本（文本都嵌套在块元素中。因为这些块元素继承了div的text-align属性。

不是div直接影响标题和段落，而是标题和段落继承了text-align属性。

谨记并非所有的属性都是可以默认继承的。

子选择器

需要一种告诉CSS我们只想选择特定元素的子孙元素的方法，有点像指定你的遗产只能由某个女儿或儿子继承。

div h2 {
color:black;
}

这条规则表明选择div的子孙h2

div 是父元素

h2 是它的子孙

父名与子孙名之间有空格

唯一的问题是若有人在文件中创建了另外一个div，它们的h2文本也会是黑色的。那就需要给div添加一个id，可以用它来更具体地指出我们想选择哪个子孙。

#elixirs h2 {
color: black;
}

这条规则表明选id为”elixirs”的元素的子孙h2

相比上一条规则，这条规则更具体一些，我们给页面添加另外一个有h2的div也不会再出问题。因为这条规则只选择对应id为”elixirs”的div中的h2。

子孙通常是指孩子，孙子，曾孙，这里我们只选择孩子？

比如

#elixirs h2 {
color: black;
}

上面规则是选择id为”elixirs”的div中所有elixirs的子孙

所有h2可以是div的直接孩子，也可以是嵌套在一个blockquote中或另一个嵌套在div中的孩子（孙子）等

子孙选择器选择任何嵌套在一个元素中的h2,无论它嵌套得有多深。

#elixirs>h2 {
color: black;
}

选择的h2是id为”elixirs”的元素的直接孩子。

#elixirs blockquote h2 {
color: black;
}

选择一个id为”elixirs”的元素的子孙

<blockquote>

的子孙

<h2>

元素。

#elixirs h2 {
color: black;
}

#elixirs h3 {
color: #d12c47;
}

行间距

line-height有些特殊，可以只用一个数字代替相对值（比如em或%）来设置line-height的值。

如果只用一个数字1，就是指每个div中的元素的行间距为它们自己的font-size的1倍，而不是div的font-size的1倍。

走点捷径

补白&边界

补白缩写

padding-top:0px;
padding-right:20px;
padding-bottom:30px;
padding-left: 10px;

padding: 0px 20px 30px 10px;

顺时针 上右下左

边界缩写

margin-top: 0px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 10px;

margin: 0px 20px 30px 10px;

顺时针 上右下左

如果各侧面的补白和边界值都相等

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

padding: 20px;

margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;

margin: 20px;

如果上下补白相同，左右补白相同

如果上下边界相同，左右边界相同

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

padding: 0px 20px;

margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 20px;

margin: 0 20px;

上和下 右和左

边框缩写

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

border: thin solid #007e7e;

边框的缩写比边界和补白更加灵活，因为顺序随你选择。

背景的缩写

background-color: white;
background-image: url(images/cocktail.gif);
background-repeat: repeat-x;

background: white url(images/cocktail.gif) repeat-x;

跟边框一样，背景属性值的缩写顺序不限。还有另外一些值也可以在缩写形式中指定，比如background-position

字体缩写

font:

font-style

font-variant

font-weight

fontsize/line-height

font-family

这是组成字体缩写的几个属性， 要注意出现的顺序。

font-style、font-variant、font-weight

这些值都是可选的。可以把它们任意组合。但要在font-size之前。

font-size/line-height

必须定义字体大小

line-height是可选的，定义行间距的方法是，在font-size右边加一个/在加属性值

font-family

最后需要添加字体系列，字体系列名之间加逗号

font-size:small;
font-family: Verdana,Helvetica,Arial, sans-serif;
line-height: 1.6em;

font: small/1.6em Verdana,Helvetica,Arial, sans-serif;

SPAN 元素

Span用简单的三步添加

span元素跟div工作方式一样，用来把内联内容分成不同的逻辑部分，而div则是把块级的内容分成不同的逻辑部分。

第一步和第二步:添加Span

<ul>
<li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
<li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li>
<li><span class="cd">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li>
<li><span class="cd">Le Roi Est Mort</span>, <span class="artist">Vive Le Roi!, Enigma</span></li>
<li><span class="cd">Music for Airports</span>, <span class="artist">Brian Eno</span></li>
</ul>

第三步 给Span 设计样式

.cd {
font-style: italic;
}

.artist {
font-weight: bold;
}

为什么用span而不用别的内联元素（em、strong）

一句话要用跟内容的意思最匹配的元素来标记内容，而不是因为样式而用某个标记。

可以是设置span、em、strong 这些内联元素的宽度，但是只有排版时才能看到效果，也可以给这些元素添加边界和补白，还有边框。

内联元素的边界和补白跟块元素的稍有不同

如果在内联元素的四周都添加了边界，只能看到左边和右边的空间，可以在内联元素的上侧和下侧添加补白，不过这些补白不影响周围的其他内联元素的空间，所有补白会跟其他内联元素重叠。

图像跟其他的内联元素稍有不同。

width，padding和margin属性更接近于块元素。

a元素

链接是元素世界上的变色龙，因为它们会随着情况的不同很快地改变自己的样式。

没有点击过的链接叫做“未被访问过的链接”

或者简单点叫做链接

默认值是蓝色的。

点击过的链接叫做“已访问的链接“

已访问的链接和未被访问的链接用不同的颜色显示，便于你区分。在大多数浏览器中，已访问的链接默认是紫色。

鼠标停在链接上而不点击叫做”鼠标停留在链接上“

在一些浏览器中会看到一个显示title属性文本的工具条。

会发现在一些网页中，鼠标听力的时候会看到不同的样式。

a元素跟别的元素不一样，它的样式随它的状态而改变。

如果一个链接没有被点击过，它有一种样式。

如果被点击了，就有另外一种样式。

如果把鼠标停留在链接上，还会有另一种不同的样式。

或许a元素还有更多眼睛看不到的样式？

如何根据状态样式化元素

一个链接可以处于好几种不同的状态：未被访问的，已访问的，鼠标停留的（还有许多别的状态）状态。

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

link 未被访问的链接。

visited 已被访问的链接。

hover 鼠标停留在上面的链接。

a {
color:red;
}

链接再各种状态下看起来都是一样的

另外两个链接状态

focus 聚焦 和 active 激活

focus状态是指浏览器聚焦于链接上的状态（通过tab选中）

active状态发生在当用户第一次点击一个链接时。

警告：有些浏览器不能很好的支持上述两个状态。

链接能同属处于几种状态

比如链接可以是已访问（visited),鼠标停留(hover)在上面，并且用户可以马上点击激活（active）它。

同时处于多个状态时，应用哪个样式取决于规则的顺序。

一般认为合理的顺序是：

link,visited, focus, hover,active

伪类 （pseudo-class)

CSS类是一个放元素的组，你可以用它来一起样式话类里的元素。

伪类作用和类一样，但不是真的类

在XHTML中找不要伪类的定义

由浏览器从后台添加元素到正确的伪类，也会从对应的伪类中移除。

伪类也用于别的元素，有些浏览器也支持像激活和停留在其他种类的元素的伪类，还有诸如first-child是赋值于元素的第一个孩子，像一个

<blockquote>

中的第一段。

不过除了:link,:visited,:hover外，浏览器不一定支持其他伪类。

#elixirs a:link {
color: #007e7e;
}

#elixirs a:visited {
color: #333333;
}

#elixirs a:hover {
background: #f88396;
color: #0d5353;
}

层叠（cascade）

CSS Cascading Styling Sheet 层叠式样式表

其实当用户访问你的页面时，附近还有另外一些样式表

1. 网页作者为网页写的所有样式表

2.网页阅读者 。他们在属性声明后加上!important，就能覆盖你的样式。有些浏览器也允许用户给XHTML元素创建他们自己的样式。如果你的样式表没有定义这些样式，就由阅读者的样式表来代替。

3.如果没有给一个元素定义样式，浏览器自己有一系列默认样式可以用。如果没有网页作者或阅读者提供的样式表，就用这些样式。

当浏览器需要决定给一个元素应用哪种样式时，它就采用这样的样式表。优先权最高的是作者的样式，然后是读者的样式，最后是浏览器的默认样式。

层叠就是浏览器决定采用哪种样式的方法。

层叠步骤

第一步：把所有的样式表集中起来

将网页作者的样式表，读者添加进去的样式表，浏览器默认的样式汇合集中。

第二步：找到所有匹配的声明

找到所有的有选择对应元素的选择符的对应属性的声明。检查所有的样式表，找到所有匹配元素并且有对应属性的规则。

第三步：将所有匹配结果分类

所有匹配的规则都找出来后，把它们以作者，读者，浏览器的顺序排序。

读者可以在CSS属性中加”!important”，如果有这样的属性，排序的时候要把它们放在最前面。

第四步：根据声明的具体程度排序。

凭直觉，一条规则越能准确地选择一个员，就知道它越具体。

可通过秘诀，可以精确计算一个选择符的具体度。

第五步：最后将所有冲突的规则按照它们在各自样式表中出现的顺序排序。

列表中冲突规则排序的依据是，在它们各自样式表中后出现（更接近末尾）规则更重要一些，也就是说，如果在样式表中添加一条有关某元素的新规则，它会覆盖前面所有的同属性规则。

具体度

000一组三个数字

0 这个选择符有id吗？每个加1分

0 这个选择符有类或者伪类吗？每个加1分

0 这个选择符有元素名称吗？每个加1分

如何判断一个具体度比另一个大

把它们当做真正的数字来读就可

100（一百）比010（十）大，

010（十）比001（一）大

依次类推

h1,h2 这里规则就认为是两条独立的规则。

!important

读者可以在属性声明末尾加!important忽略一种样式

h1 {
font-size:200%!important;
}

这就会忽略所有同属性的作者样式。

一条规则在CSS文件中越靠后，优先权就越高

XHTML中的多个样式表连接的优先权问题：不管在不在同一个CSS文件中，顺序总是从头到尾，就当是把CSS以被链接的顺序都一起插入到文本中。

当按具体度排序时，不用重排所有的规则

每次排序，都是以之前的顺序为基础。首先，以作者、读者、浏览器的顺序排序，接着，在这些分类中按具体度排序，最后，将具体度相同的所有元素，根据在样式表中出现的顺序重新排序。

如果经过这么多步骤后还是没有找到包含指定属性值的属性声明规则又该怎么办：就要用继承。但不是所有的属性都能通过继承得到，比如边框属性就不能。对于能继承的属性（比如：color，font-family，line-height等），浏览器从父亲开始检查元素的祖先，给属性找一个值。

最后通过继承也没有找到，那唯一的办法就是求助于浏览器样式表中的默认值，所有的浏览器对每个元素都有默认样式。

要点

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

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

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

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

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

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

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

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

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

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

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

padding，margin， border，background 和font 属性都可以用缩写规则指定。

span内联元素跟div元素一样：它用来把相关的内联元素和文本组成一组。

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

a元素是有不同状态的元素的一个例子。

a元素主要的状态有unvisited, visited, hover。

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

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

基于Head First HTML 整理