CSS样式的展现方式和效果顺序

最新推荐文章于 2024-08-11 23:43:12 发布

WiniceS

最新推荐文章于 2024-08-11 23:43:12 发布

阅读量1k

点赞数

分类专栏： web前端学习记录文章标签： css样式顺序

本文链接：https://blog.csdn.net/WiniceS/article/details/72860106

版权

web前端学习记录专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS类样式的展现方式

一般在HTML文件中加入样式有3种方式：

1. 内部样式

内部样式是指在HTML文件的加入<style></style>，然后在其内部加入css样式。

<style>
    p{
    color:red;
    }
</style>

一般这个样式会加在HTML<head>部分中。

2. 内联样式

内联样式就是指样式直接写在HTML的元素中。

<p style="color:red;">xxx</p>

3. 外部样式

外部样式是有外部的样式文件链接到HTML文件中，从而展现样式效果。
又两种样式链接方式：
第一种方式：
使用<link>来进行链接。

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

其中rel属性是指定了HTML文件与所链接的文件之间的关系，一般常见的是stylesheet了，因为主要是用于链接css样式文件。
type属性是规定了文档的信息类型，type属性在有href的情况下可以选择MIME_type这个值，这个值会根据被连接文档的类型而定的。
href是指文档的路径。
rel属性还有一个值icon也较为常用。这个主要用在网页图标（这里只是提供了一个方法）

 <link rel="icon" href="images/胡萝卜之怒小logo.ico" type="MIME_type" >

其效果如下图所示：
网页logo

关于<link>的相关属性可以详见w3cschool的<link>标签。

第二种方式：

<style>
@import+空格+url（样式文件路径）
</style>

第二种样式的链接方式的一般不常用，通常都使用第一中链接方式。

CSS样式显示效果顺序

我们现在知道CSS样式的展现方式有3种，其选择器也有几种情况：
1. 标签选择器:p{…}
2. 类选择器：.class{…} (class=”class”)
3. ID选择器：#id{…} (id=”id”)
4.派生选择器

测试代码如下：
HTML文件：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <style>
        #ceshi1{
            color: blue;
        }
        #ceshi2{
            color: red;
        }
    </style>
</head>
<body>
        <p id="ceshi1" class="ceshi" style="color:rebeccapurple">测试有内联样式和内部样式以及外部样式-有内联样式有内部样式有外部样式</p>
        <p id="ceshi2" class="ceshi">测试有内联样式和内部样式以及外部样式-无内联样式有内部样式有外部样式</p>
        <p id="ceshi3" class="ceshi">测试有内联样式和内部样式以及外部样式-无内联样式无内部样式有外部样式</p>
        <p class="ceshi">测试有class，有元素的情况</p>
        <p>测试单元素的情况下</p>
        <div>
            <ul>
                <li id="cs1">测试1</li>
                <li id="cs2">测试2</li>
                <li id="cs3">测试3</li>
                <li id="cs4">测试4</li>
                <li class="cs5">测试5</li>
                <li id="cs6">测试6</li>
                <li id="cs7">测试7</li>
            </ul>
        <p class="cs5">测试8</p>
        <p>测试9</p>
        <a href="index.html">link</a>
        </div>
</body>

CSS文件：

.ceshi{
    color:purple;
}

#ceshi1{
    color: green;
}
#ceshi2{
    color:#ff5689;
}
#ceshi3{
    color: yellow;
}
p{
    color: brown;
}
li.cs5{
    color:rosybrown;
}
li#cs2{
    color: olive;
}

div p{
    color: orange;
}
div>ul>li{
    color: palegreen;
}
 #cs3{
    color:slategrey;
}
#cs6{
    color: red;
}
#cs6{
    color: green;
}
a:link{
    color: orangered;
}
a{
    color: greenyellow;
}

首先前五个效果如下：

测试CSS样式效果顺序1

从图中可以看出CSS样式效果顺序如下:

内联样式>内部样式>外部样式

ID选择器>类选择器>标签选择器

后面的div中可以看出:
派生选择器中div p比p更为特定，所以呈现的是orange颜色；
选择器li#cs2和li.cs5比div>ul>li更特定，所以呈现的颜色分别是olive和rosybrown，而不是palegreen；
选择器#cs6有两个样式，但是最终呈现的是green颜色，说明在相同或者同样特定的情况下，样式会采取更后面的来呈现；
选择器a:link和a相比，a:link更特定，所以会呈现orangered颜色。

[测试CSS样式效果顺序2