html如何引用css樣式?html引用css文件的3種方法說明
發(fā)表時(shí)間:2023-08-29 來源:明輝站整理相關(guān)軟件相關(guān)文章人氣:
[摘要]HTML引用css樣式有三種方法,那么,有哪三種方法呢?本篇文章就來給大家詳細(xì)介紹一下html引用css文件的三種方法。將樣式表應(yīng)用于HTML文檔和CSS中的XHTML文檔大致可分為以下三種方法。(推薦教程:css視頻教程)1、使用<link>元素調(diào)用并應(yīng)用外部CSS文件2、使用<...
HTML引用css樣式有三種方法,那么,有哪三種方法呢?本篇文章就來給大家詳細(xì)介紹一下html引用css文件的三種方法。
將樣式表應(yīng)用于HTML文檔和CSS中的XHTML文檔大致可分為以下三種方法。(推薦教程:css視頻教程)
1、使用<link>元素調(diào)用并應(yīng)用外部CSS文件
2、使用<style>元素應(yīng)用于文檔單元
3、通過向元素添加樣式屬性來應(yīng)用樣式
使用<link>元素調(diào)用并應(yīng)用外部CSS文件
創(chuàng)建一個(gè)CSS文件,與HTML文件分開描述樣式表,并從HTML文件中調(diào)用它。對(duì)于調(diào)用,通過描述HTML文檔的<head>元素中的<link>元素來指定外部CSS文件。要通知瀏覽器等應(yīng)用的樣式基于CSS,請(qǐng)為<link>元素的type屬性的值指定text / css。考慮到與XHTML的兼容性,易于修改樣式等,建議以這種方式設(shè)置樣式表。
樣式表部件在外部文件(xxx.css)中描述。
p {color:blue; line-height:1.5;}
HTML源代碼
<html>
<head>
<link rel =“ stylesheet ”type =“ text / css ”href =“ xxx.css ”>
</ head>
<body>
<p>這是一個(gè)段落</ p>
</ body>
</ html>
使用<style>元素應(yīng)用于文檔單元
在HTML文檔的<head>元素中編寫<style>元素,并為每個(gè)文檔設(shè)置樣式表。指定text / css作為<style>元素的type屬性的值,以通知瀏覽器等應(yīng)用的樣式基于CSS。
此外,使用<! - - >注釋樣式表部分是為了防止<style>元素的內(nèi)容顯示在與樣式表不對(duì)應(yīng)的舊瀏覽器中。但是,由于近年來大多數(shù)瀏覽器都支持<style>元素,即使省略<! -- 和-->,也幾乎沒有問題。
<html>
<head>
<style type="text/css">
<!--
p {color:blue; line-height:1.5;}
-->
</style>
</head>
<body>
<p>這是一個(gè)段落。</p>
</body>
</html>
通過向元素添加樣式屬性來應(yīng)用樣式
向元素添加樣式屬性,并直接在HTML源代碼中描述樣式規(guī)范。為了通過style屬性指定樣式,為了通知瀏覽器等文檔中使用的樣式表是CSS,在<head>元素中添加<meta>元素并指定樣式語言指定text / css作為值。在許多情況下,即使您沒有指定,也會(huì)由瀏覽器自動(dòng)判斷,但您也應(yīng)該編寫它以避免出現(xiàn)故障。
樣式屬性的樣式指定對(duì)于部分區(qū)分樣式的優(yōu)先級(jí)很有用,但隨著HTML源變得復(fù)雜,它往往會(huì)使樣式管理復(fù)雜化。當(dāng)旨在實(shí)現(xiàn)高效的樣式管理時(shí),通常將CSS部分轉(zhuǎn)換為外部文件。
示例:直接使用樣式屬性應(yīng)用樣式表
<html>
<head>
<meta name="Content-Style-Type" content="text/css">
</head>
<body>
<p style="color:blue; line-height:1.5;">這是一個(gè)段落。</p>
</body>
</html>
以上就是html怎么引用css樣式?html引用css文件的三種方法介紹的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。