Head First HTML与CSS

第九章 盒模型

CSS——掌控页面的表现

id属性

为元素指定id和将元素增加到一个类很相似。唯一的区别是，这个属性名为id，而不是class。一个元素不能有多个id，也不允许多个元素有相同的id，即id是唯一的。

但元素id属性的使用与class的用法仍有一定区别：

CSS中id前面应该使用#字符而不是.字符，#前也可以元素名，也可以不加；

id选择器只与页面中的一个元素匹配；

命名规则不同，类名和id名都只能包含字母数字和_下划线字符，但是类名要以字母开头，id名可以以字母或数字开头。

id的使用如下：

<p id="guarantee">

#guarantee{

line-height:1.9em;

font-style:italic;

color:#444444;

font-family:Georgia,"Times New Roman",Times,serif;

border-color:white;

border-width:1px;

border-style:dashed;

background-color:#a7cece;

padding:25px;

padding-left:80px;

margin:30px;

margin-right:250px;

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

background-repeat:no-repeat;

background-position:top left;

}

混合样式表

可以在一个html中使用多个样式表，只需要多加入几个link元素即可。后面的样式表中的样式会覆盖在它上面链接的样式表中的同一类样式。例如：

媒体查询

可以针对将要显示页面的设备类型来调整页面的样式。要做到这一点，可以利用link元素中的media属性。例如：

<link href="lounge-mobile.css" rel="stylesheet" media="screen and (max-device-width:480px)">/*必须是有屏幕的设备而且宽度不超过480像素*/

media属性允许我们指定应用这个样式表的设备类型，通过创建这个“媒体查询”来指定设备类型，媒体查询要与设备匹配。

查询中还有很多属性可以使用，例如min-device-width,max-device-width，以及显示方向[orientation]，这个可以是横向(landscape)也可以是纵向(portrait),此外还有很多其他的属性。可以根据需要为HTML添加多个<link>标记，涵盖你要支持的所有设备。

直接在CSS中增加媒体查询

要为CSS指定有特定属性的设备，还有一种方法：不是在link标记中使用媒体查询，还可以直接写在CSS中。例如：

@media screen and (min-device-width:481px){

#guarantee{

margin-right:250px;

}

}

@media screen and (max-device-width:480px){

#guarantee{

margin-right:30px;

}

}

@media print{

body{

font-family:Times,"Times New Roman",serif;

}

}

p.specials{

color:red;

}

采用这种方式，@media规则中只包含特定于一种媒体类型的CSS规则。在CSS文件中，要把对所有媒体类型都通用的规则放在@media的下面，这样一来，就不会不必要地重复规则了。另外，浏览器加载页面时，会通过媒体类型来确定页面适用的规则，将不匹配的规则忽略。

还有其他媒体属性，例如最大和最小宽度，最大和最小高度，方向，颜色，宽高比等。

---

考完了。

充满诱惑的假期到了。

愿自己不忘初心，休闲不过度，开学后问心无愧。

加油！