CSS的介绍及常见选择器的使用

最新推荐文章于 2024-03-17 15:59:57 发布

huangche007

最新推荐文章于 2024-03-17 15:59:57 发布

阅读量994

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端开发

本文链接：https://blog.youkuaiyun.com/u010624986/article/details/53727192

前端开发专栏收录该内容

7 篇文章

订阅专栏

本文介绍了CSS的基础知识及其常见选择器的应用，包括标签选择器、ID选择器和类选择器，详细讲解了每种选择器的特点及使用场景。

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

CSS的介绍及常见选择器的使用

css是cascading style sheet 层叠式样式表的简写。“层叠式”的意思。CSS即层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。

CSS整体感知

我们先来看一段很简单的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS整体感知</title>
    <style>
        p{
            color: #f00;
            font-size: 22px;
            text-align: center;
            font-style: italic;
            font-weight: bold;
            text-decoration: underline;
        }

        h1{
            font-size: 33px;
            color: aqua;

        }
    </style>
</head>
<body>
    <h1>我是一个主标题</h1>
    <p>我是段落1</p>
    <p>我是段落2</p>
</body>
</html>

效果图如下：
这里写图片描述

我们发现字体有了颜色，有了下划线，而且还可以字体还可以是斜体，这样的效果就是CSS来实现的。
再上一张图
这里写图片描述

从上图我们可以发现啊，原来我们字体的颜色，字体出现下划线等的效果其实就是通过设置CSS样式实现，那么这CSS到底该怎么书写，也就是它里面的规则是什么尼？下面将给大家介绍。

CSS的书写格式

我们写css的地方是style标签，就是“样式”的意思，写在head里面，而对于css的引用，一般分为两种：

内部样式表：在内部添加：<style type="text/css">......</style>
外部样式表：将CSS放在文件(如index.css)中，并在内部添加：<link rel="stylesheet" type="text/css" href="index.css"/>

css对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。
那么书写一个CSS样式的语法大概是这样的：

选择器{
    k:v;
    k:v;
    k:v;
    k:v;
}
选择器{
    k:v;
    k:v;
    k:v;
    k:v;
}

是不是感觉CSS其实也就这样，没有多少神秘的东西是吧，看到这里你也可能对于上述代码中出现的CSS的属性感到陌生，不知道它们是什么意思，那么接下来就介绍一些在CSS中常用的属性。

CSS中常用的一些属性

字符颜色：color:red;color属性的值，可以是英语单词，比如red、blue、yellow等等；也可以是rgb、十六进制
字号大小：font-size:40px;font就是“字体”，size就是“尺寸”。px是“像素”。
单位必须加，不加不行。
背景颜色：background-color: blue;background就是“背景”
加粗：font-weight: bold;font是“字体” weight是“重量”的意思，bold粗。
不加粗：font-weight: normal;normal就是正常的意思
斜体：font-style: italic;italic就是“斜体”
不斜体：font-style: normal;
下划线：text-decoration: underline;decoration就是“装饰”的意思。
没有下划线：text-decoration:none;

经过一番的解释是不是对上面的代码有些熟悉了，那下面介绍一下CSS中常见的选择器。

CSS的标签选择器

