CSS层叠样式表详解

更新时间：2021-08-27 10:52:41 来源：动力节点浏览1038次

层叠样式表(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图片更改大小

CSS层叠样式表详解

内联 CSS：

内部或嵌入式 CSS：

外部 CSS：

CSS 的属性：

JVM

多线程下载器项目实战

Java日志框架全集（选学）

高并发解决方案（选学）

零基础能学Java吗？

零基础能学Java吗？

零基础能学Java吗？