怎麼引用css-前端問答-PHP中文網

怎麼引用css

PHPz

發布： 2023-04-24 09:42:06

原創

2006 人瀏覽過

CSS是層疊樣式表的縮寫，是一種用來描述網頁樣式的語言。當我們想要為網頁添加樣式時，就需要使用CSS來實作。在開發一個網頁時，往往會使用多個CSS檔案和樣式表，因此正確的引用CSS非常重要。本文將介紹如何引用CSS。

一、內部樣式表

內部樣式表指的是將CSS程式碼直接寫在HTML檔案中的樣式表。這種方法適用於通用的樣式，如頁面背景顏色、文字大小以及連結顏色等。在HTML文檔的頭部定義<style>標籤，再在其內部編寫CSS程式碼，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>内部样式表</title>
        <style>
            /* CSS代码 */
            body {
                background-color: #f8f8f8;
            }
            h1 {
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1>欢迎来到我的网站</h1>
        <p>这是一个演示如何引用CSS的网页。</p>
    </body>
</html>

登入後複製

二、外部樣式表

外部樣式表通常會放在單獨的CSS檔案中，然後在HTML檔案中透過<link>標籤引用。這種方法適用於多個頁面使用相同的樣式時，可以節省程式碼的重複。首先建立一個CSS文件，例如style.css，然後在HTML文件的頭部添加<link>標籤，將CSS文件引用進來，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>外部样式表</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>欢迎来到我的网站</h1>
        <p>这是一个演示如何引用CSS的网页。</p>
    </body>
</html>

登入後複製

在CSS檔案中編寫樣式，如下所示：

/* style.css */
body {
    background-color: #f8f8f8;
}
h1 {
    color: blue;
}

登入後複製

三、行內樣式

行內樣式指的是將CSS程式碼寫在標籤的style屬性中，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>行内样式</title>
    </head>
    <body>
        <h1 style="color:blue;">欢迎来到我的网站</h1>
        <p style="font-size:16px;">这是一个演示如何引用CSS的网页。</p>
    </body>
</html>

登入後複製

這種方法適用於僅為一個標籤設定樣式的情況，例如設定特定的邊框樣式等。需要注意的是，行內樣式將優先於內部樣式表和外部樣式表。

總結：

以上介紹的三種方法都可以用來引用CSS。內部樣式表適用於少量樣式的情況，外部樣式表適用於多個頁面使用相同樣式的情況，而行內樣式適用於只有一個標籤需要設定樣式的情況。無論哪一種方法，正確引用CSS可以提高網頁的可維護性和效率，使得修改樣式更方便。

以上是怎麼引用css的詳細內容。更多資訊請關注PHP中文網其他相關文章！