如何编写 CSS

简介

CSS（Cascading Style Sheets，层叠样式表）用于定义 HTML 文档的样式。本文将介绍如何编写 CSS。

语法

CSS 由选择器、属性和属性值组成。

选择器

选择器用来选择要样式化的 HTML 元素。常见的选择器有：

• 元素选择器：选择所有指定类型的 HTML 元素。
• ID 选择器：选择一个具有指定 ID 的 HTML 元素。
• 类选择器：选择所有具有指定类的 HTML 元素。
• 属性选择器：选择具有指定属性的 HTML 元素。
• 组合选择器：结合多个选择器以使用更复杂的选择器。

属性

CSS 属性用于定义 HTML 元素的样式。常见的属性有：

• background：设置元素的背景颜色和背景图像。
• color：设置元素的文本颜色。
• display：设置元素应该生成的框的类型。
• font-family：设置元素文本的字体系列。
• font-size：设置元素文本的字体大小。
• margin：设置元素外边距。
• padding：设置元素内边距。
• width：设置元素的宽度。
• height：设置元素的高度。

属性值

CSS 属性值用于定义属性的取值。常见的属性值有：

• 颜色值：表示颜色的值。
• 像素值：表示长度的值。
• 百分比值：表示相对值的百分比。
• 关键字值：表示特殊的属性值。

示例

下面是一个简单的 CSS 样式表例子：

/* 元素选择器 */
h1 {
  color: red;
}

/* ID 选择器 */
#header {
  background: blue;
  height: 100px;
}

/* 类选择器 */
.paragraph {
  width: 80%;
  margin: auto;
  padding: 10px;
}

/* 属性选择器 */
a[target="_blank"] {
  color: green;
}

/* 组合选择器 */
div p {
  font-size: 18px;
}

上述样式表中的选择器、属性和属性值具体含义请参考语法部分。

总结

CSS 是 Web 前端开发必不可少的一部分，掌握好 CSS 的基础语法、选择器和属性值等内容，可以让页面更加美观、易读、易维护。