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表示被鏈接文檔可顯示的設備類型。

  3. XML樣式表處理指令:只適用於XML文檔
    <?xml-stylesheet type="text/css" href="basic.css" media="all"?>

     


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM