html如何引用css樣式

發(fā)布時(shí)間：2020-09-26 15:08:12 來源：億速云閱讀：140 作者：小新欄目：web開發(fā)

小編給大家分享一下html如何引用css樣式，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

將樣式表應(yīng)用于HTML文檔和CSS中的XHTML文檔大致可分為以下三種方法。

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)用它。對于調(diào)用，通過描述HTML文檔的<head>元素中的<link>元素來指定外部CSS文件。要通知瀏覽器等應(yīng)用的樣式基于CSS，請為<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)容顯示在與樣式表不對應(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作為值。在許多情況下，即使您沒有指定，也會由瀏覽器自動判斷，但您也應(yīng)該編寫它以避免出現(xiàn)故障。

樣式屬性的樣式指定對于部分區(qū)分樣式的優(yōu)先級很有用，但隨著HTML源變得復(fù)雜，它往往會使樣式管理復(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樣式有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

html如何引用css樣式

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