一、CSS 是什么CSS 全称是Cascading Style Sheets层叠样式表它是专门用来控制网页样式外观的语言和 HTML 配合使用HTML 负责搭建网页的结构比如标题、段落、图片这些元素CSS 负责给这些结构 “化妆”比如设置文字颜色、字体大小、元素位置、背景样式等。简单来说HTML 是网页的 “骨架”CSS 是网页的 “皮肤”。二、CSS 的核心作用样式美化修改元素的外观比如文字颜色、大小、背景、边框、阴影等布局控制调整元素在页面中的位置比如居中、左右排列、上下间距、响应式适配不同设备手机 / 电脑层叠与继承多个样式规则可以叠加生效子元素可以继承父元素的部分样式灵活控制样式优先级。三、CSS 的使用方式新手必知在前端开发中CSS 有 3 种常见的引入方式优先级从高到低依次是1. 行内样式内联样式直接写在 HTML 元素的style属性里仅对当前元素生效适合临时修改单个元素样式。!-- 示例给段落设置红色、20px 字体 -- p stylecolor: red; font-size: 20px;这是行内样式的文字/p2. 内部样式嵌入式写在 HTML 文件的style标签中通常放在head里仅对当前 HTML 文件生效适合小型页面。!DOCTYPE html html head meta charsetUTF-8 title内部样式示例/title !-- 内部样式 -- style /* 选中所有 p 标签设置样式 */ p { color: blue; line-height: 1.5; /* 行高 */ } /* 选中 id 为 title 的元素 */ #title { font-size: 24px; font-weight: bold; /* 加粗 */ } /style /head body h1 idtitle这是标题/h1 p这是内部样式的段落/p /body /html3. 外部样式外联式将 CSS 代码单独写在.css后缀的文件中通过 HTML 的link标签引入是最推荐的方式样式与结构分离便于维护。第一步创建style.css文件css/* style.css */ /* 选中类名为 box 的元素 */ .box { width: 200px; height: 200px; background-color: pink; /* 背景色 */ border: 2px solid black; /* 边框2px 实线 黑色 */ margin: 20px auto; /* 外边距上下 20px左右自动居中 */ }第二步在 HTML 中引入html!DOCTYPE html html head meta charsetUTF-8 title外部样式示例/title !-- 引入外部 CSS 文件 -- link relstylesheet hrefstyle.css /head body div classbox这是外部样式的盒子/div /body /html四、CSS 的核心语法CSS 规则由选择器声明块组成css/* 选择器选中要样式化的元素 */ 选择器 { /* 声明块多个样式声明以分号结尾 */ 属性1: 值1; 属性2: 值2; }选择器找到目标元素比如p选中所有段落、.box选中类为 box 的元素、#title选中 id 为 title 的元素属性要修改的样式维度比如color控制颜色、width控制宽度值属性的具体设置比如color: red表示颜色为红色。五、CSS 的核心特性层叠性多个样式规则作用于同一个元素时会按 “优先级” 叠加生效行内样式 ID 选择器 类选择器 标签选择器继承性子元素会继承父元素的部分样式比如文字颜色、字体、行高而宽高、边框等不会继承优先级当样式冲突时优先级高的规则会覆盖优先级低的可通过!important强制提升优先级不建议频繁使用。总结CSS 是控制网页样式的语言核心作用是美化外观、控制布局与 HTML 分工明确HTML 搭结构CSS 做样式CSS 有 3 种使用方式外部样式是开发中最推荐的样式与结构分离便于维护CSS 核心语法是 “选择器 声明块”通过选择器选中元素再通过属性 - 值对设置样式。掌握这些基础后你可以进一步学习 CSS 选择器、盒模型、Flex 布局 / Grid 布局等核心知识点就能实现更复杂的网页样式和布局了。