CSS

CSS 是指层叠样式表（Cascading Style Sheets）的缩写，是一种用于描述网页或应用程序的样式和布局的标记语言。它通过将样式规则应用于 HTML 元素，使网页具有一致的外观和布局。

更多信息请参考：MDN CSS 基础

基本语法

CSS 规则集由选择器和声明块组成：

css

选择器 {
    属性: 值;
    属性: 值;
}

选择器：指向您需要改变样式的 HTML 元素。
声明：包含一个或多个属性和值对，以分号分隔。
属性：您希望设置的样式属性（如 color, font-size）。
值：您希望给属性设定的值（如 blue, 16px）。

引入方式

CSS 可以通过以下三种方式引入到 HTML 中：

外部样式表 (External)：使用 <link> 标签引入外部 .css 文件。推荐方式，可维护性最好。
html
```
<head>
    <link rel="stylesheet" href="style.css">
</head>
```

内部样式表 (Internal)：在 HTML 文档的 <head> 部分使用 <style> 标签定义。

html

<head>
    <style>
        body { background-color: linen; }
    </style>
</head>

内联样式 (Inline)：直接在 HTML 元素的 style 属性中定义。不推荐大量使用。
html
```
<h1 style="color: blue;">这是一个标题</h1>
```

常用选择器

元素选择器：根据标签名选择元素（如 p, h1, div）。
类选择器：选择具有特定 class 属性的元素，以 . 开头（如 .container, .btn）。
ID 选择器：选择具有特定 id 属性的元素，以 # 开头（如 #header, #main）。
后代选择器：选择某元素内部的特定元素（如 div p 选择所有 div 内部的 p）。

示例

css

/* 设置页面背景色和字体 */
body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

/* 设置一级标题样式 */
h1 {
    color: #333;
    text-align: center;
}

/* 设置类名为 content 的 div 样式 */
.content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
}

CSS ​

基本语法 ​

引入方式 ​

常用选择器 ​

示例 ​

CSS

基本语法

引入方式

常用选择器

示例