天天看點

HTML三種樣式引入方式

本文對HTML有三種樣式引入方式進行了介紹,包括行内樣式(Inline Styles)、嵌入式樣式表(Embedded Style Sheets)、外部樣式表(External Style Sheets)。

HTML三種樣式引入方式

  HTML有三種樣式引入方式:行内樣式(inline Styles)、嵌入式樣式表(Embedded Style Sheets)、外部樣式表(External Style Sheets)。

一、行内樣式(Inline Styles)

  又稱内聯表單樣式,它直接寫在标簽内部,用

style

屬性聲明。行内樣式不能實作所有的樣式,比如

hover

@import

<p style="color: red; background: yellow;">Look out!This text is alarmingly presented!</p>
           

二、嵌入式樣式表(Embedded Style Sheets)

  又稱内部樣式表,必須寫在

<head>

标簽中,用

<style>

标簽申明。需要注意,XML語言有可能不支援嵌入式表單的寫法,一定要檢查語言的DTD。

<html>
<head>
<title>Stylin\'!</title>
<style type="text/css">
h1 {color: purple;}
p {font-size: smaller; color: gray;}
</style>
</head>
...
</html>
           

三、外部樣式表(External Style Sheets)

  外部樣式表較其他兩種方式,優勢在于:1. 利用通用樣式表,減少重複樣式的備援編碼和修改;2. 内容與樣式分開存儲,加快了編碼的效率,同時增加了文檔的可讀性;3.外部樣式表可以被緩存,減少了帶寬的使用,加快了網頁打開的速度。

  外部樣式表有三種引入格式,具體如下:

  1. @import 指令
    @import url(site.css);
               
  2. link 元素
    <link rel="stylesheet" type="text/css" href="web.css" media="screen">
               

  rel表示文檔與被連結文檔之間的關系,比如

rel="stylesheet"

表示連結文檔為文檔的外部樣式表,

rel="contents"

表示連結文檔為文檔的目錄;type表示文檔的MIME類型,href表示被連結文檔的位置;media表示被連結文檔可顯示的裝置類型。

  1. XML樣式表處理指令:隻适用于XML文檔
    <?xml-stylesheet type="text/css" href="basic.css" media="all"?>
               
  2. HTTP連結:有些浏覽器不支援這種方式

  注意:樣式表的加載順序應當滿足:a)被引用的樣式表要在引用它的樣式表前面;b)樣式優先級高的樣式表在優先級低的樣式表的後面,比如局部定義表單section.css要在全局樣式定義表單mian.css的後面。

參考資料:

[1] CSS Pocket Reference