css样式篇

一、CSS 简介

CSS（层叠样式表）是一种用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档呈现的样式表语言。它描述了元素应该如何在屏幕、纸质、语音或其他媒体上渲染。

以下是一个简单的CSS样式示例：

/* 选择器 */
body {
  background-color: lightblue; /* 背景颜色 */
}

h1 {
  color: white; /* 文字颜色 */
  text-align: center; /* 文字居中 */
}

p {
  font-family: verdana; /* 字体 */
  font-size: 20px; /* 字体大小 */
}

在这个例子中，我们定义了三个CSS规则：

1. body：这个规则将页面的背景颜色设置为浅蓝色。
2. h1：这个规则将一级标题的颜色设置为白色，并将文本居中对齐。
3. p：这个规则将段落的字体设置为Verdana，并将字体大小设置为20像素。

二、基本语法

CSS 规则由两个主要部分组成：选择器和声明块。

1. 选择器

选择器定义了要应用于哪个元素。例如，h1 选择器将应用于所有 <h1> 标签。

2. 声明块

声明块包含一个或多个声明，用于设置元素的样式。每个声明都由属性和值组成，属性和值之间用冒号分隔。

selector {
  property: value;
}

三、常用属性

1. 背景

• background-color：设置元素的背景颜色。
• background-image：设置元素的背景图像。
• background-repeat：设置背景图像是否重复。

2. 文本

• color：设置文本的颜色。
• font-family：设置字体系列。
• font-size：设置字体大小。
• text-align：设置文本对齐方式。

3. 边框

• border-width：设置边框宽度。
• border-style：设置边框样式。
• border-color：设置边框颜色。

4. 布局

• display：设置元素的显示类型。
• position：设置元素的定位类型。
• float：设置元素的浮动方向。
• clear：清除浮动。

四、注释

在 CSS 中使用 /* */ 来添加注释。

/* 这是一个注释 */

五、参考资源

• MDN Web Docs - CSS
• W3Schools - CSS Tutorial