Head First HTML與CSS
第九章 盒模型
CSS——掌控頁面的表現(xiàn)
id屬性
為元素指定id和將元素增加到一個類很相似郊艘。唯一的區(qū)別是齿穗，這個屬性名為id阵难，而不是class舅列。一個元素不能有多個id鞋喇，也不允許多個元素有相同的id声滥，即id是唯一的。
但元素id屬性的使用與class的用法仍有一定區(qū)別：
CSS中id前面應(yīng)該使用#字符而不是.字符侦香，#前也可以元素名落塑，也可以不加；
id選擇器只與頁面中的一個元素匹配罐韩；
命名規(guī)則不同憾赁，類名和id名都只能包含字母數(shù)字和_下劃線字符，但是類名要以字母開頭散吵，id名可以以字母或數(shù)字開頭龙考。
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元素即可矾睦。后面的樣式表中的樣式會覆蓋在它上面鏈接的樣式表中的同一類樣式晦款。例如：
媒體查詢
可以針對將要顯示頁面的設(shè)備類型來調(diào)整頁面的樣式。要做到這一點(diǎn)枚冗，可以利用link元素中的media屬性缓溅。例如：
<link href="lounge-mobile.css" rel="stylesheet" media="screen and (max-device-width:480px)">/*必須是有屏幕的設(shè)備而且寬度不超過480像素*/
media屬性允許我們指定應(yīng)用這個樣式表的設(shè)備類型，通過創(chuàng)建這個“媒體查詢”來指定設(shè)備類型赁温，媒體查詢要與設(shè)備匹配肛宋。
查詢中還有很多屬性可以使用州藕，例如min-device-width,max-device-width，以及顯示方向[orientation]酝陈，這個可以是橫向(landscape)也可以是縱向(portrait),此外還有很多其他的屬性』偕妫可以根據(jù)需要為HTML添加多個<link>標(biāo)記沉帮，涵蓋你要支持的所有設(shè)備。
直接在CSS中增加媒體查詢
要為CSS指定有特定屬性的設(shè)備贫堰，還有一種方法：不是在link標(biāo)記中使用媒體查詢穆壕，還可以直接寫在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規(guī)則中只包含特定于一種媒體類型的CSS規(guī)則喇勋。在CSS文件中，要把對所有媒體類型都通用的規(guī)則放在@media的下面偎行，這樣一來川背，就不會不必要地重復(fù)規(guī)則了。另外蛤袒，瀏覽器加載頁面時熄云，會通過媒體類型來確定頁面適用的規(guī)則，將不匹配的規(guī)則忽略妙真。
還有其他媒體屬性缴允，例如最大和最小寬度，最大和最小高度珍德，方向练般，顏色，寬高比等锈候。
考完了薄料。
充滿誘惑的假期到了。
愿自己不忘初心晴及，休閑不過度都办，開學(xué)后問心無愧。
加油虑稼！
