css控制頁(yè)面的方法-創(chuàng)新互聯(lián)

使用CSS對(duì)頁(yè)面進(jìn)行全方位的控制，主要的方法有四種：行內(nèi)樣式、內(nèi)嵌式、鏈接式和導(dǎo)入式，下面我們來(lái)分別看一下這四種方式：

創(chuàng)新互聯(lián)公司是一家專(zhuān)業(yè)提供代縣企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、HTML5建站、小程序制作等業(yè)務(wù)。10年已為代縣眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)的建站公司優(yōu)惠進(jìn)行中。

一、行內(nèi)樣式

1、特點(diǎn)：最為直接的一種。

2、使用方式

直接在HTML的標(biāo)記中，使用style屬性，將CSS代碼寫(xiě)在其中。

3、舉例說(shuō)明

<html>
<head>
<title>頁(yè)面標(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>

css控制頁(yè)面的方法

4、評(píng)價(jià)

行內(nèi)樣式是最為簡(jiǎn)單的CSS使用方法，但由于需要為每一個(gè)標(biāo)記設(shè)置style屬性，后期維護(hù)成本依然很高，而且網(wǎng)頁(yè)容易過(guò)胖，因此不推薦使用。

二、內(nèi)嵌式

1、介紹

內(nèi)嵌樣式表就是將CSS寫(xiě)在<head>與</head>之間，并用<style>和</style>標(biāo)記進(jìn)行聲明。

2、實(shí)例說(shuō)明

<html>
<head>
<title>頁(yè)面標(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>

css控制頁(yè)面的方法

3、分析

（1）從例子中可以看出，所有的CSS代碼部分被集中在了同一個(gè)區(qū)域，方便了后期的維護(hù)，頁(yè)面也大大瘦身。

（2）但是，如果有多個(gè)頁(yè)面，對(duì)于不同頁(yè)面上的<p>標(biāo)記都希望采用同樣的風(fēng)格時(shí)，內(nèi)嵌式就顯得略微麻煩，維護(hù)成本也不低。

（3）因此，內(nèi)嵌式僅適用于對(duì)特殊頁(yè)面設(shè)置單獨(dú)的樣式風(fēng)格。

三、鏈接式

1、地位

鏈接式CSS樣式是使用頻率最高，也是最為實(shí)用的方法。

2、方式

在HTML的<head>和</head>標(biāo)記之間加上語(yǔ)句：<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>頁(yè)面標(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>

css控制頁(yè)面的方法

4、優(yōu)勢(shì)

將頁(yè)面框架HTML代碼與美工CSS代碼完全分離，使得前期制作和后期維護(hù)都十分方便，一個(gè)CSS文件可以鏈接到多個(gè)HTML文件中。

四、導(dǎo)入式

1、功能類(lèi)似于鏈接式，只是語(yǔ)法和運(yùn)作方式上略有區(qū)別。

2、與鏈接式比較

（1）采用import方式導(dǎo)入的樣式表，在HTML文件初始化時(shí)，會(huì)被導(dǎo)入到HTML文件內(nèi)，作為文件的一部分，類(lèi)似內(nèi)嵌式的效果；

（2）鏈接式的CSS文件則是在HTML的標(biāo)記需要格式時(shí)才以鏈接的方式引入。

3、常用的幾種@import語(yǔ)句

可以選擇任意一種放在<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、長(zhǎng)處

（1）導(dǎo)入樣式表的大用處在于可以讓一個(gè)HTML文件導(dǎo)入很多的樣式表；

（2）不單是在HTML文件的<style>與</style>標(biāo)記中可以導(dǎo)入多個(gè)樣式表，在CSS文件中也可以導(dǎo)入其他的樣式表。

以上就是如何使用css來(lái)控制頁(yè)面的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！

網(wǎng)站名稱：css控制頁(yè)面的方法-創(chuàng)新互聯(lián)
路徑分享：http://aaarwkj.com/article34/ccggpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、定制網(wǎng)站、App設(shè)計(jì)、建站公司、標(biāo)簽優(yōu)化、手機(jī)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

css控制頁(yè)面的方法-創(chuàng)新互聯(lián)