一起學WEB（七）打扮你的網頁（二）——通過CSS控制網站整體風格

2024-04-27 15:11:01

字體：大中小

來源：轉載

供稿：網友

打扮你的網頁（二）——通過CSS控制網站整體風格

今天繼續CSS，上一次我們講了通過在HTML文件中嵌入CSS代碼的方式控制網頁的外觀。這一次我們利用鏈接獨立的CSS文件的形式控制網頁的外觀。

與將CSS代碼相比，利用獨立的CSS文件有幾點好處：

1.有利于保持代碼的整潔。當網頁需要大量CSS代碼時，存放于單獨的文件不會影響HTML文件的可讀性，并且做到了表現和結構的分離（HTML負責控制網頁的結構，CSS控制網頁的外觀表現）。

2.減少了網頁中的重復代碼。如果多個網頁采用相同的外觀風格，同樣的代碼不必重復多次，鏈接到同一個（一組）CSS文件即可。

3.有利于保持網站風格統一。同一個網站中的網頁往往都采用相同的外觀風格（這樣可以保持外觀的整體統一，不會顯得格格不入），所有采用同一個（一組）CSS文件即可。若需要改變網站外觀，直接更改CSS文件即可，即可繼續保持網站風格統一，又提高了工作效率，并能避免遺漏。

下面我們對上一次的代碼做一些修改。首先，建立名為lounge.css的文件，保存到lounge.html同一個文件夾中，將上一講中<style>元素中的代碼復制過來（不包括<style>標記本身，他是HTML中的一個標記，不是CSS代碼）。

h1,h2 {	font-family: sans-serif;	color: gray;}h1 {	border-bottom: 1px solid black;}p {	color: maroon;}
lounge.css代碼然后對lounge.html的代碼做相應修改，將<style>元素及其內容刪除，并添加一個<link>元素，代碼如下：
<head>		<meta charset="utf-8">		<title>Head First Lounge</title>		<link type="text/css" rel="stylesheet" href="lounge.css">	<!--  刪除了<style>元素并增加了<link>元素  --></head>
lounge.html的head部分代碼（其余部分沒有改變）
    我們可以用瀏覽器看一下，lounge網頁的風格和上一次一樣，兩種方法達到了相同的效果。
  我們來講一下<link>元素，這個元素用來連接HTML文件以外的信息。首先是type屬性，他說明了要鏈接的文件的類型（“text/css”表示為文本文件），這個屬性到了HTML5以后變成可一個可選屬性，可寫可不寫。rel屬性說明了鏈接的文件與HTML之間的關系，“stylesheet”說明是一個網頁的樣式表。href指定了要鏈接的具體文件。
   現在我們在elixir.html和directions.html文件中分別加入一個<link>元素，位置與lounge.html相同，具體屬性設置如下：
<link type="text/css" rel="stylesheet" href="../lounge.css">
   僅有href屬性的值不同，“../lounge.css”表明lounge.css文件在elixir.html和directions.html文件的父文件夾中（我們沿用了上幾講中的文件組織結構）。
   好，我們看一下網站的整體效果，是不是保持了一致。一級二級標題字體為sans-serif、顏色為灰色，一級標題帶有下劃線（通過設置下邊框實現），內容的字體為棕色。