CSS的基础：三种引入方式，三种选择器，以及三种选择器配置样式的优先级

最新推荐文章于 2026-05-16 18:00:38 发布

原创最新推荐文章于 2026-05-16 18:00:38 发布 · 345 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

CSS基础：三种引入方式

1.行内式

通过style属性直接在元素里面配置样式

<1>:color配置元素颜色 <2>:font-size:配置元素大小尺寸（单位用rpx浏览器识别不出来）

<body>
    <p>行内式：通过style属性直接在元素里面配置样式</p>
    <p style="color: blueviolet;font-size: 20px;">行内式：通过style属性直接在元素里面配置样式</p>
    
</body>

运行结果如下图（第一行为对照）

2.内嵌式

（1）通过style标签和选择器里配置样式

（2）标签选择器：直接用标签名选中某个元素

（3）需要注意的是：标签选择器需要用style标签在<head>标签中给元素配置属性

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础：三种引入方式</title>
    <style>
        h2{
            color: rgb(47, 150, 109);
        }
    </style>
</head>
<body>
    <h2>通过style标签和选择器里配置样式</h2>


</body>

运行如下：

3.外链式

<1>外链式允许相对路径与绝对路径和URL

<2>注意：外链式不用style标签，直接在<head>标签中使用<link rel="stylesheet" href=""> 标签来通过相对路径与绝对路径来给元素配置样式

<3>创建时文件后缀需为 .css

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础：三种引入方式</title>
    <style>
    <link rel="stylesheet" href="./web.css">
</head>
<body>
      <h3>外链式允许相对路径与绝对路径和URL</h3>

</body>

文件里面的代码配置为

h3{
    color: cyan;
    font-size: 20px;
}

运行结果如下:

三种选择器

1.标签选择器

<1>标签选择器：选择所有标签名一样的元素

<2>通过选择同样的标签名配置样式

<3>需要注意的是：需要用style标签在<head>标签中给元素配置属性

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础：三种引入方式,三种选择器</title>
<style>
        p{
            color: darkorange;
        }
    </style>
</head>
<body>
    <p>标签选择器</p>
</body>

运行结果如图：

2.类选择器

<1>类选择器:根据元素所属的类选中元素

<2>通过在<p>标签内用<class>="类名"给标签定义

<3>同样，类选择器也一样要通过用style标签在<head>标签中给元素配置属性

<4>使用类标签器是需要用" .+类名 "进行引用

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础：三种引入方式,三种选择器</title>
    <style>
   .ID{
        color: darkgreen;
       }

    </style>
</head>
<body>
    <p class="ID">id选择器</p>

</body>

运行结果如下：

3.id选择器

<1>id选择器:根据元素唯一的id选中元素

<2>通过在<p>标签内用<id>="ID名"给标签定义

<3>同样，id选择器也一样要通过用style标签在<head>标签中给元素配置属性

<4>使用id标签器是需要用" #+ID名 "进行引用使用

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础：三种引入方式,三种选择器</title>
    <style>
    #p1{
            color: cornflowerblue;
        }
    </style>
</head>
<body>
    <p id="p1">类选择器</p>


</body>

运行结果如下图所示：

特别注意

1.浏览在渲染css样式时，先根据优先级渲染，然后对相同优先级的样式按照“后来居上”原则渲染！

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础：三种引入方式,三种选择器</title>
    <style>
   .ID{
        color: darkgreen;
       }

   .ID{
            color: chartreuse;
        }

    </style>
</head>
<body>
    <p class="ID">id选择器</p>

</body>

第一个id选择器配置的是深绿色，第二个id选择器配置的是荧光绿色，对于相同优先级的，执行后者，运行如下：

2.优先级：行内样式 > id选择器样式 > 类选择器样式 > 标签选择器样式（无需遵循“后来居上”原则）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础：三种引入方式,三种选择器</title>
    <style>
#p1{
       color: cornflowerblue;
    }
.A{
       color: brown;
    }

    </style>
</head>
<body>
    <p id="p1" class="A">类选择器</p>

</body>

id选择器配置的颜色时蓝色，类选择器配置的是棕色，因为id选择器样式 > 类选择器样式，所以无需遵循后来居上原则。运行结果如下：

标签

#css #javascript #前端 #html