CSS頁面控制方式及其優先順序-- 行內樣式、內嵌式、連結式、匯入式

00潤物無聲00發表於2016-01-10
CSS

    使用CSS對頁面 進行全方位的控制，控制頁面的方式：行內樣式，內嵌式，連結式，匯入式。

行內樣式：

    直接對HTML的標記使用style屬性，然後將CSS程式碼直接寫進去；    

<p style="color:#0000ff; font-style: normal;">範曉權</p>


內嵌式：

    將CSS寫在<head>與</head>之間，並且用<style>和</style>標記進行宣告；

<head>
<style type="text/css">     
<!--
p{
　　color:#0000FF;
　　text-decoration:underline;
　　font-weight:bold;
　　font-size:18px;
}
-->
</style>
</head>

    略顯麻煩，維護成本高，因此僅適用於對特殊的頁面設定單獨的樣式風格。


連結式：使用頻率最高，最為實用的方法。

    在檔案<head> 和 </head> 標記之間加上<link href = "sheet.css" type = "text/css" rel = "stylesheet" > ,將CSS檔案連結到頁面中，對其中的標記進行樣式控制。它將HTML頁面本身與CSS樣式風格分離為兩個或者多個檔案，實現了頁面框架HTML程式碼和美工CSS程式碼的完全分離。

    最大優勢：CSS程式碼和HTML程式碼完全分離，並且同一個CSS檔案可以被不同的HTML所連結使用。    

    前期製作和後期維護都方便，網站後臺技術人員和美工設計者有很好的分工合作；對於同一個CSS檔案可以連結到多個HTML檔案中，甚至是所有頁面，網站風格統一，協調，後期維護量大大減少。


匯入樣式：

    與連結樣式表的功能基本相同，僅在語法和運作方式上與連結樣式表略有區別；

    採用import方式匯入的樣式表，在HTML檔案初始化時，會被匯入到HTML檔案內。而連結樣式表則是在HTML的標記需要格式時才以連結的方式引入；

    格式種類：    

        @import url(sheet1.css);

        @import url("sheet1.css");

        @import url('sheet1.css');

        @import sheet1.css;

        @import "sheet1.css";

        @import 'sheet1.css';

<head>
<style type="text/css">     
<!--
<span style="font-family: SimSun;font-size:18px;">    @import url(sheet1.css);</span>
-->
</style>
</head>


各種方式的優先順序

    行內樣式>連結式>內嵌式>@import匯入式

    PS：在<style> 與 </style>之間會用到 " <!-- " 和 “ --> ”將所有的CSS包含在其中，避免老式瀏覽器不支援CSS，將CSS程式碼直接顯示在瀏覽器上而設定的HTML註釋；


總結：

學習的是為了使用，而熟悉了各種使用方式的優缺點之後，能夠在合適的地方選擇合適的方式進行處理才是最優解。連結式是我們經常見到和使用的，在學習和使用CSS的使用應該多向其他大型網站學習，學習他們的思想和設計，站在巨人的肩膀上。

相關文章