1. 鏈接單獨CSS文件(外聯樣式(鏈接外部樣式表))
此方法是在HTML文檔中加載CSS規則的最常用方法。通過此方法,所有Style規則將會被保存到后綴名為.CSS文本文件中。此文件常存儲於Server端,且由你在HTML文件中直接鏈接它。此鏈接僅僅在HTML文件中單獨的一行,如:
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
你需要確認在href中包含正確的CSS文件。如果CSS文件與HTML文件位於相同路徑,則無需路徑;反之,按照href="foldername/mystyles.css"
的方式指明路徑。其中,media參數指明CSS規則在何時被使用。“screen”表明用於計算機屏幕。如果指明“print”,規則只有在頁面打印時才會被使用。你可按照需要包含若干CSS文件。
鏈接單獨CSS文件有許多優勢。如果需要修改整個網站的一個Style,只需要在CSS文件中修改一次。如果需要修改整個網站的外觀,則只需要升級一個文件。也許使用單獨CSS文件的重要原因是為了訪問加速。當用戶第一次訪問網站時,瀏覽器下載當前頁面以及鏈接的CSS文件。當導航到另一網頁時,瀏覽器只需要下載HTML頁面,CSS文件因已被緩存故無需再次下載。這可以顯著提升網頁瀏覽速度。
2. HTML嵌入CSS(內聯樣式)
<style media="screen" type="text/css"> Add style rules here </style>
所有CSS規則存放在style標簽中。media元素的值可以像上文所述的“screen”/“print”。
這種方法的缺點是每次用戶訪問網頁時Style文件都需要重新下載,這將導致輕微慢的瀏覽體驗。相對的,這種方法也有一些優點。因為CSS是HTML文檔的一部分,整個頁面只以一個文件的方式存在。在向他人發送郵件頁面時或者HTML頁面作為類似博客模板時,此方式將會被使用。另一個使用此方法的優點是動態內容。如果你通過數據庫來生成頁面內容,你同時也能產生動態Style。Blogger采用了這種方法——它動態地插入HTML標題顏色到嵌入在HTML中的CSS規則。這使得用戶可以通過Admin頁面改變顏色而非在Blog模板中修改CSS。
在<head>標簽中加入<style>標簽將CSS樣式表寫到該標簽中。格式:.class{ 屬性1 : 值; 屬性2 : 值;屬性3 : 值 ;},值后跟分號。
<head> <meta charset="utf-8"> <title>js測試</title> <!-- 內部樣式表開始 --> <style > .box{ background-color:#000; color:#fff; } <!-- 內部樣式表結束 --> </style> </head> <body> <div class="box"> <h1>這是一個DIV</h1> </div> </body>
3. HTML標記加入內聯CSS(行內樣式)
Style規則也可以直接加入HTML元素中。你只需要在元素中加入一個style參數,同時輸入Style規則作為其值。下面是一個標題文本為紅色、背景為黑色的示例:
<h2 style="color:red;background:black;">This is a red heading with a black background</h2>
這是一種不好的方法,因為它將使網頁膨脹,使得網頁維護變得頭疼。但是它在一些條件下,仍然有些用途。一個例子便是:假如你在使用一個你沒有CSS文件權限時,對應的只需簡單地在元素中加入Style規則。
在元素標簽有個style屬性,將樣式寫到該屬性中。格式 style=" 屬性1 : 值; 屬性2 : 值;屬性3 : 值;"多個屬性用分號“ ; ”隔開。
<!-- 在div 后跟style屬性,等號后面寫上css樣式 --> <div style="background-color:#000;color:#fff;"> <h1>這是一個DIV標簽為</h1> </div>
4. 在CSS文件中導入CSS文件
另外一種有趣的在HTML頁面加入CSS的方式是導入規則。這種方式讓我們從CSS內部附加一個新的CSS文件。
為了在內部導入CSS文件,只需簡單地用下面規則:
@import "newstyles.css";
只需將”newstyles”改成你的CSS文件名,同時確定包含正確的文件路徑。記住,文件路徑是相對於現在我們所在的CSS文件而言的,如果CSS文件是嵌入到HTML頁面中,則路徑是相對於HMTL文件而言。
讓我們想像:我們有一個1000張頁面的網站,並且我們在網站的每一個頁面都鏈接到一個CSS文件。現在我們想像:我們需要加入第二個CSS文件到所有頁面中。我們可以編輯這1000個頁面,增加第二個CSS鏈接或者一個更好的方式即是在第一個文件中導入新的CSS文件。我們可以節約自己許多小時的工作量。