使用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寫在
與> ;之間，並用標記進行聲明。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）但是，如果有多個頁面，對於不同頁面上的
標記都希望採用同樣的風格時，內嵌式就顯得略微麻煩，維護成本也不低。
（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框架
<html> <head> <title>页面标题</title> <link href="1.css" type="text/css" rel="stylesheet"> </head> <body> <h2 id="CSS标题">CSS标题1</h2> <p>紫色、粗体、下划线、25px的效果1</p> <h2 id="CSS标题">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語句
可以選擇任何一種放在標記之間。
@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中文網其他相關文章！
刪除Internet Explorer的商業案例Apr 15, 2025 am 10:30 AMInternet Explorer（IE）11與其他所有主要瀏覽器之間的距離是越來越多的鴻溝。增加對技術過時的支持
焦點戒指的動畫位置Apr 15, 2025 am 10:27 AM莫里斯·馬漢（Maurice Mahan）創建了FocusOverlay，這是一個“用於創建重點元素疊加的庫”。該描述對您有些混亂，不需要一個庫
使用圖像管理服務的工作流注意事項Apr 15, 2025 am 10:20 AM所有這些網站都想幫助您使用圖像。他們做一些事情，例如優化您的圖像並幫助您執行表演。那是一件非常好的事情。通過任何指標，圖像是資源的主要部分
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
SublimeText3 Linux新版
SublimeText3 Linux最新版
Dreamweaver CS6
視覺化網頁開發工具
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
