CSS - 语法

CSS（层叠样式表）是一种流行的样式表语言，用于设计交互式网页。在本教程中，我们将学习CSS语法以及CSS与HTML的用法。

CSS语法基础

使用CSS进行样式化的基本语法如下：

selector {
    property: value;
}

• 选择器： CSS选择器用于选择您想要在网页上设置样式的HTML元素或元素组。
• 属性： CSS属性是HTML元素的方面或特征，可以使用CSS进行样式化或修改，例如颜色、字体大小或边距。
• 值： 值被分配给属性。例如，颜色属性可以有红色、绿色等值。

多个样式规则

如果您想为单个选择器定义多个规则，可以在单个块中指定这些规则，用分号(;)分隔。

语法

selector{
    property1: value1;
    property2: value2;
    property3: value3;
}

CSS选择器语法

CSS选择器用于选择您想要在网页上设置样式的HTML元素。它们允许您定位特定的元素或元素组，以应用颜色、字体、边距等样式。以下是不同类型的选择器：

通用选择器

通用选择器选择并应用样式到HTML文档中的所有元素。

* {
   font-family: Verdana, sans-serif;
   color: green;
}

元素选择器

元素选择器选择特定的HTML元素。

h1 {
    color: #04af2f;
}

类选择器

类选择器选择并设置具有特定类属性值的元素的样式。

.myDiv {
    color: #04af2f;
}

ID选择器

ID选择器选择具有特定id属性值的单个元素。

#myDiv {
    color: #04af2f;
}

属性选择器

属性选择器基于特定的属性值选择元素。

a[target] {
   background-color: peachpuff;
}

CSS分组和嵌套语法

分组和嵌套选择器允许我们一次对多个元素应用相同的样式。

CSS分组选择器语法

分组选择器是逗号分隔的，用于一次选择多个元素并对它们进行样式化。

div, p {
    background-color: #04af2f;
    color: white;
}

CSS嵌套语法

嵌套允许在一个特定的样式规则内嵌套另一个样式规则。

div p {
    background-color: #04af2f;
    color: white;
    font-size: 20px;
    letter-spacing: 1px;
}

CSS伪类和伪元素语法

伪类和伪元素都选择特定类型的元素。伪类为特定状态定义样式，而伪元素定位元素的特定部分。

CSS伪元素语法

CSS伪元素对元素的特定部分进行样式化。

p:before {
    content: "NOTE:";
    font-weight: bold;
}

CSS伪类语法

CSS伪类用于基于元素的状态选择和设置元素样式。

a:hover {
    color: red;
}

CSS包含语法

CSS可以通过三种不同的方法在任何HTML文档中使用：内联CSS、内部CSS和外部CSS。

内联CSS语法

内联CSS直接在HTML标签内使用。

欢迎来到教程点。

内部CSS语法

内部CSS在HTML文档的head部分使用style标签使用。

外部CSS语法

外部CSS写在具有.css扩展名的单独文件中，并使用link标签链接到HTML文档。

CSS媒体查询语法

CSS媒体查询根据屏幕尺寸、分辨率和其他特征应用不同的CSS样式，通常用于创建响应式设计。

@media (max-width: 700px) {
    body {
        background-color: #04af2f;
    }
}

CSS变量语法

CSS变量允许在整个CSS程序中存储和重用值。

:root {
    --main-color: #04af2f;
}

CSS注释语法

CSS注释添加关于代码的解释性说明。

/* 这是一个单行CSS注释 */
/* 这是一个
多行
CSS注释 
*/