CSS样式初识：给网页穿上漂亮的“外衣”-育师

文章目录

前言
一、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文件（可通过优化减少影响）