7.15Web前端-css选择器介绍

最新推荐文章于 2024-05-11 17:28:41 发布

执笔绘江山

最新推荐文章于 2024-05-11 17:28:41 发布

阅读量309

点赞数 3

文章标签：前端 css html

本文链接：https://blog.csdn.net/qq_45059691/article/details/125810676

版权

hello大家好，今天让我们来学习css选择器部分的内容，我将简单介绍一下css是什么，然后给大家介绍一下css中的各类选择器，那么让我们开始吧。

1.css简介：

css是什么？很多人第一次看到css肯定有这样的疑惑，其实很简单，css称为层叠样式单，它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小、颜色、以及元素的精确定位等，在传统的web的设计中，使用CSS能让单调的HTML网页更富有表现力。

2.css的好处

刚开始学的时候肯定会有同学疑惑，我可以直接用html标签形式展现的东西为什么还要用css来写，这样做是不是多次一举，我可以很明确的说，并不是这样，css的好处包括但不限于表达效果非常丰富，文档体积比较小，便于信息检索，而且可读性好。

注：CSS是将文档格式和样式分离，便于管理和修改，可以更多的表现网页的各种效果。

3.css的书写方式:

css一共有三种书写方式，分别为内联样式，内部样式和外部样式，三种方式的区别我来一一介绍：

3.1.内联样式：这种方式将样式内联定义到具体的HTML元素上，通常用于精确控制一个HTML元素的表现，用于单个独特的元素定义。

内联样式也被称为行内样式，是所有样式中最为直接的一种，它直接对HTML标签使用style属性。表现形式与HTML没有做分离。

3.2.内部样式：这种方式是通过在html文档头定义样式单部分来实现，在这种方式下，每批CSS样式只能控制一份HTML文档。

内部样式是将CSS写在<head>与</head>之间，并且用<style>和</style>标记进行声明，这个用法会把表现形式与结构分离出来，为了防止大家看文字不了解其中意思我用代码段给大家演示一下：

<!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>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>我是一行普通的文字，不要看我</p>
  </body>
</html>

可以看到我用p标签写了一段字，然后在上面建立了一个style属性，在内部给p内部文字设置了一个颜色，运行结国就是这样的：

3.3.外部样式：这种方式将样式文件彻底与HTML文档分离，样式文件需要额外引入。在这种方式下，一份样式可控制多份文档，在后期开发的时候我们都用外部样式，这种方式相比于第二种，在程序员手中更能绽放出更多的风采，还是以上题目举例，首先我们建立一个新文件，结尾要以.css结尾，然后将上面放在style里面的代码取出放在这个.css结尾的文件中，如图所示：

然后在html文件中，我们用link引入这个文件，代码如下：

<!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>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <p>我是一行普通的文字，不要看我</p>
  </body>
</html>

然后我们运行，结果就会和上面一样，p标签内部的文字会变成红色。

4.css常用选择器：

css的常用选择器一共有四个，我来一一介绍给大家：

4.1 标签选择器：

四类常用选择器中最简单的一个，正如其名字一样，用标签来选择内容，上面刚刚展示的p标签内文字变红色就是用的标签选择器，直接用标签的名字在style中去选择然后进行一系列操作。

4.2 id选择器：

该选择器的用法是给html中的标签起一个id名字，注意：这个id是唯一的，也就是说整段代码中这个id有且只哟这一个标签会用到，后面的标签不可以再进行同id命名，然后用#和你命名的id连起来，在style中选择然后进行操作,我来给一个p标签用id命名来举个例子：

<!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>
      #p1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <p id="p1">我是一行普通的文字，不要看我</p>
  </body>
</html>

这样运行出来的结果和之前一样，会让p包裹的文字颜色变为红色。

4.3 class选择器：

class选择器的用法是给html中的标签起一个class类名，需要注意的是它和id选择器不一样，class可以给多个标签命名同一个class，所以在html中比id选择器更加常见，给标签一个class以后，用.加上class类名，在style中选择然后进行操作,我继续用p标签用命名来举例子：

<!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>
      .p1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <p class="p1">我是一行普通的文字，不要看我</p>
  </body>
</html>

运行出来的效果依旧是红色文字。

4.4通配符：

通配符可以匹配任意的标签，举个例子吧：

<!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>
      * {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>我是一行普通的文字，不要看我</p>
    <span>是土被三榜怒在同用落，雷那定，</span>
    <div>不勉烦秦上中览入中。</div>
    <i>司人为自谢嗣答回受能，责千谭。</i><br />
    <strong>元人在十何策，圣叩人判人德量。</strong>
  </body>
</html>

可以看到上面代码里有各种属性的标签，但是我使用一个通配符，就可以实现一个神奇的功能：

可以看到上面的每一个标签包裹的文字全部都变成了蓝色，是不是非常神奇。

由于时间问题今天先介绍这么多，我介绍的比较详细，非常适合小白，因为我也是一个小白，所以我会从我的角度去思考，去讲解，以便刚入前端的同学理解，非常欢迎大家纠正我文中的错误，让我们共同努力！

执笔绘江山

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
7.15Web前端-css选择器介绍

很多人第一次看到css肯定有这样的疑惑，其实很简单，css称为层叠样式单，它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小、颜色、以及元素的精确定位等，在传统的web的设计中，使用CSS能让单调的HTML网页更富有表现力。刚开始学的时候肯定会有同学疑惑，我可以直接用html标签形式展现的东西为什么还要用css来写，这样做是不是多次一举，我可以很明确的说，并不是这样，css的好处包括但不限于表达效果非常丰富，文档体积比较小，便于信息检索，而且可读性好。...
复制链接

扫一扫