CSS(Cascading Style Sheet)層疊樣式表,它是用來美化頁面的壹種語言,之前提到的W3C規範中的“樣式”。
作用:
1、美化界面。
2、頁面布局。
基本語法:
選擇器{
樣式規則
}
樣式規則:
屬性名1:屬性值1;
屬性名2:屬性值2;
屬性名3:屬性值3;
。。。
選擇器:是用來選擇標簽的,選出來以後給標簽加樣式。
從Hello World說起,
<p style="background-color:#FFF;color:#000;font-size:30px;">Hello World!</p>
這樣寫可以實現將原本的白底黑字Hello World! 改成樣式為 黑底白字的效果。但是這樣寫有壹定的缺點:
缺點1:內容、樣式、行為三者未分離,代碼糅雜,不符合W3C規範,難以維護。
缺點2:代碼冗余,不可復用。
二、如何引入CSS?
1)行內樣式
即上述的壹般形式,由於其存在的缺點,介紹下壹種樣式。
2)內嵌樣式,給p標簽加樣式,加在head標簽中
<style type="text/css">
p{
background-color:#FFF;
color:#000;
font-size:30px;
}
</style>
當本頁面的p標簽都需要相同的樣式時,這樣寫大大降低了代碼量,並讓其他編程人員壹眼分辨出來CSS樣式。
3)鏈接樣式(鏈入式)
在head標簽中加入
<link href="../css/my.css" type="text/css" rel="stylesheet"/>
將CSS文件和html文件分開來放,這樣增加了代碼的重用性,但是每個瀏覽器都要單獨讀取css文件中的樣式,比較慢,如果追求速度,內嵌樣式會更好。
4)導入樣式
<style type="text/css">
@import url("路徑名");
</style>
四種樣式的優先級:
如果壹個頁面中四種樣式同時存在,這四種都會對標簽起作用,但是重復樣式的屬性值,只有最後壹個有效。如果內嵌樣式和導入樣式放在壹起,則內嵌樣式起作用。
如果內嵌樣式和導入樣式分成兩個style定義,則在CSS樣式中的最後壹個style起作用。
附:css中註釋的格式,沒有單行註釋,所有的註釋均是/*註釋內容*/