前端三件套之css（1）css介绍及基本选择器

青衿白首志

已于 2023-07-05 19:05:18 修改

阅读量297

点赞数

分类专栏：前端可视化系列（持续更新中）文章标签：前端 css javascript css3

于 2022-02-22 18:58:11 首次发布

本文链接：https://blog.csdn.net/qq_62102968/article/details/123055035

版权

前端可视化系列（持续更新中）专栏收录该内容

9 篇文章 1 订阅

订阅专栏

什么是css

最开始初始部分，我们知道，把前端三件套比作一个人，那么，html就是人的骨头框架，css就是衣服裤子等装饰物，JavaScript就是给人编辑各种动作

所以，通过css的学习，我们就可以对我们制作的网页进行一些美化布局

在html文件中想要用css语言进行修改，就要在<head></head>标签中添加<style></style>,而<style>之间即为css语言

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css 语法:
        选择器 {
            修改属性名字:修改属性值;
            修改属性名字:修改属性值;
            修改属性名字:修改属性值;
            .....................
        } */
    </style>
</head>
<body>
    <!-- css语言修改通常用于<div></div>容器标签,当然其他标签也有。 -->
    <div>111111</div>
</body>
</html>

css的使用方式

(1) 内部样式使用

内部样式，即不开新文件，就在原html文件中修改美化html

内部样式的修改是在<head>标签，<style>标签之中

(2) 外部样式使用

外部样式，和内部样式不同的是，外部样式即新开一个后缀为css的文档，然后在css文档中进行编辑。

这时候html和css的关系，就类似于C语言中 html就相当于主函数，css就相当于调用的函数。

当然，既然css是新开的文档，那么必然就要有调用

如图：html的<head>标签代码段。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css学习/选择器.css">
</head>

其中，输入link回车会自动出现其结构，href就是调用css文件的地址

有没有想起什么？没错，超链接标签<a>也有href

而在css文件中也要写一段代码

@charset "UTF-8";

其中，@charset表示字母设置，"UTF-8"表示支持输入中文格式，注意结尾有个分号。

通常做大的作业，项目，都会要求使用外部样式。可以方便找bug，同时也可以简化html代码

(3) 行内样式使用

行内样式，即不使用css语言，直接在标签内部修改，这在html文章中提到过

还记得之前留了一个悬念吗，就是独立标签<span></span>

<span>就是将<p>标签或者<div>标签等标签中的文字独立出来，单独修改。

选择器

在上文，css样式的模板，有一个陌生的词：选择器。

顾名思义，选择器的作用就是选择，选择特定的容器，然后对其打css代码进行修改。

通常有以下8种选择器

1:通配符选择器

通配符选择器适用于全部的标签，一旦选择，所有的标签，不管是<div>还是<p>还是其他....都会被修改。

例如<p>标签，<li>标签等都自带间隙，我们就可以打通配符选择器，取消所有标签间隔。

2:元素选择器（我习惯叫标签选择器）

在上文的代码中，div{xxxxx} 这个就叫做元素选择器，大括号前面，就是选择一个标签，然后对其进行修改。所以要注意的是，一旦选择div 那么所有的<div>标签都会被修改。

因此元素选择器通常用于修改超链接<a>标签，列表<li>标签

<a>标签的链接，通常自带下划线，所以可以选择a 然后打去掉下划线的代码。

<li>标签通常带有一些标识符，可以选择li 然后打去掉标识符的代码。

3:id选择器

id 也就是给我们的标签取一个名字。

然后选择器选择其id 就只对它进行修改了

但是要注意，id是唯一的，不能有两个相同的标签叫同一个id

4:类选择器

有以下一个实际问题，一个项目，肯定有无数多个标签，那么，如果其中我们要求有多个标签的修改完全一模一样，而其他标签不一样，那我们岂不是要打无数多个id？

非也

其实，还有类选择器:class。

物以类聚，人以群分嘛，我们把这一类有相同修改方案的标签，起一个类名，就可以对它们同时修改了，且不影响其他标签。

所以，class和id不同的是，class不是唯一，可以有多个标签叫同一个class。

就像班级一样，每个人都有独自的id 但大家都属于这个班。

但是我们发现，id叫做"c"的标签，它的class叫做"e"，却没有被修改，这是因为id的权重更大，也就是后面要提到的选择器复杂度。

当然，一个标签也可以有多个类名。

<div class="d f">4444</div>

像这样，它就有了两个类名，d和f

5:群组选择器

群组选择器就是对多个选择器(可以是不同类型的），如果有相同的修改方案，那么可以合并到一起修改。

6:子代选择器

还记得一个概念嘛，就是父子标签。

<div>
     <p></p>
     <p></p>
     <p></p> 
</div>
<ul>
     <li></li>
     <li></li>
     <li></li>
</ul>
<!-- 像这样，div就是p的父亲标签 -->
<!-- ul就是li的父亲标签 -->
<!-- p就是div的子标签 -->
<!-- li就是ul的子标签 -->

有了父子标签，就好理解子代选择器了。

看图，可以知道。子代选择器就是在命名父亲标签的基础上打一个 > 符号，再选择要修改的标签。

并且我们可以发现，子代选择器的优先度是要高于类选择器的

7:后代选择器

后代选择器可以理解为子代选择器的再子代再子代....也就是说，他们之间不一定是挨着的父子标签，也可能是爷孙标签(没有爷孙标签这个说法，我自创的）

后代选择器没有 > 符号，直接一个空格就行。

8:伪选择器(详细的见css(2) )

我们平时看网页，会不会有这种发现，就是一段话是一个颜色，但是把鼠标移动到其上面，它的颜色就变了，实际上这就是伪选择器的作用了。

选择器复杂度（也叫选择器权重）

在上文的子代选择器还有id与类选择器，提到了优先度，即有些选择器是被覆盖了，或者说没有起作用。

因此下面是权重的大致标尺

外部样式：

元素选择器：1

类选择器：10

id选择器： 100

行内样式：1000

比如以下css代码

.222 > li { 
       xxxxxxx
}
/* 它是子代选择器，但本质上
包括了类选择器和元素选择器
所有权重就是11 */

.333 > #222 > p {
           xxxxxxxx 
}
/*这个也是子代选择器，但本质上
类、id、和元素选择器都有
所有权重是111 */

当两个选择器，都包含了同一个标签，且有相同的修改方案，那么就是比较他们的权重，谁的权重大就谁的修改方式优先。