首頁 > 文章 > web前端 > 怎麼在html頁面寫css

怎麼在html頁面寫css

王林原創: 2023-05-09 10:59:372507瀏覽

CSS（層疊樣式表）是用來設計和美化HTML頁面的技術。可以透過HTML文件內的c9ccee2e6ea535a969eb3f532ad9fe89標籤或外部CSS檔案來建立和引用CSS樣式。

下面詳細介紹如何在HTML頁面中寫CSS樣式：

內嵌式
內嵌式是指將CSS樣式直接嵌入到HTML頁面中，使用< ;style>標籤將CSS代碼包裹起來。例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>内嵌式CSS样式表</title>
        <style>
            body {
                background-color: #f0f0f0;
                font-family: Arial, sans-serif;
            }
            h1 {
                color: #333;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>欢迎来到我的网站</h1>
        <p>这是一段普通的文字</p>
    </body>
</html>

在上面的範例中，我們先使用e8e496c15ba93d81f6ea4fe5f55a2244標籤設定文件的字元集，然後在93f0f5c25f18dab9d176bd4f6de5d30e標籤中使用c9ccee2e6ea535a969eb3f532ad9fe89標籤來寫CSS樣式。在c9ccee2e6ea535a969eb3f532ad9fe89標籤內，我們設定了文件背景顏色、字型樣式和標題文字顏色。

注意，c9ccee2e6ea535a969eb3f532ad9fe89標籤必須放在93f0f5c25f18dab9d176bd4f6de5d30e標籤中，並且所有CSS樣式都必須放在c9ccee2e6ea535a969eb3f532ad9fe89標籤內。在6c04bd5ca3fcae76e30b72ad730ca86d標籤內直接使用CSS樣式是無效的。

外部式
外部樣式表是指我們將CSS樣式放在一個獨立的檔案中，然後透過2cdf5bf648cf2f33323966d7f58a7f3f標籤將其引用到HTML頁面中。外部樣式表具有多次使用和維護方便的優點。

在這種情況下，我們需要使用一個帶有.css副檔名的檔案來儲存CSS樣式。該檔案可以放在伺服器上，也可以放在本機的電腦上。例如：

/* css/style.css */

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
    text-align: center;
}

在HTML頁面中，我們需要使用2cdf5bf648cf2f33323966d7f58a7f3f標籤將外部CSS檔案與HTML文件進行關聯。例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>外部式CSS样式表</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <h1>欢迎来到我的网站</h1>
        <p>这是一段普通的文字</p>
    </body>
</html>

在上面的程式碼中，我們使用2cdf5bf648cf2f33323966d7f58a7f3f標籤將style.css檔案與HTML文件關聯起來。注意，href屬性必須指向CSS檔案的URL或相對路徑。如果CSS檔案與HTML文檔位於同一個目錄下，則href屬性可以直接指向CSS檔案名稱。

行內式
行內式是指將CSS樣式直接套用到HTML元素中。而不是在樣式表中定義它們。例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>行内式CSS样式表</title>
    </head>
    <body>
        <h1 style="color: #333; text-align: center;">欢迎来到我的网站</h1>
        <p style="font-family: Arial, sans-serif;">这是一段普通的文字</p>
    </body>
</html>

在行內式中，我們在HTML元素的style屬性中定義CSS樣式。每個屬性必須用分號分隔，屬性值必須用引號包裹。請注意，使用行內式會使HTML程式碼變得混亂，難以維護。因此，在實際專案中通常不建議使用行內式。

總結
在HTML頁面中寫CSS樣式時，可以使用內嵌式、外部式和行內式方式來實作。其中，外部式是最常用的方式，它可以將樣式集中在一個檔案中，方便維護和多次使用。對於內嵌式和行內式，建議僅在必要時使用，否則可能導致HTML程式碼的混亂和難以維護。

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

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：ie載入不了css下一篇：ie載入不了css

看更多