【Web前端开发】CSS语法规范、代码风格、基本选择器

最新推荐文章于 2026-04-02 13:38:21 发布

原创最新推荐文章于 2026-04-02 13:38:21 发布 · 1k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #css

1、CSS语法规范

选择器的作用：找到添加样式的那个元素。

一个声明就是一个具体的样式，多个声明组合在一起构成了声明块。

在HTML中注释用：

在CSS中注释用：/* 需要注释的内容*/

总结：

（1）CSS语法由两部分构成：

选择器：找到要添加样式的元素。

声明块：设置具体的样式（声明块由一个或多个声明组成）。

声明的格式为：属性名：属性值;

备注：
（1）在声明块的最后一个声明的分号理论上能省略，但最好还是写上。

例如：

（2）选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好还是写上。

例如：

CSS注释的写法：

/* h1 { 
            color: rgb(0, 255, 51);
             font-size:  26px;
            } */

2、CSS的代码风格

（1）展开风格--开发时推荐，便于维护和调试

例如：

      h1 { 
            color: rgb(0, 255, 51);
             font-size:  26px;
            }

（2）紧凑风格--项目上线时推荐（即：代码写完了，交给服务器，让用户去看），可减少件体积

例如：

h1{color:rgb(0, 255, 51);font-size:26px;}

备注：项目上线时，我们可以通过工具（例如：webpack）将【展开风格】的代码，变成【紧凑风格】，这样可以减少文件体积，节约网络流量，同时也能让用户打开网页时速度更快。

3、CSS基本选择器

基本选择器包括：
（1）通配选择器

（2）元素选择器

（3）类选择器

（4）id选择器

（1）通配选择器

作用：可以选中所有的HTML元素

语法：

* {

属性名：属性值;
...


}

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法规范</title>
    <style>
        * {
            color: rgb(0, 255, 51);
            font-size: 26px;
        }
    </style>
</head>

<body>
    <h1>风清气正 务实高效</h1>
    <h2>坚持干字当头，埋头苦干、奋勇争先，抓住机遇、乘势而上，扎扎实实推动高质量发展</h2>

</body>

</html>

结果：

（2）元素选择器

作用：为页面中某种元素统一设置样式。

语法：

标签名 {


属性名：属性值;
...


}

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法规范</title>
    <style>
        h2 {
            color: red;
            font-size: 26px;
        }
    </style>
</head>

<body>
    <h1>风清气正 务实高效</h1>
    <h2>坚持干字当头，埋头苦干、奋勇争先，抓住机遇、乘势而上，扎扎实实推动高质量发展</h2>
    <h2>我们既是中国式现代化建设的受益者，也是参与者，共同为实现更加美好的民生愿景而努力奋斗 。</h2>

</body>

</html>

结果：

备注：元素选择器无法实现差异化设置，例如上面的代码中,h2标签效果都一样。

（3）类选择器

一个元素（即标签）不可以有多个class属性。但一个class的值可以写很多属性值并且用空格进行风格。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法规范</title>
    <style>
        .p1 {
            color: red;
        }

        .p2 {
            color: green;
        }
    </style>
</head>

<body>
    <h1 class='p1'>风清气正 务实高效</h1>
    <h2 class="p2">坚持干字当头，埋头苦干、奋勇争先，抓住机遇、乘势而上，扎扎实实推动高质量发展</h2>
    <h2>我们既是中国式现代化建设的受益者，也是参与者，共同为实现更加美好的民生愿景而努力奋斗 。</h2>

</body>

</html>

结果：

总结：

（1）作用：根据元素的class值，来选中某些元素。

class翻译过来有：种类、类别的含义，所以class值，有成类名。

（2）语法：

.类名  {
属性名：属性值;
...




}

（3）示例：

/*   选中所有class值为speak的元素*/
.speakb {

color: red;

}



/*选中所有class值为ansewer的元素*/
.ansewer {
color:green;



}

（4）注意点：

1))元素的class属性值不带 . ,但CSS得类选择器要带 . 。

2))class值，是我们自己定义的，按照标准，不要使用纯数字，不要使用中文，尽量使用英文和数字的组合，若由多个单词组成，使用-做连接，例如：left-menu,且命名要有意义，做到“见名知意”.

3))一个元素不能写多个class属性，下面是错误示例。

<h1  class= "speak"   class="answer">  hello</h1>

4))一个元素的class属性能写多个值，要用空格隔开。

例如：

<h1  class="speak big">jjajaa</h1>

（4）id选择器

注意：

（1）多个元素的ID值时不能重复的。

（2）一个元素可以同时拥有id和class.

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法规范</title>
    <style>
        #p1 {
            color: red;
        }

        .p2 {
            color: green;
        }
    </style>
</head>

<body>
    <h1 id='p1'>风清气正 务实高效</h1>
    <h2 class="p2">坚持干字当头，埋头苦干、奋勇争先，抓住机遇、乘势而上，扎扎实实推动高质量发展</h2>
    <h2>我们既是中国式现代化建设的受益者，也是参与者，共同为实现更加美好的民生愿景而努力奋斗 。</h2>

</body>

</html>

结果：

总结：

（1）作用：根据元素的id属性值，来精准的选中某个元素。

（2）语法：

#id值 {

属性名：属性值;
...


}

（3）举例：

/*选中id值为：earthy的那个元素*/
#erathy {
color:red;
font-size=23px;
}

（4）注意：

1))id属性值：尽量使用字母、数字、下划线（_）、短杠（-）组成，最好以字母开头，不要包含空格，区分大小写。

2))一个元素只能拥有一个id属性，多个元素的id属性值不能相同。

3))一个元素可以同时拥有id和class属性。