HTML調用CSS的四種方法


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文件。我們可以節約自己許多小時的工作量。


免責聲明!

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



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