CSS的四種引入方式

任平生78發表於2017-08-01
CSS

1.行內式

行內式是在標記的style屬性中設定CSS樣式.

<p style="color:red;background-color: yellow">hello world</p>

這種方式沒有體現出CSS的優勢.因此不推薦使用.

2.嵌入式

嵌入式是將.CSS樣式集中寫在網頁的<head></head>下的<style></style>標籤對裡.

格式如下:

<head>
    <meta charset="utf-8">
    <title>
        index
    </title>
    <style>
        s1 {
            color: red;
            background-color: yellow
        }
    </style>
</head>
<body>
</body>

3.連結式

將一個.css檔案引入HTML檔案中

<link rel="stylesheet" href="index.css" type="text/css"/>

4.匯入式

將一個獨立的CSS檔案引入HTML檔案中,匯入式使用CSS規則引入外部CSS檔案,style標記也是寫在<head>標記中.

使用語法如下:

<style type="text/css">
    <!--index.css指的是CSS檔案的路徑-->
    @import "index.css";
</style>

注意:

匯入式會在整個網頁裝載完成後再裝載CSS檔案,因此如果網頁比較大則會出現先顯示CSS無樣式的頁面,
閃爍一下之後,再出現網頁的樣式的問題.這是匯入式固有的一個缺陷.

使用連結式則會在網頁檔案主體裝載前裝載CSS檔案,因此顯示出來的網頁從一開始就是帶CSS樣式的效果的.

它不會像匯入式那樣先顯示無樣式的網頁,然後再顯示有樣式的網頁,這是連結式的優點.


相關文章