文章目录
- 前言
- 一、CSS是什么？
- 二、CSS的核心作用
- 三、CSS的3种引入方式
- 内联样式（行内样式）
- 内部样式表
- 外部样式表
- 总结
前言
HTML就像搭建好的房屋框架，而CSS就是给房屋装修、刷漆、布置格局的“魔法师”。今天这篇文章，就带大家从零开始，快速认识CSS样式的核心基础，搞懂它是什么、能做什么、以及怎么用。
一、CSS是什么？
CSS的全称是Cascading Style Sheets（层叠样式表），它是一种用来定义HTML文档呈现方式的语言。简单来说，HTML告诉浏览器“页面里有什么”（比如标题、段落、图片），而CSS告诉浏览器“这些内容该长什么样”（比如字体大小、颜色、位置、背景）。
没有CSS的网页，就像没穿衣服的人，只有基础结构，毫无美观可言；有了CSS，我们才能打造出各种炫酷、美观、符合用户审美的网页，比如现在常见的响应式布局、渐变背景、动态过渡效果等，都离不开CSS的支持。
二、CSS的核心作用
很多新手会误以为CSS只是“让网页变好看”，但其实它的作用远不止于此，核心作用主要有3点：
美化页面：这是最基础的作用，包括设置字体、颜色、间距，添加背景图片、边框、阴影等，让页面更具视觉吸引力。
布局控制：通过CSS可以精准控制页面中各个元素的位置和大小，比如将元素排成一行、分成多列，实现头部、主体、底部的经典布局，甚至是复杂的网格布局和弹性布局。
提升可维护性：CSS可以与HTML分离编写，当需要修改页面样式时，无需改动HTML结构，只需修改CSS文件即可，大大降低了维护成本，尤其适合大型网站。
三、CSS的3种引入方式
内联样式（行内样式）
内联样式是将CSS代码直接写在HTML元素的style属性中，作用范围仅限于当前这个元素。
语法示例：
<p style="color: red; font-size: 18px;">这是一段红色、18px大小的文字</p>优点：简单直接，优先级最高（会覆盖其他样式）；缺点：样式与结构耦合，无法复用，修改麻烦，适合临时测试或单个元素的特殊样式。
内部样式表
内部样式表是将CSS代码写在HTML文件的标签内的
语法示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>内部样式表示例</title> <style> p{color:blue;font-size:16px;line-height:1.5;}</style> </head> <body> <p>这是一段蓝色的文字</p> <p>这段文字也会应用上面的样式</p> </body> </html>优点：样式与结构分离（同一文件内），可复用，适合单个网页的样式定义；缺点：无法跨文件复用，多个网页需要重复编写。
外部样式表
外部样式表是将CSS代码写在单独的.css文件中，然后通过HTML的标签将其引入HTML文件，作用范围可覆盖所有引入该CSS文件的HTML页面。
步骤：
新建一个后缀为.css的文件（比如style.css），在文件中编写CSS代码；
在HTML的标签中用标签引入该文件。
语法示例：
style.css 文件：
p{color:green;font-size:14px;}h1{color:orange;text-align:center;}HTML文件：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>外部样式表示例</title> <link rel="stylesheet"href="style.css"> </head> <body> <h1>这是一个居中的橙色标题</h1> <p>这是一段绿色的文字</p> </body> </html>优点：样式与结构完全分离，可跨多个HTML文件复用，维护方便，是开发中最推荐的引入方式；缺点：需要额外加载一个CSS文件（可通过优化减少影响）
总结
今天我们初步认识了CSS：它是用来美化和布局网页的样式表语言，有3种引入方式（推荐外部样式表），核心语法是“选择器+声明块”。通过一个简单的练习，相信你已经感受到了CSS的魅力。
对于新手来说，初识CSS后，后续可以重点学习这些内容：
更多CSS选择器（ID选择器、类选择器、后代选择器、伪类选择器等）；
常用CSS属性（文本、字体、背景、边框、盒模型等）；
CSS布局技术（浮动、弹性布局Flex、网格布局Grid）；
CSS响应式设计（适配不同屏幕尺寸）。
