零基础CSS入门教程(3)——元素选择器

1.任务目标

那么,我们该如何批量设定元素的样式呢,在CSS中,选择器就是造物主那神奇的手指头,选择器指向谁,谁就得被设置。
其实,选择器是用来选择标签元素的,我们可以通过选择器,选中一批元素,然后统一设置他们的样式。

2.元素选择器

代码如下

<!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元素选择器 */
    p{
      
      
      color: aquamarine
    }

  </style>
</head>

<body>
  <p>无边落木萧萧下</p>
  <p>不尽长江滚滚来</p>
  <div>君不见黄河之水天上来</div><br>
  <span>奔流到海不复回</span>

</html>

注意,p后面的大括号,里面是编写CSS样式代码的。大括号内的样式代码,都会应用于p选择器选中的元素。
效果如下
在这里插入图片描述

3.元素选择器的优点

由上面的例子可见,我们不用元素选择器,也能实现所有p标签文本蓝色的效果,那么使用元素选择器后,到底有什么好处呢。

其实好处还是挺多的,听我来说说:

代码变少了。之前要为每个p标签编写CSS代码,现在只需要在头部写一行。
更好维护了。之前如果要修改颜色,需要把每个p标签style内的代码进行修改,现在只需要修改头部这一处。
代码更清晰。之前CSS和HTML代码其实是混在一起的,不好区分。使用选择器后,CSS代码全部集中于头部,很明显更好区分,更加清晰了。

4.小结

元素选择器针对与,某一个元素功能很强大。

猜你喜欢

转载自blog.csdn.net/weixin_61808806/article/details/128208448