CSS样式表的引入与选择器详解-CSDN博客

本文链接：https://blog.csdn.net/weixin_51775736/article/details/121898727

本文详细介绍了CSS的三种引入方式：外部样式表、内部样式表和行内样式表，以及CSS选择器的基本用法，包括元素选择器、id选择器、class选择器、后代选择器和群组选择器，帮助读者深入理解CSS布局和样式控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、CSS引入方式
二、CSS选择器

一、CSS引入方式

1.外部样式表★

所谓的外部样式表，指的是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。
语法：

<link rel="stylesheet" type="text/css" href="文件路径" />

rel即relative的缩写，它的取值是固定的，即stylesheet，表示引入的是一个样式表文件（即CSS文件）。

type属性取值也是固定的，即"text/css"，表示这是标准的CSS。
link标签放在head标签内

2.内部样式表

内部样式表，指的是把HTML代码和CSS代码放到同一个HTML文件中。其中，CSS代码放在style标签内，并且style标签是放在head标签内部的。CSS样式在style内定义。

<style type="text/css">
    ……
</style>

3.行内样式表

行内样式表跟内部样式表类似，也是把HTML代码和CSS代码放到同一个HTML文件。但是两者有着本质的区别：内部样式表的CSS是在“style标签”内定义的，而行内样式表的CSS是在“标签的style属性”中定义的。
举例：
内部样式表：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        div{color:red;}
    </style>
</head>
<body>
    <div>绿叶，给你初恋般的感觉。</div>
    <div>绿叶，给你初恋般的感觉。</div>
    <div>绿叶，给你初恋般的感觉。</div>
</body>
</html>

行内样式表：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <div style="color:red;">绿叶，给你初恋般的感觉。</div>
    <div style="color:red;">绿叶，给你初恋般的感觉。</div>
    <div style="color:red;">绿叶，给你初恋般的感觉。</div>
</body>
</html>

+++++++++++++++++++++++

二、CSS选择器

1.元素选择器

元素选择器，就是选中相同的元素，然后对相同的元素定义同一个CSS样式。
在这里插入图片描述

2.id选择器

我们可以为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式，这就是id选择器。不过要注意一点，在同一个页面中，是不允许出现两个相同的id的。这个跟“没有两个人的身份证号相同”是一样的道理。
在这里插入图片描述

3.class选择器

class选择器，也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”定义相同的class属性，然后针对拥有同一个class的元素进行CSS样式操作。

在这里插入图片描述

4.后代选择器

后代选择器，就是选择元素内部中所有的某一种元素，包括子元素和其他后代元素（如“孙元素”）。
在这里插入图片描述
父元素和后代元素必须要用空格隔开，从而表示选中某个元素内部的后代元素。

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #father1 div {color:red;}
        #father2 span{color:blue;}
    </style>
</head>
<body>
    <div id="father1">
        <div>绿叶学习网</div>
        <div>绿叶学习网</div>
    </div>
    <div id="father2">
        <p>绿叶学习网</p>
        <p>绿叶学习网</p>
        <span>绿叶学习网</span>
    </div>
</body>
</html>

#father1 div {color:red;}表示选择“id为father1的元素”下的所有div元素，然后定义它们的文本颜色为红色。

#father2 span{ color:blue;}表示选择“id为father2的元素”下的所有span元素，然后定义它们文本颜色为蓝色。

5.群组选择器

群组选择器，指的是同时对几个选择器进行相同的操作。

语法：
在这里插入图片描述
举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        h3, div, p, span {color:red;}
    </style>
</head>
<body>
    <h3>绿叶学习网</h3>
    <div>绿叶学习网</div>
    <p>绿叶学习网</p>
    <span>绿叶学习网</span>
</body>
</html>