纯 CSS 介绍

在前端开发领域中，CSS 是不可或缺的一部分，它可以让我们控制页面样式，美化用户界面。本文主要讲解纯 CSS，即不涉及 JavaScript 的情况下，如何使用 CSS 实现一些常见的效果。

概述

CSS（Cascading Style Sheets）级联样式表，是一种用来设计 HTML、XML等网页的样式表语言。相比于使用 HTML 直接设置样式，CSS 的好处在于可以将页面的样式与内容分离，提高代码的可维护性和重用性。

CSS 属性可以分为基本属性和扩展属性。基本属性有通用属性、布局属性、字体属性、文本属性等，而扩展属性则是对某些特定元素才有用的，如背景属性、边框属性等。

CSS 选择器

在 CSS 中，选择器用于指定要样式应用的 HTML 元素。例如下面的样式将会应用于所有的

元素：

p {
  font-size: 16px;
  color: #333;
}

CSS 选择器比较多，例如id选择器、class选择器、属性选择器等。下面是常见的 CSS 选择器：

1. id 选择器：使用 # 标明，用于选取具有指定 id 属性值的元素，比如 #myDiv。
2. 类选择器：使用 . 标明，用于选取具有指定类名的元素，比如 .myClass。
3. 元素选择器：使用元素名称标明，用于选取所有指定元素类型的元素，比如 p。
4. 通用选择器：用 * 标明，用于选取所有元素。
5. 属性选择器：用于选取带有指定属性的元素，比如 [type='text']。

样式优先级

当为同一个元素同时设置多个 CSS 样式时，可能会出现优先级冲突的情况。CSS 样式表中已经为不同选择器（包括标签名、ID、class、伪类等）分别赋予了优先级，主要的优先级从高到低依次是：

1. !important 指定的样式
2. 行内样式 style
3. ID 选择器
4. class 选择器、 属性 选择器、 伪类、 伪元素
5. 元素选择器

假设某个元素的 ID 是 #myDiv，同时它也属于类 .myClass，则这个元素应用的样式优先级为：

#myDiv.myClass {
  /* CSS 样式 */
}

CSS 盒模型

在 CSS 中，一个 HTML 元素可以看做是一个矩形的盒子，即 CSS 盒模型。CSS 盒模型包括 content、padding、border和margin这四部分。

• content：指的是元素的内容区域（即元素的文本、图片等）。
• padding：指的是元素的内边距，即元素的内容和元素的边框之间的距离。
• border：指的是元素的边框。
• margin：指的是元素的外边距，即元素和其他元素之间的距离。

可以通过 CSS 设置这些属性的大小和颜色，比如下面的样式将会应用于所有的

元素：

p {
  border: 2px solid #333;
  padding: 20px;
  margin: 10px;
}

CSS 动画

CSS3 新增了众多的动画属性和特效，可以用来实现一些非常棒的动画效果。比如下面的代码可以实现一个作淡入淡出的效果：

.fadeInOut {
  animation: fade 2s ease-in-out infinite;
}
@keyframes fade {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

其中关键字 @keyframes 表示动画帧，在这里定义了一个名为 fade 的动画帧。属性 animation 表示动画效果，它包含 4 个值：动画帧的名称、总时间、动画应该如何执行以及是否重复。

总结

CSS 可以实现的效果非常丰富，这里只是介绍了一小部分。在 CSS 中，选择器、盒模型、样式优先级和动画等都是非常重要的概念。希望本文可以帮助读者更好地掌握 CSS，实现炫酷的 UI 效果。