【阅读】《Head First HTML 与 CSS》第十章——div与span

来源：互联网发布：中控iface702软件下载编辑：程序博客网时间：2024/04/27 16:24

这一章主要讲的是：div和span的用法。这两个是构建结构的关键。还讲了一些伪类

问题引出

如果想要一个网页中的一些元素打包在一起，使之成为一个整体，以便更好的控制呢？就像这样

图中的右部分就是一个小的整体，它像一块地砖一样嵌入了这个网页中。。。如何才能达到这样的效果呢？

div

它可以让你将页面划分为逻辑区或逻辑分组，那么如何才能将一个页面的一部分划分为逻辑区呢？

找出逻辑区，这一点在网站结构草图上完成
使用<div>包围逻辑区，就是将你想要绑在一起的元素的那些代码放在<div></div>中
标出<div>，给你的新创造的div加一个id，以便更好的找到它吧

把上面几条转成图片就是这样

现在我们已经创建好了cat的div和dog的div，接下来我们就像其他使用id那样修改它的样式就好了

注意：在页面中可以使用div标签，但是不要滥用。要做到使用div能够将你的页面分解为逻辑区，从而保证结构清晰并便于指定样式，那就用吧

div的宽度

在div的CSS中写上width:200px那么这个div的宽度就是200个像素了，不会因为浏览器窗口的改变而改变，这一点是与众不同的

联想到上一章的盒结构，我们怎么确定这个元素的宽度呢？我是说width就是这个元素的宽度吗？

回答：width只是内容区的宽度，不包括内边距、边框、外边距的，所以在计算整个元素的时候要把内容区、内边框、边框宽度、外边框都加上去

不过一般如果不设置的话，那么元素的宽度就是width了

对了，你还可以通过使用百分比，如果使用百分比那就是宽度为他所在的那个元素（一般是div和body）的宽度的百分比，例如如果div中嵌套一个div，里面的div宽度是20%，外面的div宽度是200px，那么无论浏览器窗口怎么变化，里面和外面的宽度一直不变，如果里面外面的div都是百分比的，他们俩的宽度就会随着浏览器的窗口变化了。

还有就是一般不设置height的，就用默认的auto就好

如何将CSS的设定精确到div中的某一个标签呢

#(div的名字) h2 {

color:black;

}

例如#elixirs h2 {

color:black;

}

就可以精确到

在选择div中的某一个字标签的时候我遇到一个问题，书上说使用#elixirs>h2就可以指定是名叫elixirs的div中的直接子孩子h2，可我实际册的时候是在现实所有的h2都有，一会我的论坛上问问

修正行高

#elixirs{ line-height:1em;}

#elixirs{ line-height:1;}

猜猜看，这两句话有什么区别？

上一条意思是elixirs的行高的一倍大小，（elixirs的行高是通过<body>继承得到的）也就是body的行高

下一条是使用它本身字体大小的一倍，这个不和继承字体的大小有关系

CSS的快捷方式

padding-top0ox;:

padding-right:20px;

padding-bottom30px;

padding-left:10px;

可以简写成：padding:0px 20px 30px 10px;

顺序可以这样记：顺时针旋转，从12点的位置开始

span

span和div差不多，区别在于div是块元素，它会带来换行，span是内联元素，就像是<em>那样，不会带来换行，其他的用法感觉都差不多

设置<a>的各个状态的CSS

a:link{color:green;}意为未访问的链接颜色为绿色

a:visited{color:red}意为已访问的链接颜色为红色

a:hover{color:yellow;}意为当鼠标移动到这个链接上的时候，颜色变为蓝色

a:focus{color:orange;}意为使用Tab键将这个链接选为焦点的时候这个链接变为橘色（你用一下Tab键在网页上选到这个链接就知道是什么意思了）

a:active{color:black;}意为当鼠标点击中这个链接的时候，链接文字变成黑色（这个用color可能不是很明显，你可以试试bgcolor）

伪类

像上一小节的:link、:visit就是一个伪类，你在HTML页面中找不到的，怎么说，有点像是JSP中的request那样吧

CSS层叠样式表中的“层叠”

我们已经使用过在同一个页面中使用多个CSS了，如果这些CSS中有重复或是矛盾的地方，浏览器该听谁的呢

确定使用那一个CSS的步骤

收集所有的样式表
找到所有匹配的声明
对所有比配的声明进行排序（有一个排序小方法一会就告诉你）
现在按特定性对所有声明排序
最后，对于冲突的规则，按照它们在各自的样式表中出现的顺序进行排序

排序小方法

BULLET POINTS

<div>元素用于将相关的元素归结在一起，放在逻辑区中。
创建逻辑区有助于标识主内容以及页面的页眉和页脚
可以使用<div>元素将需要共同样式的元素归为一组
使用嵌套<div>元素为文件增加更多结构，这有利于保证结构清晰或者方便增加更多样式。不过除非确实需要，否则不要过多地增加结构。
一旦用<div>元素将内容区归组在一起，类似于其他块元素，可以对这些<div>增加样式。例如，对于其他包含在<div>中的一组元素，可以使用嵌入这些元素的<div>的边框属性，对这组元素增加一个边框
width属性设置的是元素内容区的宽度
一个元素的总宽度是内容区的宽度加上搜增加的内边距、边框宽度、外边距的宽度
一旦设置一个元素的宽度，它就不会延伸来占满整个浏览器窗口的宽度
text-align是块元素的一个属性，用来将这个块元素中的所有内容对齐，可以居中、左对齐、右对齐。这个属性由所有嵌套块元素继承
可以使用子孙选择器在选择嵌套在其他元素中的元素，例如：div h2 {....}会选择嵌套在div中所有h2标签
可以对相干属性使用快捷方式
内边距、外边距、边框、背景和字体属性都可以用快捷方式指定
<span>内联元素与<div>元素相似，它用于将相关的的内联元素和文本归组在一起
类似于<div>，可以将<span>元素增加到类（或者id），对它增加样式
有些元素有不同的状态，<a>元素就是这样一个例子。<a>元素的主要状态包括未访问、已访问和悬停等
可以用伪类单独的为各个状态指定样式。伪类最常用于<a>元素，:link对应未访问的链接，:visited对应已访问的链接，:hover对应悬停状态
伪类还可以使用其他元素，而不仅限于<a>
另外一些伪类包括:hover/:active/:focus/:first-child;和last-child伪类等。

0 0