CSS学习笔记

CSS（层叠样式表）是用于描述网页上元素样式的标记语言，它可以让我们实现页面的美化和布局。在这里，我将为你介绍一些CSS的基本知识和实例代码。

1. CSS基础

1.1 选择器

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

• 标签选择器：选择指定标签类型的元素，例如：p、h1、a等。
• 类选择器：选择具有相同类名的元素，以.开头，例如：.my-class。
• ID选择器：选择具有唯一ID的元素，以#开头，例如：#my-id。
• 后代选择器：选择元素的后代元素，例如：div p 会选择所有在 <div> 元素内的 <p> 元素。

1.2 样式属性

CSS样式属性控制元素的外观。以下是一些常用的样式属性：

• color：文本颜色。
• font-size：字体大小。
• font-family：字体族名称。
• background-color：背景颜色。
• padding：内边距。
• margin：外边距。
• border：边框。
• width：宽度。
• height：高度。

1.3 样式优先级

当多个选择器应用于同一个元素时，CSS会根据优先级规则来确定应用哪个样式。优先级从高到低的排序为：ID选择器 > 类选择器 > 标签选择器。同时，通过使用!important可以提高样式的优先级。

2. CSS样式实例

2.1 修改文本样式

/* 修改段落文本样式 */
p {
  color: #333;
  font-size: 16px;
  font-family: Arial, sans-serif;
}

/* 修改特定类的文本样式 */
.highlight-text {
  color: #ff0000;
  font-weight: bold;
}

/* 修改ID元素的文本样式 */
#header-text {
  font-size: 24px;
  text-align: center;
}