首页 › CSS › CSS 基础 › CSS 概述与引入方式

CSS 是什么

CSS（Cascading Style Sheets，层叠样式表）控制网页的呈现——颜色、大小、间距、布局和动画。

CSS 版本演进

版本	发布时间	重要特性
CSS 1	1996	基本样式（字体、颜色、边距）
CSS 2.1	2004	定位 position、浮动 float、z-index
CSS 3	模块化发布	Flexbox、Grid、动画、渐变、媒体查询、自定义属性

CSS3 不是一个单独的版本，而是模块化——每个特性独立发布。现代浏览器已覆盖大部分 CSS3 模块。

浏览器渲染流程

三种引入方式

1. 外部样式表（推荐）

<link rel="stylesheet" href="style.css">

/* style.css */
body {
  font-family: sans-serif;
  color: #333;
}

2. 内部样式表

<head>
  <style>
    body { background: #f5f5f5; }
    h1 { color: #1890ff; }
  </style>
</head>

3. 内联样式

<p style="color: red; font-weight: bold;">红色加粗文本</p>

优先级对比

方式	优先级	适用场景
外部 <link>	低	推荐，多页面共享
内部 <style>	中	单页面特有样式
内联 style=""	高	⚠️ 极少用（调试或覆盖）

基本语法

selector {
  property: value;
}

h1 {
  color: #1890ff;
  font-size: 24px;
  margin-bottom: 16px;
}

部分	含义	示例
h1	选择器	匹配所有 <h1>
color	属性	要设置的样式方面
#1890ff	值	属性的具体取值
{ }	声明块	包含多个声明
;	分隔符	声明之间的分隔

注释

/* 单行注释 */

/*
  多行注释
  常用于文件头信息
*/

快捷键：VSCode 中 Ctrl + /（Mac: Cmd + /）快速注释。

开发工具

工具	用途
浏览器 DevTools	F12 → Elements → Styles 面板，实时修改调试
VSCode	CSS IntelliSense、Emmet 缩写
Can I Use	caniuse.com 查询浏览器兼容性

小结

概念	要点
CSS 作用	控制网页的视觉呈现
CSS3	模块化发布，Flexbox/Grid/动画/渐变等
引入方式	<link> 外部（推荐）/ <style> 内部 / style="" 内联
语法	选择器 { 属性: 值; }

下一节：选择器全解

贡献者: 布欧-Lewyon