翻译 - CSS

CSS（层叠样式表）是用于设计和格式化网页的样式表语言。它可以将网页的样式从HTML中分离出来，使其更具可读性和可维护性。

基础

CSS使用选择器和声明来描述样式。选择器用于选择需要样式化的HTML元素，声明则设置该元素的样式。例如：

h1 {
  color: red;
  font-size: 32px;
}

这将应用于所有h1元素，并将其颜色设置为红色，字号设置为32像素。

选择器

选择器是用于定位需要样式化的元素的模式。常见的选择器包括：

• 标签选择器：根据HTML标签（例如h1、p）选择元素。
• 类选择器：基于元素的class属性选择元素（例如.my-class）。
• ID选择器：基于元素的id属性选择元素（例如#my-id）。
• 属性选择器：根据元素的属性选择元素（例如[type="text"]）。
• 伪类选择器：基于元素的状态选择元素（例如:hover）。

选择器还可以组合使用，以便更具体地选择元素。例如：

ul li {
  color: green;
}

这将选择所有ul下的li元素，并将其颜色设置为绿色。

声明

声明是CSS中设置元素样式的基本单元。声明由属性和值组成，用冒号分隔。例如：

h1 {
  color: red;
}

这将为所有h1元素设置颜色为红色。

属性

CSS有许多属性可用于设置样式。以下是一些常用属性：

• color：设置文字颜色。
• background-color：设置背景颜色。
• font-size：设置字号。
• font-family：设置字体。
• text-align：设置文字对齐方式。
• border：设置边框属性。
• margin：设置元素边距。
• padding：设置元素填充。

CSS还支持许多其他属性，例如动画、渐变和阴影。

盒子模型

CSS元素是基于盒子模型构建的。每个元素都有四个边界：外边距、边框、内边距和内容。这些边界可通过CSS设置。

.my-box {
  margin: 10px;
  padding: 20px;
  border: 1px solid black;
}

这将为.my-box元素设置10像素的外边距、20像素的内边距和一像素的黑色边框。

媒体查询

在不同设备上呈现网页时，可能需要根据屏幕大小或方向来修改样式。这可以使用媒体查询实现。

@media (max-width: 480px) {
  .my-box {
    font-size: 24px;
  }
}

这将在屏幕宽度小于或等于480像素时设置.my-box元素的字号为24像素。

总结

CSS是一种庞大的样式表语言，可以用于控制网页中的任何样式。掌握CSS基础知识，可以更轻松地设计和管理网页样式。