css嵌入到html中的方法有哪些

這篇文章將為大家詳細(xì)講解有關(guān)css嵌入到html中的方法有哪些，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

隴川網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,隴川網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為隴川上千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的隴川做網(wǎng)站的公司定做！

將CSS樣式怎么嵌入html中的主要方法有三種：

1、設(shè)置標(biāo)簽的style=""屬性，稱為內(nèi)聯(lián)樣式；

2、在HTML的<head>標(biāo)簽中使用<style>標(biāo)簽，稱為嵌入式樣式；

3、創(chuàng)建并鏈接外部CSS文件，稱為外部樣式表。

基本樣式表通常修改html標(biāo)記的外觀，如<body>和<p>。在頭文件中使用CSS文件或樣式表時(shí)，我們還可以定義樣式類，并使用class="?"屬性將它們應(yīng)用于任何元素，但這超出了本簡(jiǎn)單指南的范圍。

內(nèi)聯(lián)樣式

特點(diǎn)：

1）、內(nèi)聯(lián)樣式放在代碼中的HTML元素中。

2）、使用內(nèi)聯(lián)樣式時(shí)，樣式只會(huì)影響你選擇的元素。

3）、內(nèi)聯(lián)樣式?jīng)]有選擇器

注：HTML中定義的內(nèi)聯(lián)樣式只適用于它們添加到的標(biāo)記。

<p style="color:red;">Some red text</p>

優(yōu)點(diǎn)：

1、如果您想測(cè)試和預(yù)覽更改，則非常有用。

2、對(duì)快速修復(fù)很有用。

3、降低HTTP請(qǐng)求。

缺點(diǎn)：

內(nèi)聯(lián)CSS必須應(yīng)用于每個(gè)元素。

嵌入式樣式

特點(diǎn)：

1）、被放置在樣式標(biāo)簽<style type ="text / css"> </ style>編寫(xiě)的網(wǎng)頁(yè)的頭部部分中。

2）、編寫(xiě)的樣式將僅用于您使用它的網(wǎng)頁(yè)。

3）、嵌入樣式也稱為“內(nèi)部樣式”

標(biāo)題中定義的樣式將應(yīng)用于整個(gè)頁(yè)面。下面的示例將使頁(yè)面中的所有h2標(biāo)記都以紅色顯示標(biāo)題。

<head>
   <style type="text/css"> 
       h2 { color: red; }
   </style>
</head>

優(yōu)點(diǎn)：

1、樣式表只影響一個(gè)頁(yè)面。

2、內(nèi)部樣式表可以使用類和ID。

3、無(wú)需上傳多個(gè)文件。HTML和CSS可以在同一個(gè)文件中。

缺點(diǎn)：

1、增加頁(yè)面加載時(shí)間。

2、它只影響一個(gè)頁(yè)面 - 如果要在多個(gè)文檔上使用相同的CSS，則無(wú)用。

外部樣式表

與HTML文件一樣，CSS文件也是純文本，并且通常具有.css文件擴(kuò)展名；可以通過(guò)特定的標(biāo)簽來(lái)將其鏈接到HTML文件中。

特點(diǎn)：

1）、在單獨(dú)的文檔中編寫(xiě)然后附加到各種Web文檔中

2）、修改它可以影響所有你所調(diào)用的頁(yè)面

3）、便于修改操作

例如，style.css文件內(nèi)容可以如下所示：

body { background-color: beige; color: #000080;}
h2 { color: red;}

然后可以使用<link…>在header頭中引入生效。

<head>
<link rel="stylesheet" type="text/css" href="style.css" title="style">
</head>

優(yōu)點(diǎn)：

1、HTML頁(yè)面的大小更小，結(jié)構(gòu)更清晰。

2、加載速度更快。

3、相同的.css文件可以在多個(gè)頁(yè)面上使用。

缺點(diǎn)：

在加載外部CSS之前，頁(yè)面可能無(wú)法正確呈現(xiàn)。

關(guān)于css嵌入到html中的方法有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享標(biāo)題：css嵌入到html中的方法有哪些
文章轉(zhuǎn)載：http://bm7419.com/article6/iidiog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、用戶體驗(yàn)、小程序開(kāi)發(fā)、品牌網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站改版

聲明：本網(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)容