CSS 行 - CSS

CSS（层叠样式表）是一种用于描述页面样式的语言。它定义了页面元素的外观、布局和动画效果。使用 CSS，您可以将 HTML 文档变得更加美观、可读性更好，同时也可以提高用户体验。

选择器

选择器是用于选择要应用样式的 HTML 元素的模式。它可以是元素的标签名、类名、ID、属性等。以下是一些常用的选择器示例：

• 元素选择器：h1（选择所有 <h1> 元素）
• 类选择器：.button（选择所有类名为 button 的元素）
• ID 选择器：#header（选择 ID 为 header 的元素）

属性和值

CSS 样式由属性和值组成。属性定义了要修改的样式属性，例如颜色、字体大小、边框样式等。值指定了要应用到属性的设置。

h1 {
  color: blue;
}

.button {
  background-color: #ff0000;
  font-size: 12px;
}

上述代码将页面中的所有 <h1> 元素文本颜色设置为蓝色，同时将所有类名为 button 的元素背景颜色设置为红色，字体大小设置为 12 像素。

盒模型

CSS 的盒模型是指 HTML 元素占据的空间的表示。它由内容、内边距、边框和外边距组成。每个盒子都有一个标准的矩形框，可以设置宽度、高度、边框样式等属性。

.my-box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 20px;
}

上面的代码定义了一个类名为 my-box 的元素，宽度为 200 像素，高度为 100 像素，内边距为 10 像素，边框为灰色，外边距为 20 像素。这些样式将会应用到所有具有该类名的元素上。

媒体查询

媒体查询是一种用于根据设备特性（如屏幕宽度、方向等）匹配应用不同样式的技术。通过使用媒体查询，您可以为不同的设备提供优化的布局和样式。

@media screen and (max-width: 600px) {
  /* 当屏幕宽度小于等于 600px 时应用的样式 */
  .container {
    flex-direction: column;
  }
}

上述代码中的媒体查询定义了一个屏幕宽度小于等于 600px 时应用的样式。.container 元素的布局将更改为垂直方向的列布局。

动画

CSS 提供了丰富的动画效果，使您能够为页面元素创建过渡、变换和关键帧动画。

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.slide {
  animation: slideIn 1s ease-in-out;
}

上面的代码定义了一个名为 slideIn 的关键帧动画，将元素从左侧滑入。类名为 slide 的元素将应用此动画效果（在 1 秒钟内以渐进的方式开始和结束动画）。

以上是一些 CSS 的基础概念和用法。通过学习和掌握 CSS，您可以创建出自己想要的各种效果和布局。