基础 CSS 介绍

CSS（层叠样式表）是用于描述网页上的样式和布局的语言。在 HTML 中，可以通过 CSS 来修改元素的颜色、大小、定位等属性，以改变网页的外观和行为。

CSS 语法

CSS 规则由一个选择器、一组属性-值对和一个可选的后代选择器组成。例如：

selector {
  property1: value1;
  property2: value2;
}

其中，选择器指定要应用样式的元素，属性是要修改的样式属性，值是属性的值。例如，要设置一个元素的背景颜色为红色，可以这样写：

div {
  background-color: red;
}

CSS 选择器

CSS 选择器根据元素的标签、类、ID、属性等属性来选择要应用样式的元素。以下是一些常见的选择器类型：

• 标签选择器：选择所有使用特定 HTML 标签的元素，如 div。
• 类选择器：选择所有具有特定类的元素，如 .example。
• ID 选择器：选择具有特定 ID 的元素，如 #example。
• 属性选择器：选择所有具有特定属性的元素，如 [href]。
• 后代选择器：选择指定元素的后代，如 div p。

CSS 盒模型

CSS 盒模型描述了 HTML 元素的布局结构，包括内边距、边框和外边距等。一个元素的大小由以下四个属性决定：

• 内容框：元素的实际内容区域，包括文本、图片等。
• 内边距：内容框与边框之间的空白区域。
• 边框：内边距和外边距之间的边框线。
• 外边距：元素与其他元素之间的空白区域。

CSS 属性

CSS 中有数百种属性可用于修改元素的样式和布局。以下是一些常见的属性：

• font-family：设置字体。
• font-size：设置字体大小。
• color：设置字体颜色。
• background-color：设置背景颜色。
• border：设置边框。
• margin：设置外边距。
• padding：设置内边距。
• display：设置元素的显示方式。
• position：设置元素的定位方式。

总结

CSS 是一个强大的工具，可用于改进网站的外观和行为。了解基础语法、选择器、盒模型和属性是入门 CSS 的关键。