CSS:外部樣式表/內部樣式表/內聯樣式

來源:互聯網
上載者:User

標籤:html   css   樣式   

在html中,引用CSS樣式有3中方式:外部樣式表,內部樣式表,內聯樣式。

本文代碼整理自w3school:http://www.w3school.com.cn

(1)外部樣式表,指在html檔案的head標籤中,使用link引用另一個css檔案中定義的樣式。如果某個樣式表需要被使用許多次,使用外部樣式表是最好的選擇。

html檔案:

<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><title>引用外部css樣式</title><!--外部樣式表--><head><link rel="stylesheet" type="text/css" href="css/baseStyle.css"></head><body><h1>h1層級的標題:紅色</h1><h2>h2層級的標題:綠色</h2><h3>h3層級的標題:藍色</h3><p>這是一個段落:灰色</p></body></html>
CSS樣式,baseStyle.css:

h1 {color:red}h2 {color:green}h3 {color:blue}p {color:gray}

(2)內部樣式表,指在html檔案的head標籤內聲明樣式。當單個文檔需要特殊的樣式時,就應該使用內部樣式表。

<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><title>內部樣式表</title><!--內部樣式表--><head><style type="text/css">h1 {color:red}h2 {color:green}h3 {color:blue}p{color:gray}</style></head><body><h1>h1層級的標題:紅色</h1><h2>h2層級的標題:綠色</h2><h3>h3層級的標題:藍色</h3><p>這是一個段落:灰色</p><br/><br/></body></html>
(3)內聯樣式(一般不建議使用),指在某個html內指定改標籤內容的樣式。由於要將表現和內容混雜在一起,內聯樣式會損失掉樣式表的許多優勢。

<!--內聯樣式--><!--不帶底線的連結--><a href="http://www.baidu.com" style="text-decoration:none" target="_blank">這是一個不帶底線的連結</a>


CSS:外部樣式表/內部樣式表/內聯樣式

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.