基础 CSS 卡

CSS 是前端开发中不可或缺的一部分，它用来控制网页的样式和布局。本文将简要介绍 CSS 的基本语法和一些常见的样式属性。

CSS 语法

CSS 语法由选择器和声明块组成。选择器用来选中需要样式化的 HTML 元素，声明块则包含了一组属性和对应的属性值，用来设置元素的样式。

以下是一个简单的 CSS 规则：

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

这个规则将 h1 元素的文本颜色设置为红色，并将字体大小设置为 24 像素。

在 CSS 中，每一个规则都由选择器、属性以及属性值组成。多个规则之间可以使用逗号隔开，例如：

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

这个例子将 h1、h2 和 h3 元素的字体设置为 Arial，如果无法加载 Arial，则使用 sans-serif 作为备选字体。

CSS 样式属性

CSS 中有很多样式属性可供使用，以下是一些常见的样式属性及其作用：

颜色

• color：设置文本颜色
• background-color：设置背景颜色

尺寸

• font-size：设置字体大小
• height：设置元素高度
• width：设置元素宽度

布局

• margin：设置元素外边距
• padding：设置元素内边距
• display：设置元素的显示方式
• float：设置元素浮动方式
• position：设置元素定位方式

这只是 CSS 样式属性中的一小部分，更多样式属性可以参考 MDN。

CSS 卡

下面是一个使用 CSS 创建的简单卡片样式：

.card {
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  background-color: #fff;
}

.card h2 {
  margin-top: 0;
}

这个规则将 .card 元素设置为一个带有边框和阴影的白色盒子。.card h2 利用嵌套选择器来对卡片标题进行样式化。可以通过给 HTML 元素添加 card 类来应用这些样式：

<div class="card">
  <h2>CSS 卡</h2>
  <p>这是一个使用 CSS 创建的简单卡片样式。</p>
</div>

效果如下：

结语

CSS 是一个非常强大的工具，可以用来控制网页的外观和布局。在实际开发中，应该尽可能地使用现成的 CSS 框架和工具，以提高开发效率和代码质量。