CSS的常用语法

CSS（Cascading Style Sheets）的语法是用来定义网页中元素样式的规则集合。它的基本结构由选择器（selector）和声明块（declaration block）组成，其中声明块包含一系列声明（declaration），每个声明由属性和值组成。下面是对CSS语法各个部分的详细介绍：

1. 选择器：选择器用于指定哪部分HTML文档将被应用样式。它可以是元素名称、类名、ID、属性选择器或其他更复杂的选择器组合。

   示例：

   p {
         }
   .classname {
         }
   #idname {
         }
   [type="text"] {
         }
   

2. 声明块：声明块由一对大括号包围，里面包含一系列的声明。

   示例：

   {
        
       property1: value1;
       property2: value2;
   }
   

3. 声明：声明由属性和值组成，中间用冒号分隔，并以分号结束。属性指的是样式属性的名称，而值则是该属性的具体设置。

   示例：

   color: red;
   font-size: 14px;
   

4. 注释：CSS中的注释以/*开头，以*/结尾，用于解释代码或暂时禁用某段代码。

   示例：

   /* This is a comment */
   

5. @规则：除了普通的样式声明外，CSS还包含了一些特殊规则，如@import用于导入其他样式表，@media用于定义响应式样式等。

   示例：

   @import url('style.css');
   @media screen and (max-width: 600px) {
        
       body {
        
           background-color: lightblue;
       }
   }
   

6. 层叠与继承：CSS的一个重要特性是层叠，这意味着多个样式规则可以应用于同一个元素，而最终的样式取决于它们的优先级。此外，某些CSS属性可以被元素继承，如font-size和color。

7. 选择器分组：可以将多个选择器放在一行，共享相同的声明块，这被称为选择器分组或群组。

   示例：

   h1, h2, h3 {
        
       color: green;
   }
   

8. 伪类和伪元素：伪类用于定义元素的特殊状态，如:hover表示鼠标悬停状态；伪元素则用于创建元素的某个部分，如::before可以在元素前插入内容。

   示例：

   a:hover {
        
       color: blue;
   }
   p::first-line {
        
       font-weight: bold;
   }
   

9. 变量和计算：CSS也支持使用自定义属性（变量）和函数来进行计算。

   示例：

   :root {
        
       --main-color: black;
   }
   p {
        
       color: var(--main-color);
   }
   div {
        
       padding: calc(10px - 5px);
   }
   

10. 嵌套规则：在某些CSS预处理器中，如Sass或Less，允许在声明块内部嵌套其他选择器和声明块，以组织和管理复杂的样式规则。

    示例（假设使用Sass）：

    .parent {
        color: red;
        .child {
            font-size: 14px;
        }
    }
    

以上是CSS语法的基础组成部分和一些高级特性。熟练掌握这些知识，可以帮助你有效地编写和维护样式表，实现丰富的网页视觉效果。