引入CSS


前面的話

  Web早期,HTML是一種很有限的語言,這種語言不關心外觀,它只是一種簡潔的小型標記機制。隨着Mosaic網頁瀏覽器的出現,網站開始到處涌現。對於頁面改變外觀的需求增加,於是增加了類似<font>和<big>之類的標記元素。幾年之后,大多數網站標記幾乎完全由表格和font元素組成,且對於所要表現的內容不能傳達任何實際含義,使文檔可用性降低,且不易於維護。於是1995年,W3C發布了CSS草案,試圖解決結構與樣式混雜的問題。1996年,W3C正式推出CSS1。1998年,推出CSS2。2001年從CSS3開始,CSS這門語言分割成多個獨立的模塊,每個模塊獨立分級,且只包含一小部分功能;2011年開始設計CSS4

  本文將主要介紹引入CSS樣式的方式,包括外部樣式表、內部樣式表和行間樣式三種方式

  [注意]CSS語法非常簡單,但容易忽略的一點是不能省略分號(最后一個樣式除外)

 

外部樣式表

使用link標記

  在link標記中rel和href屬性是必須的,type屬性和media屬性可省略

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="sheet1.css">
<title>Document</title>
</head>
<body></body>    
</html>    
body{
    background-color: red;
}

  [注意]樣式表中不能包含HTML標記語言,只能有CSS規則和CSS注釋

/*若CSS文件中存在除了CSS樣式和CSS注釋的其他標記,則會導致在該標記后面的CSS樣式將無法被識別*/
<style></style>
body{
    background-color: red;
}

  CSS注釋只支持/**/的寫法,不支持//的寫法

【多個樣式表】

  一個文檔可能關聯多個樣式表,如果是這樣,文檔最初顯示時只會使用rel為stylesheet的link標記   

<link rel="stylesheet" href="sheet1.css" />
<link rel="stylesheet" href="sheet2.css" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="sheet1.css">
<link rel="stylesheet" href="sheet2.css">
<title>Document</title>
</head>
<body>
</body>    
</html>
/*sheet1*/
body{
    background-color: red;
}
/*sheet2*/
body{
    height: 100px;
    border: 10px solid black;
}

【候選樣式表】

  將rel屬性的設置為alternate stylesheet可以定義候選樣式表,只有在用戶選擇這個樣式表時才會用於文檔表現。如果瀏覽器能使用候選樣式表,它會使用link元素的title屬性值生成一個候選樣式列表,可在菜單欄中查看->樣式中進行選擇。(IE和firefox支持)

  [注意]若一個候選樣式表沒有設置title,那么它將無法在候選樣式列表中出現,則無法被引用 

<link rel="stylesheet" type="text/css" href="sheet1.css" />
<link rel="alternate stylesheet" type="text/css" href="sheet2.css" title="sheet2"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="sheet1.css" />
<link rel="alternate stylesheet" type="text/css" href="sheet2.css" title="sheet2"/>
<title>Document</title>
</head>
<body>
</body>    
</html>
/*sheet1*/
body{
    background-color: red;
}
/*sheet2*/
body{
    height: 100px;
    border: 10px solid black;
}

 

內部樣式表

【使用style元素】

  內部樣式表需要使用<style>元素包含樣式表,它在文檔中單獨出現。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
    background-color: red;
}    
</style>
<title>Document</title>
</head>
<body>
</body>    
</html>    

【多個style標簽】

  文檔中可出現多個style標簽,且樣式規則與層疊樣式規則一致

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
    background-color: red;
}    
</style>
<style>
body{
    background-color: blue;
    height: 100px;
    border: 10px solid black;
}    
</style>
<title>Document</title>
</head>
<body>
</body>    
</html>    

【使用@import指令】

  與link類似,@import指令用於指示Web瀏覽器加載一個外部樣式表,並在表現HTML文檔時使用其樣式。唯一的區別在於命令的具體語法和位置。@import指令常用於樣式表需要使用另一個樣式表中的樣式的情況。

<style>
@import url(sheet2.css);
body{
    background-color: red;
}    
</style>

   [注意]@import必須出現在style元素中,且要放在其他CSS規則之前,否則將根本不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/*將@import放置在CSS規則之后將不起使用*/
body{
    background-color: red;
}    
@import url(sheet2.css);
</style>
<title>Document</title>
</head>
<body>
</body>    
</html>    

【多個@import指令】

  可以使用@import指令導入多個CSS樣式表,且可以使用media來限制應用場景。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url(sheet1.css) all;    
@import url(sheet2.css);
</style>
<title>Document</title>
</head>
<body>
</body>    
</html>        

 

行間樣式

  如果只是想為單個元素指定一些樣式,可以使用HTML的style屬性來設置一個行間樣式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="background-color: red; height: 100px; border: 10px solid black;" style="background-color: red;">
</body>    
</html>    

  [注意]行間樣式若存在多個style屬性,只能識別第一個

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<!-- 只能識別第一個style屬性的值,所以頁面顯示為紅色-->
<body style="background-color: red; height: 100px; border: 10px solid black;" style="background-color: blue;">
</body>    
</html>    
 

最后

  關於CSS的優先級先后問題,與外部、內部、行間這三種引入CSS的方式關系不大,主要與重要性、特殊性和出現順序有關。在重要性相等的情況下,行間樣式的優先級最高,外部樣式和內部樣式無可比性。關於優先級的詳細內容移步至此

  [注意]<style>標簽和<link>標簽可以寫在<body>標簽里面


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM