一起學WEB（六）打扮你的網頁（一）

2024-04-27 15:04:08

字體：大中小

來源：轉載

供稿：網友

打扮你的網頁（一）

上一次我們終于把網頁的主體結構搞定了，有標題、有內容、還有圖片，感覺還不錯，不過如果能讓網頁更加漂亮豈不更好。這就要靠CSS了。

我們在最初的時候曾經介紹過CSS，不過也僅是介紹而已。這一次我們要正式把CSS應用到網頁的制作當中。本次我們先從單個網頁開始，下一次我們會講如何將CSS應用到整個網站，保持整體風格一致。

在網頁中應用CSS共有兩種方法：

1.將CSS直接寫入到網頁的HTML中，這次我們就先講這種方法。因為這種方法最直觀、簡單，只要在現有的HTML中加了一部分內容。但是他只能控制單個網頁的樣式，不利于保持網頁整體風格，而且如果樣式內容較多，也不利于保持代碼的整潔。

2.將CSS代碼保存在專門的CSS文件中。有一定規模的網站都使用這種方式，有利于保持網站風格的一致，也減少了網頁中的重復代碼。他和第一種方法其實差別不大，我們先從基礎的開始。

還是直接上代碼：

<!doctype html><html>	<head>		<meta charset="utf-8">		<title>Head First Lounge</title>		<style>			h1,h2 {				font-family: sans-serif;				color: gray;			}			h1 {				border-bottom: 1px solid black;			}			p {				color: maroon;			}		</style>	</head>	<body>		<h1>Welcome to the New and ImPRoved Head First Lounge</h1>		<p>			<img src="images/drinks.gif" alt="Drinks">		</p>		<p>			Join us any evening for refreshing <a href="beverages/elixir.html">elixirs</a>,			conversation and maybe a game or two of <em>Dance Dance Revolution</em>.			Wireless access is always provided;			BYOWS (Bring your own Web server).		</p>		<h2>Directions</h2>		<p>			You'll find us right in the center of downtown Webville. 			If you need help finding us, check out 			our <a href="about/directions.html">detailed directions</a>.			Come join us!		</p>	</body><html>
lounge.html代碼    再看一下網頁效果，如圖：
    好，我們把網頁中與CSS有關的部分拿出來：
<style>	h1,h2 {		font-family: sans-serif;	//設置字體為sans-serif		color: gray;			//字體顏色為灰色		}	h1 {		border-bottom: 1px solid black;	//一級標題的下邊框屬性，1像素寬、視線、黑色		}	p {		color: maroon;		//段落內容字體為棕色	}</style>    嗯，在HTML的<head>元素中增加了一個<style>元素，其中的內容就是CSS，可以看到他的語法與HTML不同。
        先引進一個概念：選擇器。這段代碼中一共有3個選擇器“h1,h2”、“h1”、“p”，他們分別與HTML文件中的元素對應，所有第一個選擇器同時選擇了一級標題與二級標題（元素之間用逗號隔開），第二個選擇器選擇了一級標題，第三個對應了段落元素。大括號內部是所指定的樣式，他的語法是一種屬性名與屬性值相對應的形式，屬性名與屬性值通過冒號隔開，每個屬性以分號結束。通過英文就可以知道每個屬性是什么意思。
        這里提示一下，如果代碼中下文的選擇器與上文的選擇器設置了相同的元素的屬性，但值不相同，則下文的屬性值會覆蓋上文的屬性值。例如：
<style>	h1,h2 {		font-family: sans-serif;			color: gray;					}	h1 {		border-bottom: 1px solid black;	color: red;		}</style>
    代碼中兩次設置了h1元素的color屬性，最終h1（一級標題）的字體顏色將為紅色。
 
       另外，屬性值在元素與形成嵌套關系的子元素之間是可以繼承的。舉個最簡單的例子：
<style>	body {			color: red;		}</style>
    以上文的代碼為例，<body>的子元素有<h1>、<h2>、<p>，<p>的子元素又有<em>，這樣網頁中所有這些元素的字體都將變為紅色（<a>元素除外，他有自身的特定顏色屬性，需要專門的修改）。
 
    現在我們已經完成了通過HTML內嵌CSS代碼的方式對單個網頁風格的修改，下一次我們將用鏈接CSS文件的方式實現對網站整體風格的控制。
 
    下期：打扮你的網頁（二）——通過CSS控制網站整體風格