第二章:在HTML文檔中放置CSS的幾種方式

1.內聯樣式表

內聯樣式表也叫內聯引用,就是在任意一個HTML標籤中使用style屬性,在style屬性中使用樣式屬性;
如下:
<p style="font-size:1cm;color:red;border:1px solid blue;background:yellow;">這是一個段落</p>
特點:內聯的樣式比其他方法更加靈活,但需要展示的內容混淆在一起,內聯樣式表會失去一些樣式表的優點。

2.內嵌樣式表

使用HTML的style標記,將CSS嵌入到HTML中:
如下:
<html>
    <head>
        <style>
        /*
            這裏面是CSS的語法
            只能寫CSS語法
            不能使用HTML的註釋,以及任何HTML標記    */
        p{
               font-size:1cm;
               color:red;
               border:1px solid blue;
               background:yellow;
          }
        </style>
    </head>
    <body>
        <p>這是一個段落</p>
    </body>
</html>

3.外部鏈接樣式表

使用獲取的後綴爲CSS的文件專門定義樣式,然後在HTML文件中使用<link>標記(head中寫)將CSS和這個HTML文件結合,link標籤可以有多個:
如下:
CSS文件:
/* 直接寫CSS語法*/
p{
       font-size:2cm;
       color:blue;
  }

HTML文件:
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
        <p>這是一個段落</p>
    </body>
</html>

4.輸入樣式表

輸入樣式表是將一個CSS文件導入另一個CSS文件中:
如下:
@import:url(demo.css);

5.多重樣式表的疊加

  • 如果在同一個選擇器上使用幾個不同的樣式表時,這個屬性值將會疊加幾個樣式表,遇到衝突的地方會以最後定義的爲準;
  • 依照後定義的優先,所以優先級最高的是內聯樣式,內嵌樣式表高於輸入樣式表,鏈入的外部樣式表和內嵌樣式表之間是最後定義的優先級高。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章