從分類到結構之CSS選擇器

餘二五發表於2017-11-15
CSS
CSS在類別上分為三種：
                                        a  外部樣式：
                                         （獨立存在的字尾為.css的檔案。需要在頁面內用連結或者匯入的方式引入，才能對該頁面生效；可作用的範圍甚大，甚至另外一臺伺服器上的CSS檔案都可以被當前頁連線呼叫；實現了頁面內容和樣式在檔案上的分離。）
                                        b 內嵌樣式
                                          （寫在當前頁面內的<head></head>標記中的<style></style>標記中，作用的範圍只是當前頁面。實現了頁面內容和樣式在標記結構上的分離【樣式在head 部分內容在body部分】）
                                        c 行內樣式
                                            （寫在標記內，用style屬性引出，作用範圍只針對該標記內容生效。）
 
以上三種CSS樣式寫的位置不同，作用範圍也不同。而其中外部樣式和內嵌樣式都很好的體現了樣式表的作用 ：內容和樣式的分離。
 
明白了樣式表的分類，以及不同型別的作用。
現在我們來看看具體樣式表的寫法—–
———選擇器：
 
a 標記選擇器(針對某一個標記生效，如例子中針對當前頁面內的所有h1標記生效)：
h1{
color:blue;
font:size:25px;
}
 
b  類別選擇器（在內容標記中用class屬性引出，並對該標記的內容生效）
.class{
color:red;
font-size:25px;
}
 
c  id選擇器（在某個標記的屬性中，用id 屬性引出，並針對該標記的內容生效）
#style{
color:red;
font-size:25px;
}
 
 
以上是三種選擇器的寫法，及其引用方法。影響的範圍也不同。
 
關於後面的宣告，時間關係，請聽下回分解。。。。。。。。。。。。。。。。。。。。。  
本文轉自 angerfire 51CTO部落格，原文連結：http://blog.51cto.com/angerfire/94800，如需轉載請自行聯絡原作者


相關文章