第十章 div与span
div介绍
div是用于给页面划分逻辑的元素,比如一个介绍宠物的页面,就可以把页面分为猫区和狗区,通过div元素的分区也可以为猫区和狗区添加不同的css样式。
<div id="cats">
<p>猫区<p>
</div>
<div id="dogs">
<p>狗区</p>
</div>
在页面中要使用<div>,但不要滥用。如果这样做有助于你将页面分解为逻辑区,从而保证结构清晰并便于指定样式,那么可以增加更多的结构。如果只是为了在页面中创建大量结构而增加<div>,就只会让页面复杂,而没有任何实际好处。
子孙选择器
如果我们想告诉css,我们只想选择某些元素的子孙元素,这有点像指定你的遗产只能由你的一个女儿或儿子的孩子们继承。子孙选择器的写法如下所示:
div h2{ //div是父元素,h2是子元素,父元素和子元素之间有一个空格
color: black;
}//这个规则指出要选择作为一个<div>子孙的所有<h2>
现在这个规则还有一个问题,如果有人在该css文件中创建了另一个<div>,那另一个<div>元素的中的<h2>元素也会得到黑色的<h2>文本,尽管他可能并不想这样。不过,我们可以为div元素指定一个id,使用id更特定的指定我们想要的子孙元素:
#elixirs h2{ //现在父元素是id为elixirs的元素
color: black;
}//这个规则指出要选择id为elixirs的<div>的所有子孙<h2>元素。
选择器#elixirs h2表示选择的<h2>元素可以是elixirs的所有子孙,所以这个<h2>可以是<div>的直接孩子,也可以是嵌套在一个<blockquote>或另一个嵌套的<div>元素中(这就成为一个孙子),以此类推。所以子孙选择器会选择一个元素中嵌套的所有<h2>,而不论它嵌套的有多深。
想要选择直接的孩子要怎么办? 可以使用
#elixirs>h2,这样一来,只有当<h2>是一个id为“elixirs”的元素的直接孩子时,才会选择这个<h2>。
如果需要更复杂的选择呢?比如要选择一个<h2>,要求它是一个<blockquote>的孩子,而且<blockquote>必须在elixirs中,可以做到吗? 方法还是一样的,只需要使用更多的子孙选择器,如下所示:
#elixirs blockquote h2{
color:blue;
}
这会选择<blockquote>下一级的<h2>元素,而且这个<blockquote>是一个id为"elixirs"的元素的子元素。
span介绍
<div>允许你为块级内容创建逻辑划分,<span>元素则采用类似的方式建立内联元素的逻辑分组。
<span class:dogs>狗</span>:<span class:name>大黄</span>
<span class:cats>猫</span>:<span class:name>阿喵</span>
a元素和它的多重人格
在样式方面,链接的表现稍有些不同。链接是元素世界里面的变色龙,取决于具体环境,它们会瞬间改变样式。比如在还未点击的时候是一个颜色,点击之后是另外一个颜色,有些时候将鼠标悬停在链接上就又是一个颜色。
那么该如何根据元素的状态指定样式?一个链接可以有多种状态:可能未访问,已访问或者处于悬停状态(还有另外的几种状态)。那么,如何利用所有的状态呢?这里就要用到伪类这个概念:
a:link{ //这里有一个元素a,后面是一个冒号,然后是我们想选择的状态。要确保这些选择器中没有空格
color: green;
} //这个选择器应用于处于未访问状态的链接
a:visited{
color: red;
} //这个选择器应用于已访问的链接
a:hover{
color: yellow;
} //悬停在一个链接上时会应用这个选择器
还有另外的两种状态:focus和active,浏览器将焦点放在你的链接上时就是焦点(focus)状态。这是什么意思?有些浏览器允许按下Tab键来轮流访问页面上的所有链接,浏览器访问到某个链接时,这个链接就拥有“焦点”。设置一个焦点伪类值对于提高可访问性很有帮助,因为需要使用键盘(而不是鼠标)来访问链接的人会知道他们合适选择到正确的链接。用户第一次见单击一个链接时,就处于活动(active)状态。
链接处于多种状态时呢?例如,我的链接可能已经访问过,而且鼠标悬停在它上面,另外用户可能正在单击它,这些情况可能同时发生。当然可以。你要按规则的顺序来确定应用哪个样式。
所以一般认为适当的顺序是:link,visited,hover,focus,最后是active。如果使用这个顺序,就能得到你期望的结果。
了解层叠
通过层叠,我们将了解浏览器是如何选择规则的:
1.
收集所有的样式表。第一步,需要所有的样式表,包括:Web页面作者写的样式表,读者增加的样式表(有些读者会自己增加),还有浏览器默认的样式。
2.
找到所有匹配的声明。比如指定的是<h2>元素,那么浏览器就会检查所有样式表,将所有样式表中的<h2>元素找出来。
3.
现在对所有匹配的规则排序。 既然得到了所有匹配的规则,现在按作者、读者和浏览器对这些规则排序,换句话说,如果是页面的作者写的规则,它们就比读者写的规则更重要。相应的,读者的样式则比浏览器的默认样式更重要。
4.
现在按特定性对所有声明排序。 凭直觉你可能认为,如果一个规则能更准确的选择一个元素,那么这个规则就更加特定,例如,子孙选择器“blockquote h1“就比”h1“选择器更特定。
5.
最后,对于冲突的规则,按照它们在各自样式表中出现的顺序进行排序。 现在只需要对冲突的规则排序,各个样式表中后出现的规则(更考辛最下面)更重要。所以,如果在样式表中增加一个新规则,它会覆盖在它之前的所有规则。
一些属性的简写形式
你可能已经注意到,css属性太多了,例如设置内外边距的时候要同时设置四个方向的边距。我们可以使用一些简写形式:
padding: 0px 20px 30px 10px;
//顺序为上右下左,也就是顺时针方向设置内边距
margin: 0px 20px 30px 10px;
//顺序同样为上右下左,顺时针
padding: 20px;
//同时设置四个方向的内边距
margin: 0px 20px;
//如果上下边距是一样的,左右边距也是一样的,可以这样设置,0px 为设置上下边距,20px为设置左右边距
border: solid thin #007e7e;
border: #007e7e solid thin;
border: solid thin;
border: #007e7e solid;
border: solid;
//这些都是合法的设置边框的语句,可以同时设置边框的颜色、样式和粗细
background: white url(images/cocktail.gif) repeat-x;
//类似边框,可以同时设置背景的颜色,背景图片和背景图片样式等
字体的简写:
font: font-style font-variant font-weight font-size/line-heigh font-family
//前三项为可选的,但是一定要指定字体的大小ling-height属性是可选的。如果你想指定一个行高,
只需要在font-size属性后面加一个"/",然后指定你想要的行高。最后,需要增加字体系列。
只需要指定一个字体(必要),不过强烈建议你指定一些候选字体,并且font-family名之间要使用逗号分隔
本章出现的一些元素和属性
width: 200px; //width属性允许你指定元素内容区的宽度。在这里,我们将内容宽度指定为200像素
text-align: center; //使用块元素的text-align来对齐其中包含的文本。在这里我们打算让文本居中
line-hight: 1; //可以对line-height属性直接使用一个数,而不是相对的度量(比如en或%),如果使用
数字1,就表示元素中每一个元素的行高是自己字体大小的1倍,而不是从父类继承下来的字体大小的一倍