CSS基本语法及简单选择器

最新推荐文章于 2022-07-27 17:31:45 发布

不会写代码的菜

最新推荐文章于 2022-07-27 17:31:45 发布

阅读量177

点赞数

分类专栏： css 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_52629592/article/details/125360732

版权

css 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

在<style>标签的内部区域,是不属于HTML语言区域的.在这里我们使用CSS语言对元素的样式进行设计
CSS中的注释: /* */ 此注释与java中的段落注释表示形式相同
CSS中涉及到尺寸的需要加单位: px(像素单位,1px为一个像素)

一.基本语法

这里可将CSS语法大致分为两类: 选择器和声明块
- 选择器: 通过选择器可以选中页面中的指定元素例如:
  
  通过p可以选择页面中的所有元素
- 声明块: 通过声明块来指定要为元素设计的样式
  - 声明块又一个一个的声明组成: 例如: color : red ;
  - 声明是一个名值对结构一个样式名对应一个样式值,名值之间以 : 连接.以 ; 结尾

二.常用选择器

这里有多选择器可用来选择页面中的元素,下面哦们一一介绍:

元素选择器:

作用: 根据标签名来选中指定的元素
语法: 标签名{ }

栗子: p{ } h1{ } div{ }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>常用选择器</title>
        <style>
          p{
              color: #7FFFD4;
              font-size: 1.25rem;
          }
        </style>
    </head>
    <body>
        <p>这是一个段落</p>
        <p>这是一个段落</p>
        <h1 id="abc1">这是一级标题</h1>
        <div>这里是div</div>
    </body>
</html>

使用元素选择器,我们将页面中所有所选的标签选中,并为其设置了样式.但是这样会给页面中所有属于这个标签的元素都设置上我们的样式,这样并不友好.因此我们介绍下一个选择器--id选择器,用来设置标签中的某个元素

id选择器:
- 作用: 根据元素的id属性值来选中页面中的某个元素
- 语法: # id属性值{ }
- 栗子: #box{ } #red{ }
```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>常用选择器</title>
        <style>
        /* 
           id选择器
         */
          #abc{
              color: antiquewhite;
              font-size: 1.5625rem;
          }
        </style>
    </head>
    <body>
        <p>这是一个段落</p>
        <p id="abc">这是一个段落</p>
        <h1 id="abc1">这是一级标题</h1>
        <div>这里是div</div>
    </body>
</html>
```
- 注意: 我们在给元素设置id值时不能重复
  
  使用此种方式进行属性的选择,我们首先要为元素设置一个id.这样我们使用id选择器就可以实现对所需的元素进行选取,从而进行样式设计.但是我们使用id选择器一次只能选择一个元素,虽然我们在代码中对多个元素设置同一个id值,也能对它们进行选择和样式设计,但这种方式并不是正确的.我们之后会学习JS,在JS中一次只能选择一个id,因此如果使用为多个元素设置同一个id的方式,会对之后的学习留下隐患

类选择器:
class是一个标签的属性,它和id类似.但是它可以重复使用,可以通过class属性来为元素进行分类.这样我们就可以直接设置一组元素的样式

作用: 根据元素的class属性值选中一组元素
语法: .class属性值{ }

栗子: .abc{ }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>常用选择器</title>
        <style>
        /* 
           类选择器
         */
        .aaa{
            color: chartreuse;
            font-size: 0.625rem;
        }
          
        </style>
    </head>
    <body>
        <p>这是一个段落</p>
        <p id="abc">这是一个段落</p>
        <h1 id="abc1" class="aaa">这是一级标题</h1>
        <div>这里是div</div>
    </body>
</html>

我们在开发中使用类选择器的时候较多,使用id选择器的时候较少

我们还可以同时为一个元素指定多个class属性,也可以为多个元素指定同一个class属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>常用选择器</title>
        <style>
        /* 
           类选择器
         */
        .aaa{
            color: chartreuse;
            font-size: 0.625rem;
        }
        .bbb{
            color: blueviolet;
        }
          
        </style>
    </head>
    <body>
        <p>这是一个段落</p>
        <p id="abc">这是一个段落</p>
        <p class="aaa">这是第三个段落</p>
        <h1 id="abc1" class="aaa bbb" >这是一级标题</h1>
        <div>这里是div</div>
    </body>
</html>

通配选择器:

作用: 选中页面中的所有元素

语法: *{ }

栗子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>常用选择器</title>
        <style>
        /* 
          通配选择器 
         */
        *{
            color: aliceblue;
        }
          
        </style>
    </head>
    <body>
        <p>这是一个段落</p>
        <p id="abc">这是一个段落</p>
        <p class="aaa">这是第三个段落</p>
        <h1 id="abc1" class="aaa bbb" >这是一级标题</h1>
        <div>这里是div</div>
    </body>
</html>