Tech Docs Station

Appearance

概述 ​

CSS（Cascading Style Sheets，层叠样式表）用于控制网页的外观和布局。它可以让网页变得美观、响应式且易于维护。

什么是 CSS？ ​

CSS 是一种样式表语言，用于描述 HTML 文档的呈现方式。CSS 控制网页的颜色、字体、布局、动画等视觉效果。

CSS 的特点 ​

  • 分离内容与样式：HTML 负责结构，CSS 负责样式
  • 层叠性：多个样式可以层叠，优先级高的生效
  • 继承性：子元素可以继承父元素的样式
  • 响应式：可以根据不同设备调整样式

CSS 引入方式 ​

1. 行内样式 ​

直接在 HTML 元素上使用 style 属性：

html
<p style="color: red; font-size: 16px;">红色文字</p>

2. 内部样式表 ​

在 HTML 文档的 <head> 中使用 <style> 标签：

html
<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>

3. 外部样式表（推荐） ​

将 CSS 写在独立的 .css 文件中，通过 <link> 引入：

html
<head>
  <link rel="stylesheet" href="styles.css" />
</head>
css
/* styles.css */
p {
  color: red;
  font-size: 16px;
}

4. @import 导入 ​

在 CSS 文件中导入其他 CSS 文件：

css
@import url("other.css");

CSS 语法 ​

CSS 规则由选择器和声明块组成：

css
选择器 {
  属性: 值;
  属性: 值;
}

示例 ​

css
h1 {
  color: blue;
  font-size: 24px;
  text-align: center;
}

p {
  color: #333;
  line-height: 1.6;
}

CSS 注释 ​

css
/* 这是单行注释 */

/*
    这是
    多行注释
*/

CSS 单位 ​

长度单位 ​

单位说明示例
px像素width: 100px;
%百分比width: 50%;
em相对父元素字体大小font-size: 1.5em;
rem相对根元素字体大小font-size: 1.2rem;
vw视口宽度的百分比width: 50vw;
vh视口高度的百分比height: 100vh;

颜色单位 ​

css
/* 颜色名称 */
color: red;

/* 十六进制 */
color: #ff0000;
color: #f00;

/* RGB */
color: rgb(255, 0, 0);

/* RGBA（带透明度） */
color: rgba(255, 0, 0, 0.5);

/* HSL */
color: hsl(0, 100%, 50%);

下一步 ​

继续学习 CSS 的更多内容：