CSS是什么？
一、CSS 是什么？
CSS 全称是Cascading Style Sheets（层叠样式表），它是专门用来控制网页样式（外观）的语言，和 HTML 配合使用：
- HTML 负责搭建网页的结构（比如标题、段落、图片这些元素）；
- CSS 负责给这些结构 “化妆”（比如设置文字颜色、字体大小、元素位置、背景样式等）。
简单来说：HTML 是网页的 “骨架”，CSS 是网页的 “皮肤”。
二、CSS 的核心作用
- 样式美化：修改元素的外观，比如文字颜色、大小、背景、边框、阴影等；
- 布局控制：调整元素在页面中的位置，比如居中、左右排列、上下间距、响应式适配不同设备（手机 / 电脑）；
- 层叠与继承：多个样式规则可以叠加生效，子元素可以继承父元素的部分样式，灵活控制样式优先级。
三、CSS 的使用方式（新手必知）
在前端开发中，CSS 有 3 种常见的引入方式，优先级从高到低依次是：
1. 行内样式（内联样式）
直接写在 HTML 元素的style属性里，仅对当前元素生效，适合临时修改单个元素样式。
<!-- 示例：给段落设置红色、20px 字体 --> <p style="color: red; font-size: 20px;">这是行内样式的文字</p>2. 内部样式（嵌入式）
写在 HTML 文件的<style>标签中（通常放在<head>里），仅对当前 HTML 文件生效，适合小型页面。
<!DOCTYPE html> <html> <head> <meta charset="UTF-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 id="title">这是标题</h1> <p>这是内部样式的段落</p> </body> </html>3. 外部样式（外联式）
将 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 charset="UTF-8"> <title>外部样式示例</title> <!-- 引入外部 CSS 文件 --> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box">这是外部样式的盒子</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 布局等核心知识点，就能实现更复杂的网页样式和布局了。