CSS之 使用CSS控制頁面的四種方式
前言
CSS在製作網頁中，是大量使用的一種語言，多參考一些網站的原始碼可以幫助我們快速掌握各種技巧並運用到實際製作中，下面小編就如何在網頁中引入CSS樣式表做一下簡單的介紹。
CSS控制頁面
使用CSS製作網頁時，一個基礎的要求是主流的瀏覽器之間的顯示效果要基本一致，通常的做法是一邊編寫HTML和CSS程式碼，一邊在兩個不同的瀏覽器上進行預覽，及時地進行調整，這有利於深入掌握CSS。
通過大致地瞭解CSS，我們可以使用CSS對頁面進行全方位的控制，主要的方法有四種：行內樣式、內嵌式、連結式和匯入式等，最後探討一下這四種方式的優先順序的內容。
四種方式
一、行內樣式
1.特點：最為直接的一種。
2.使用方式
直接在HTML的標記中，使用style屬性，將CSS程式碼寫在其中。
3.舉例說明
<html>
<head>
<title>頁面標題</title>
</head>
<body>
<p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文內容1</p>
<p style="color:#000000; font-style:italic;">正文內容2</p>
<p style="color:#FF00FF; font-size:25px; font-weight:bold;">正文內容3</p>
</body>
</html> 
4.評價
行內樣式是最為簡單的CSS使用方法，但由於需要為每一個標記設定style屬性，後期維護成本依然很高，而且網頁容易過胖，因此不推薦使用。
二、內嵌式
1.介紹
內嵌樣式表就是將CSS寫在<head>與</head>之間，並用<style>和</style>標記進行宣告。
2.例項說明
<html>
<head>
<title>頁面標題</title>
<style type="text/css">
<!--
p{
color:#6600CC;
text-decoration:underline;
font-weight:bold;
font-size:25px;
}
-->
</style>
</head>
<body>
<p>紫色、粗體、下劃線、25px的效果1</p>
<p>紫色、粗體、下劃線、25px的效果2</p>
<p>紫色、粗體、下劃線、25px的效果3</p>
</body>
</html> 
3.分析
（1）從例子中可以看出，所有的CSS程式碼部分被集中在了同一個區域，方便了後期的維護，頁面也大大瘦身。
（2）但是，如果有多個頁面，對於不同頁面上的<p>標記都希望採用同樣的風格時，內嵌式就顯得略微麻煩，維護成本也不低。
（3）因此，內嵌式僅適用於對特殊頁面設定單獨的樣式風格。
三、連結式
1.地位
連結式CSS樣式是使用頻率最高，也是最為實用的方法。
2.方式
在HTML的<head>和</head>標記之間加上語句：<link href="css檔案" type="text/css" rel="stylesheet">。
3.例項
（1）CSS檔案：1.css
h2{
color:#0000FF;
}
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:20px;
}（2）HTML框架
<html>
<head>
<title>頁面標題</title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<h2>CSS標題1</h2>
<p>紫色、粗體、下劃線、25px的效果1</p>
<h2>CSS標題2</h2>
<p>紫色、粗體、下劃線、25px的效果2</p>
</body>
</html>
4.優勢
將頁面框架HTML程式碼與美工CSS程式碼完全分離，使得前期製作和後期維護都十分方便，一個CSS檔案可以連結到多個HTML檔案中。
四、匯入式
1.功能類似於連結式，只是語法和運作方式上略有區別。
2.與連結式比較
（1） 採用import方式匯入的樣式表，在HTML檔案初始化時，會被匯入到HTML檔案內，作為檔案的一部分，類似內嵌式的效果；
（2）連結式的CSS檔案則是在HTML的標記需要格式時才以連結的方式引入。
3.常用的幾種@import語句
可以選擇任意一種放在<style>與</style>標記之間。
@import url(1.css);
@import url('1.css');
@import url("1.css");
@import 1.css;
@import '1.css';
@import "1.css";
4.長處
（1）匯入樣式表的最大用處在於可以讓一個HTML檔案匯入很多的樣式表；
（2）不單是在HTML檔案的<style>與</style>標記中可以匯入多個樣式表，在CSS檔案中也可以匯入其他的樣式表。
優先順序比較
1.上面介紹了 CSS控制頁面的4中不同方法，都有各自的特點。當4種方法同時用到一個HTML檔案的同一個標記上時，會出現優先順序的問題。
（1）如果各種方法設定的屬性不同，如內嵌式設定字型為“宋體”，連結式設定顏色為“紅色”，那麼顯示結果二者同時生效，為“宋體、紅色字”；
（2）但當各種方法同時設定一個屬性時，例如都設定字型的顏色，情況會比較複雜。
2.優先順序劃分
從高到低依次是：行內樣式、（<link>標記）連結式、內嵌式、（@import）匯入式。
3.總結經驗
雖然各種CSS樣式加入頁面的方式有先後的優先順序，但在製作網頁時，最好只使用其中的1~2種，這樣既有利於後期的維護和管理，也不會出現各式各樣“撞車”的情況，便於設計者理順設計的整體思路。
小結
一個小小的知識點，裡面確實有很多值得注意的地方，不僅僅是樣式表的引入方式的知識，後面還有更多值得理解和掌握的東西，如選擇器等。
感謝您的訪問！