css樣式表可以幫助開發者從如何展示一個文件的瑣事中分離出文件的資訊內容,即把樣式從內容中分離出來;這樣做的好處:1、可以使用相同的內容加以不同的樣式來實現不同的目的;2、避免重複;3、使得維護更容易;4、減少網頁程式碼量,提高網頁傳輸效率。
本文操作環境:windows10系統、css3、thinkpad t480電腦。
(推薦教學:CSS影片教學)
為什麼要使用css樣式表?
CSS可幫助開發者從如何展示一個文件的瑣事中分離出文件的資訊內容。那些如何展示文檔的瑣事被稱為文檔的樣式。將樣式從內容中分離出來有以下好處:
#避免重複
使得維護更容易
可以使用相同的內容加以不同的樣式來實現不同的目的
你的網站可能有成千上萬相似的頁面。使用CSS,你可以將樣式資訊儲存在通用的檔案中供所有的頁面共用。當使用者開啟了一個網頁,使用者的瀏覽器會單獨載入關於頁面內容的樣式。當使用者列印了一個網頁,你應該提供不同的樣式來確保列印出來的頁面是易讀的。
通常,你會使用HTML來描述頁面內容而不是樣式,使用CSS來指定頁面的樣式而不是內容。當然,也有例外,HTML也可以提供一些方法來指定樣式。例如,在HTML中你可以使用a4b561c25d9afb9ac8dc4d70affff419標籤來加粗文本,也可以在6c04bd5ca3fcae76e30b72ad730ca86d標籤中指定頁面的背景顏色。當你使用CSS的時候,通常會避免使用HTML的樣式功能,這樣所有的樣式資訊就會被保存在一個地方。 使用css樣式表主要是為了方便網頁設計的分工協作,比如說html部分由一個人或一個團隊去完成,js程式部分也是一批人去完成,css也是交給專業人士去做,這樣肯定就能提高效率,就像裝修房子,硬裝和軟裝都分別由專業的工程隊去做,肯定能做得又快又好。反之,如果所有工作都交給一個工程隊去完成,品質和工期就無法保證了。
此外,一個網頁的css樣式表,可以原封不動就給另一個網頁甚至其他網站的網頁使用,這就意味著css是可以重用的,這樣就可以大大減少網頁的程式碼量,提高網頁傳輸效率,也可以讓網站保持劃一的外觀樣式,當然同時也就減輕了網頁設計人員的工作強度。這就好比一個房子的裝潢樣式,可以完全複製到另一個類似結構的房子,這可以既可以減少房子裝修的成本,同時也可以讓房子保持統一的裝修風格。
實作:為HTML文件建立樣式表建立樣式表
1.建立一個文字檔案;這個檔案就是你的樣式表。命名為style1.css
2.在你的CSS檔案中,複製下面這行程式碼並拷貝進去,然後儲存檔案:
strong { color: red; }
連結你的文件和樣式表
1.建立另一個文字檔;這個文件就是你的文件。命名為你喜歡的任意名字2.在你的HTML文件中,複製下面的程式碼並拷貝進去,bd72bfde891514677616a913ab9d9cad那一行請引用你自己的樣式表:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
3.儲存檔案並在瀏覽器中開啟它。樣式表會讓8e99a69fbe029cd4e2b854e244eab143標籤中的字母顯示成紅色,如下:
ascading Style
S###heets### ###更多程式相關知識,請造訪:###程式設計課程###! ! ###以上是為什麼要使用css樣式表的詳細內容。更多資訊請關注PHP中文網其他相關文章!