如何使用css來控制頁面

使用CSS對頁面進行全方位的控制，主要的方法有四種：行內樣式、內嵌式、連結式和導入式，下面我們來分別看一下這四種方式：

一、行內樣式

1、特點：最直接的一種。

2、使用方式

直接在HTML的標記中，使用style屬性，將CSS程式碼寫在其中。

3、範例說明

   
  
正文内容1
 
正文内容2
 
正文内容3
  

4、評價

行內樣式是最簡單的CSS使用方法，但由於需要為每一個標記設定style屬性，後期維護成本依然很高，而且網頁容易過胖，因此不建議使用。

二、內嵌式

1、介紹

#內嵌樣式表就是將CSS寫在與和標記進行聲明。

2、實例說明

    
  
紫色、粗体、下划线、25px的效果1
 
紫色、粗体、下划线、25px的效果2
 
紫色、粗体、下划线、25px的效果3
  

3、分析

（1）從例子可以看出，所有的CSS程式碼部分被集中在了同一個區域，方便了後期的維護，頁面也大大瘦身。

（2）但是，如果有多個頁面，對於不同頁面上的

標記都希望採用同樣的風格時，內嵌式就顯得略微麻煩，維護成本也不低。

（3）因此，內嵌式僅適用於對特殊頁面設定單獨的樣式風格。

三、連結式

1、地位

連結式CSS樣式是使用頻率最高，也是最實用的方法。

2、方式

在HTML的和

3、實例

（1）CSS檔案：1.css

h2{ color:#0000FF; } p{ color:#FF00FF; text-decoration:underline; font-weight:bold; font-size:20px; }

（2）HTML框架

    
  
CSS标题1
 
紫色、粗体、下划线、25px的效果1
 
CSS标题2
 
紫色、粗体、下划线、25px的效果2
  

4、優勢

將頁面框架HTML程式碼與美工CSS程式碼完全分離，使得前期製作和後期維護都十分方便，一個CSS檔案可以連結到多個HTML檔案中。

四、導入式

1、功能類似連結式，只是文法和運作方式上略有區別。

2、與連結式比較

（1）採用import方式匯入的樣式表，在HTML檔案初始化時，會被匯入到HTML檔案內，作為檔案的一部分，類似內嵌式的效果；

（2）連結式的CSS檔案則是在HTML的標記需要格式時才以連結的方式引入。

3、常用的幾個@import語句

可以選擇任何一種放在標記之間。

@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文件的標記中可以匯入多個樣式表，在CSS檔案中也可以匯入其他的樣式表。

推薦教學：css快速入門

以上是如何使用css來控制頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！