输入 CSS

CSS 是 Cascading Style Sheets 的缩写，用于定义网页的样式和布局。在 Web 开发中，CSS 是必不可少的技能之一。本文将介绍输入 CSS 的相关知识点。

CSS 的基本语法

CSS 规则由选择器和声明构成，规则写在样式表中。例如：

body {
    color: #333333;
    font-size: 16px;
}

其中 body 是选择器，color 和 font-size 是声明，#333333 和 16px 是属性值。

CSS 选择器

CSS 选择器用于指定要应用样式的 HTML 元素。以下是 CSS 常用的选择器：

• 标签选择器：选择所有指定标签的元素。例如 h1。
• 类选择器：选择具有指定 class 属性值的元素。例如 .btn。
• ID 选择器：选择具有指定 ID 属性值的元素。例如 #header。
• 属性选择器：选择具有指定属性值的元素。例如 [type="text"]。
• 伪类选择器：选择特殊状态下的元素。例如 :hover。
• 组合选择器：组合多个选择器。例如 h1, p。

CSS 单位

CSS 支持多种单位，常见的单位有：

• 像素（pixel，px）：在 Web 开发中最常用的单位。
• 百分比（%）：相对于父元素的百分比。
• em：相对于元素的字体大小。
• rem：相对于根元素的字体大小。
• vh 和 vw：相对于视口的高度或宽度。

CSS 值计算

CSS 支持计算两个或多个值进行运算，常用的运算符有加号（+）、减号（-）、乘号（*）和除号（/）。

.container {
    width: calc(100% - 20px);
    height: calc(50vh - 10px);
}

CSS 前缀

为了支持不同浏览器兼容性，部分 CSS 属性需要添加厂商前缀。例如：

/* Webkit 浏览器 */
.container {
    -webkit-border-radius: 10px;
}

/* Mozilla 浏览器 */
.container {
    -moz-border-radius: 10px;
}

/* Opera 浏览器 */
.container {
    -o-border-radius: 10px;
}

/* 标准属性 */
.container {
    border-radius: 10px;
}

CSS 预处理器

CSS 预处理器是一种将扩展语言转换为标准 CSS 的工具。常用的 CSS 预处理器有 Sass、Less 和 Stylus 等。

例如使用 Sass，可以创建 Sass 文件如下：

$primary-color: #007bff;

.btn {
    background-color: $primary-color;
    &:hover {
        background-color: darken($primary-color, 10%);
    }
}

Sass 文件将被编译为标准的 CSS 文件：

.btn {
    background-color: #007bff;
}
.btn:hover {
    background-color: #0069d9;
}

总结

输入 CSS 是 Web 开发过程中必不可少的技能之一，本文介绍了 CSS 的基本语法、选择器、单位、值计算和常用技巧。希望本文能帮助你快速入门 CSS。