标签：color 元素语法样式 HTML 选择器 CSS 属性

什么是 CSS

CSS（层叠样式表，Cascading Style Sheets）用于控制网页的外观和布局。通过 CSS，可以控制 HTML 元素的样式，如颜色、字体、布局、间距等

CSS 基本语法

CSS 的基本语法包括选择器、属性和属性值。它的基本结构如下：
```
~~~css
selector {
    property: value;
}
~~~
```

1. 选择器（Selector）

什么是选择器

选择器用于指定哪些 HTML 元素需要应用样式。它可以是标签、类、ID 或其他更复杂的选择器

元素选择器

直接选择 HTML 元素，如 div、h1、p 等；下面这段 CSS 会将所有 <p> 元素的文本颜色设置为蓝色
```
p {
    color: blue;
}
```

类选择器

通过类名选择元素。类选择器前面有一个点 (.)，如 .class-name；下面这段 CSS 会应用到所有 class 为 button 的元素
```
.button {
    background-color: #007bff;
    color: white;
}
```

ID 选择器

通过 ID 选择元素。ID 选择器前面有一个井号 (#)，如 #element-id；下面这段 CSS 会应用到 ID 为 header 的元素。ID 在页面中应该是唯一的
```
#header {
    font-size: 20px;
}
```

通用选择器

* 表示选中所有元素；下面这段 CSS 会应用到页面上的所有元素，清除它们的默认外边距和内边距
```
* {
    margin: 0;
    padding: 0;
}
```

后代选择器

选择某个元素(父元素)的后代元素(子元素)；下面这段 CSS 会将所有 <div> 元素中的 <p> 元素的文本颜色设置为红色
```
div p {
    color: red;
}
```

组合选择器

组合多个选择器，用逗号分隔；下面这段 CSS 会将所有 <h1>、<h2> 和 <h3> 元素的字体加粗
```
h1, h2, h3 {
    font-weight: bold;
}
```

2. 属性（Property）

什么是属性

属性用于定义元素的样式特征。CSS 中有许多常见的属性

颜色相关的属性

color：文本的颜色
background-color：背景颜色
border-color：边框颜色

字体相关的属性

font-size：字体大小
font-family：字体类型
font-weight：字体粗细

布局相关的属性

width：元素的宽度
height：元素的高度
padding：元素的内边距
margin：元素的外边距
display：元素的显示类型（如 block, inline）
position：元素的定位方式（如 static, absolute, relative, fixed）
top, right, bottom, left：设置定位元素的具体位置

其他常用属性

border：设置元素的边框
text-align：设置文本的对齐方式
overflow：设置溢出内容的处理方式（如 hidden, scroll）
box-shadow：添加阴影效果

3. 属性值（Value）

什么是属性值

属性值指定特定的样式值，可以是固定的数值、颜色、百分比等

颜色值

可以使用颜色名称、十六进制颜色、RGB 或 RGBA 等格式

color: red;         /* 颜色名称 */
background-color: #ff5733;  /* 十六进制颜色 */
color: rgb(255, 0, 0);      /* RGB 颜色 */
color: rgba(255, 0, 0, 0.5); /* RGBA 颜色 */

长度单位

CSS 使用多种长度单位，包括 px（像素）、em、rem、%、vw（视窗宽度）、vh（视窗高度）等
```
width: 100px;
margin: 2em;
font-size: 1.5rem;
```

时间单位

常用于动画、过渡等，单位为 s（秒）或 ms（毫秒）
```
transition: all 0.3s ease;
```

百分比

常用于宽度、高度、位置等，百分比是相对于父元素的尺寸
```
width: 50%;  /* 父元素宽度的 50% */
```

4. CSS 规则的多重声明

可以在一个选择器中声明多个属性，每个属性和值之间用分号 (;) 分隔。例如：
```
h1 {
    color: blue;
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
}
```

5. 层叠性（Cascading）

CSS 中的“层叠”是指多个样式规则可能同时影响一个元素。CSS 会根据特定的优先级规则决定应用哪个样式。优先级从低到高的顺序是：
1. 浏览器默认样式
2. 用户样式（由用户设置）
3. 外部样式表
4. 内部样式表
5. 内联样式（style 属性）
如果有多个样式规则对同一个元素应用，浏览器会根据优先级和来源选择应用的样式。内联样式具有最高优先级，通常会覆盖其他样式

6. 注释（Comment）

CSS 中的注释用 /* 注释内容 */ 包裹，可以用于解释代码、调试或注释掉某些部分的样式
```
/* 这是一个注释 */
h1 {
    color: blue;  /* 设置文本颜色为蓝色 */
}
```

简单示例

下面这段 CSS 设置了网页的背景色，所有标题为蓝色，段落的字体大小为 16px，button 类的元素有一个蓝色背景和白色字体

/* 设置网页背景色 */
body {
    background-color: #f4f4f4;
}

/* 设置所有标题为蓝色 */
h1, h2, h3 {
    color: blue;
}

/* 设置所有段落的字体 */
p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* 设置 class 为 .button 的元素 */
.button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}

总结

选择器：用于指定哪些元素应用样式
属性和值：描述元素的外观，如颜色、大小、布局等
层叠性：多个样式的优先级规则决定哪个样式被应用
注释：帮助解释代码，但不会影响代码执行
掌握 CSS 的基本语法后，可以进一步学习高级特性如 响应式设计、CSS 动画、Flexbox、Grid 布局 等，以便更加灵活地设计页面

标签：color,元素,语法,样式,HTML,选择器,CSS,属性
From： https://www.cnblogs.com/ajunjava/p/18616833

HTML开发 - CSS 风格基本语法解析