上一段代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            color: red;
            font-size: 20px;
            font-weight: bold;
        }

        span {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
<!--很深都可以选择到-->
    <!--标签选择器选择所有，不能选择具有相同语义的个性-->
    <ul>
        <li>
            <ul>
                <li>
                    <ul>
                        <li>
                            <span>我是span</span>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

关于标签选择器，需要注意三点：

所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input
无论这个标签藏的多深，一定能够被选择上
选择的所有，而不是一个。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”的。

CSS的id选择器

语法格式：

#id名{
    k:v;
    k:v;
    k:v;
    k:v;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p2 {
            color: #ff493d;
        }
        p{
            font-size: 30px;
        }
    </style>
</head>
<body>
<!--一个页面中不能有相同的id，哪怕它们不是相同的额类型-->
    <p>我是段落1</p>
<!--第二个p同时被两个样式给选择上了，这就是“层叠”的第一个含义-->
    <p id="p2">我是段落2</p>
    <p>我是段落3</p>
</body>
</html>

我们可以看到，上面的代码第二个p标签里面有一个id属性，而在css样式书写的地方是以#开头，后面紧跟着的就是该p标签的id属性的名称。id选择器的选择符是“#”

任何的HTML标签都可以有id属性。表示这个标签的名字。

这个标签的名字，可以任取，但是需要遵循以下规则：

只能有字母、数字、下划线
必须以字母开头
不能和标签同名。比如id不能叫做body、img、a

一个HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为p1的p，一个id为p1的div，是非法的！
这里写图片描述

效果图如下：
这里写图片描述

一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义

如果选择器冲突了，比如id选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？
实际上，css有着非常严格的计算公式，能够处理冲突，我会在今后的文章中给大家介绍。最后看一下CSS基础选择器中的类选择器

CSS的类选择器

.就是类的符号。类的英语叫做class。
所谓的类，就是class属性，class属性和id非常相似，任何的标签都可以携带class属性。

class属性可以重复，比如，页面上可能有很多标签都有become-red这个类：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .become-red {
            color: red;
        }

        .my-shadow {
            text-shadow: 2px 2px 2px #ccc;
        }
    </style>
</head>
<body>
    <h4>我是h4</h4>
    <h4 class="my-shadow">我是h4</h4>
    <!--同一个标签，可能同时属于多个类，用空格隔开：-->
    <h4 class="become-red my-shadow">我是h4</h4>
    <p>我是段落</p>
    <p class="become-red">我是段落</p>
    <p>我是段落</p>
<!--这里我们想让第三个h4和第二个p标签实现文字变红-->
</body>
</html>

同一个标签，可能同时属于多个类，用空格隔开：

 <h4 class="become-red my-shadow">我是h4</h4>

这样，这个h4 就同时属于become-red类，也同时属于my-shadow类。
效果图:
这里写图片描述

写到这里，来总结一下:

class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；
同一个标签可以同时携带多个类。

既然我们学习了CSS的三个基本选择器，那么下面给大家出一道题目，请用CSS实现下面的效果:

<p id="p1">我是段落1</p>
<p id="p2">我是段落2</p>
<p id="p3">我是段落3</p>

这里写图片描述

相信大家可能说，这有什么难的，其实这的却很简单，主要想考察大家对于CSS类选择器的使用情况，下面是两种实现方式。

id选择器实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1 {
            font-size: 50px;
            color: green;
        }

        #p2 {
            text-decoration: underline;
            color: green;
        }

        #p3 {
            font-size: 50px;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<!--不好的做法-->
<p id="p1">我是段落1</p>
<p id="p2">我是段落2</p>
<p id="p3">我是段落3</p>
</body>
</html>

类选择器实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .p1 {
            font-size: 50px;
       }

       .p2 {
           color: green;
       }
       .p3 {
           text-decoration: underline;
       }
    </style>
</head>
<body>
<!--类选择器比较好的做法，在真正开发中，不要试图用一个选择器把一个标签的所有样式给写完   -->
<p class="p1 p2">我是段落1</p>
<p class="p2 p3">我是段落2</p>
<p class="p3 p1">我是段落3</p>
</body>
</html>

你会发现是不是用类选择器实现上面的效果更加的灵活、方便。也就是说：

不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。
每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

那么我们在实际开发中是选择id选择器还是类选择器勒,尽可能的用class，除非极特殊的情况可以用id。

因为id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。也就是说类上样式，id上行为

看下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            width: 90px;
            height: 90px;
            color: #ff493d;
        }
        #p2 {
            border: 8px solid #4cff59;
        }
    </style>
</head>
<body>
<!--到底用id还是用class？-->
<!--答案：尽可能的用class，除非极特殊的情况可以用id。-->
<!--原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。-->
<h1>一般来说，在使用CSS的时候，不用id选择器。id选择器是给js用的</h1>
    <p>我是段落1</p>
    <p id="p2">我是段落2</p>
    <p>我是段落3</p>
    <script type="text/javascript">
        var box = document.getElementById("p2");
        var a=0;
        setInterval(function () {
            a++;
            box.style.marginLeft = a + "px";
        },30)
    </script>
</body>
</html>