css引入的幾種方式

我是這海底的鹹魚發表於2018-11-14
CSS

第二章：css工作原理

一、為文件新增樣式的三種方法：

行內樣式：

1. 行內樣式：行內樣式是寫在html標籤的style屬性裡面的。
2. 特點：行內樣式的作用非常有限，行內樣式只能影響它所在的標籤，而且總歸覆蓋嵌入樣式和連結樣式。
複製程式碼
    <p>This paragraph simply takes on the browser's default paragraph style.</p>
    <p style="font-size: 12px; font-weight:bold; font-style:italic; color:red;">
        Byadding inline CSS styling to this paragraph, you override the default styles.
    </p>
複製程式碼

嵌入樣式：

1. 嵌入樣式：嵌入的css樣式是寫在html文件header元素中的。
2. 特點：嵌入樣式僅僅作用於當前頁面，頁面樣式會覆蓋外部樣式中的css樣式，但是會被行內樣式覆蓋。
複製程式碼
    <head>
        <style type="text/css">
            h1 {font-size:16px;}
            p {color:blue;}
        </style>
    </head>
複製程式碼

連結樣式： 1. 連結樣式：在建立包含多個頁面的網站時，需要把樣式儲存在一個單獨的.css檔案裡，這個檔案就叫演樣式表，使用link引入即可。 2. 連結樣式可以做到全域性統一，作用於整個網站，方便以後的統一管理。

除了以上三種方式外，還有一種在樣式表中連結其他樣式表的方法，那就是用@import指令，規則是：@import url('路徑')， 需要注意的是@import指令必須出現在樣式表中其他的樣式之前，否則@import引用的樣式表不會生效。

相關文章