CSS層疊樣式表詳解

更新時間：2021-08-27 10:52:41 來源：動力節點瀏覽1347次

層疊樣式表(CSS)用于在包含HTML元素的網頁中設置樣式。它設置網頁元素的背景顏色、字體大小、字體系列、顏色等屬性。

下面給出了三種類型的CSS：

內聯 CSS

內部或嵌入式 CSS

外部 CSS

內聯 CSS：

內聯 CSS 在 body 部分包含的 CSS 屬性與元素一起被稱為內聯 CSS。這種樣式是在 HTML 標簽中使用 style 屬性指定的。

例子：

html

<!DOCTYPE html>
<html>
    <head>
        <title>Inline CSS</title>
    </head>      
    <body>
        <p style = "color:#009900; font-size:50px;
                font-style:italic; text-align:center;">
            GeeksForGeeks
        </p>  
    </body>
</html>

輸出：

內部或嵌入式 CSS：

當單個 HTML 文檔必須具有唯一樣式時，可以使用此選項。CSS 規則集應該位于頭部部分的 HTML 文件中，即 CSS 嵌入在 HTML 文件中。

例子：

<!DOCTYPE html>
<html>
    <head>
        <title>Internal CSS</title>
        <style>
            .main {
                text-align:center; 
            }
            .GFG {
                color:#009900;
                font-size:50px;
                font-weight:bold;
            }
            .geeks {
                font-style:bold;
                font-size:20px;
            }
        </style>
    </head>
    <body>
        <div class = "main">
            <div class ="GFG">GeeksForGeeks</div>             
            <div class ="geeks">
                A computer science portal for geeks
            </div>
        </div>
    </body>
</html>

輸出：

外部 CSS：

外部CSS包含單獨的CSS文件，該文件僅包含借助標簽屬性(例如 class、id、heading 等)的樣式屬性。CSS 屬性寫在一個單獨的文件中，擴展名為 .css，應該使用鏈接標簽鏈接到 HTML 文檔。這意味著對于每個元素，樣式只能設置一次，并且將應用于整個網頁。

示例：下面給出的文件包含CSS屬性。此文件以 .css 擴展名保存。例如：geeks.css

身體 {
    背景顏色：粉藍色；
}
。主要的 {
    文字對齊：居中；   
}
.GFG{
    顏色：#009900；
    字體大小：50px；
    字體粗細：粗體；
}
#極客{
    字體樣式：粗體；
    字體大小：20px；
}

下面是使用創建的外部樣式表的 HTML 文件

link標簽用于鏈接外部樣式表和 html 網頁。

href屬性用于指定外部樣式表文件的位置。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="geeks.css"/>
    </head>  
    <body>
        <div class = "main">
            <div class ="GFG">GeeksForGeeks</div>
            <div id ="geeks">
                A computer science portal for geeks
            </div>
        </div>
    </body>
</html>

輸出：

CSS 的屬性：

內聯 CSS 具有最高優先級，然后是內部/嵌入式，其次是外部 CSS，其優先級最低。可以在一頁上定義多個樣式表。如果對于 HTML 標簽，樣式定義在多個樣式表中，則將遵循以下順序。

由于內聯具有最高優先級，因此在內部和外部樣式表中定義的任何樣式都會被內聯樣式覆蓋。

Internal 或 Embedded 在優先級列表中排名第二，并覆蓋外部樣式表中的樣式。

外部樣式表的優先級最低。如果內聯或內部樣式表中沒有定義樣式，則將外部樣式表規則應用于 HTML 標記。

以上就是動力節點小編介紹的"CSS層疊樣式表詳解"，希望對大家有幫助，想了解更多可查看Java教程。動力節點在線學習教程，針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識，讓同學們更好更方便的學習和了解Java編程，感興趣的同學可以關注一下。

CSS教程

上一篇CSS下拉菜單示例下一篇CSS圖片更改大小

大战熟女丰满人妻av-荡女精品导航-岛国aaaa级午夜福利片-岛国av动作片在线观看-岛国av无码免费无禁网站-岛国大片激情做爰视频

CSS層疊樣式表詳解

內聯 CSS：

內部或嵌入式 CSS：

外部 CSS：

CSS 的屬性：

JVM

多線程下載器項目實戰

Java日志框架全集（選學）

高并發解決方案（選學）

零基礎能學Java嗎？

零基礎能學Java嗎？

零基礎能學Java嗎？

關于我們

課程中心

在線課程

資料廣場

全國免費電話