使用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中文網其他相關文章!