您好,登錄后才能下訂單哦!
使用CSS對(duì)頁面進(jìn)行全方位的控制,主要的方法有四種:行內(nèi)樣式、內(nèi)嵌式、鏈接式和導(dǎo)入式,下面我們來分別看一下這四種方式:
一、行內(nèi)樣式
1、特點(diǎn):最為直接的一種。
2、使用方式
直接在HTML的標(biāo)記中,使用style屬性,將CSS代碼寫在其中。
3、舉例說明
<html> <head> <title>頁面標(biāo)題</title> </head> <body> <p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文內(nèi)容1</p> <p style="color:#000000; font-style:italic;">正文內(nèi)容2</p> <p style="color:#FF00FF; font-size:25px; font-weight:bold;">正文內(nèi)容3</p> </body> </html>
4、評(píng)價(jià)
行內(nèi)樣式是最為簡單的CSS使用方法,但由于需要為每一個(gè)標(biāo)記設(shè)置style屬性,后期維護(hù)成本依然很高,而且網(wǎng)頁容易過胖,因此不推薦使用。
二、內(nèi)嵌式
1、介紹
內(nèi)嵌樣式表就是將CSS寫在<head>與</head>之間,并用<style>和</style>標(biāo)記進(jìn)行聲明。
2、實(shí)例說明
<html> <head> <title>頁面標(biāo)題</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代碼部分被集中在了同一個(gè)區(qū)域,方便了后期的維護(hù),頁面也大大瘦身。
(2)但是,如果有多個(gè)頁面,對(duì)于不同頁面上的<p>標(biāo)記都希望采用同樣的風(fēng)格時(shí),內(nèi)嵌式就顯得略微麻煩,維護(hù)成本也不低。
(3)因此,內(nèi)嵌式僅適用于對(duì)特殊頁面設(shè)置單獨(dú)的樣式風(fēng)格。
三、鏈接式
1、地位
鏈接式CSS樣式是使用頻率最高,也是最為實(shí)用的方法。
2、方式
在HTML的<head>和</head>標(biāo)記之間加上語句:<link href="css文件" type="text/css" rel="stylesheet">。
3、實(shí)例
(1)CSS文件:1.css
h3{ color:#0000FF; } p{ color:#FF00FF; text-decoration:underline; font-weight:bold; font-size:20px; }
(2)HTML框架
<html> <head> <title>頁面標(biāo)題</title> <link href="1.css" type="text/css" rel="stylesheet"> </head> <body> <h3>CSS標(biāo)題1</h3> <p>紫色、粗體、下劃線、25px的效果1</p> <h3>CSS標(biāo)題2</h3> <p>紫色、粗體、下劃線、25px的效果2</p> </body> </html>
4、優(yōu)勢(shì)
將頁面框架HTML代碼與美工CSS代碼完全分離,使得前期制作和后期維護(hù)都十分方便,一個(gè)CSS文件可以鏈接到多個(gè)HTML文件中。
四、導(dǎo)入式
1、功能類似于鏈接式,只是語法和運(yùn)作方式上略有區(qū)別。
2、與鏈接式比較
(1)采用import方式導(dǎo)入的樣式表,在HTML文件初始化時(shí),會(huì)被導(dǎo)入到HTML文件內(nèi),作為文件的一部分,類似內(nèi)嵌式的效果;
(2)鏈接式的CSS文件則是在HTML的標(biāo)記需要格式時(shí)才以鏈接的方式引入。
3、常用的幾種@import語句
可以選擇任意一種放在<style>與</style>標(biāo)記之間。
@import url(1.css);
@import url('1.css');
@import url("1.css");
@import 1.css;
@import '1.css';
@import "1.css";
4、長處
(1)導(dǎo)入樣式表的最大用處在于可以讓一個(gè)HTML文件導(dǎo)入很多的樣式表;
(2)不單是在HTML文件的<style>與</style>標(biāo)記中可以導(dǎo)入多個(gè)樣式表,在CSS文件中也可以導(dǎo)入其他的樣式表。
以上就是如何使用css來控制頁面的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注億速云其它相關(guān)文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。