📘本文适合：前端入门、HTML/CSS初学者
📍关键词：CSS、网页美化、前端样式、网页布局
一、什么是 CSS
CSS（Cascading Style Sheets，层叠样式表）
是一种用于描述 HTML 文档样式（如布局、颜色和字体等）的语言。
它是前端开发中控制网页外观和布局的核心技术之一，通常与 HTML 搭配使用。
👉 用白话说：
CSS 就是一门让网页“变好看”的语言。
二、CSS 的作用
1️⃣ 页面外观美化
让网页更有设计感和层次感。
2️⃣ 布局与定位
控制网页元素的位置与排列方式。
三、CSS 的三种应用方式
又称为 CSS 引用方式，共有三种：
内部样式、行内样式、外部样式
1. 内部样式
在 HTML 的 <head> 标签中使用 <style> 标签写 CSS 代码：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 在这里写CSS */
</style>
</head>
2. 外部样式
把样式单独写在 .css 文件中，再通过 <link> 引入：
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入外部CSS -->
<link rel="stylesheet" href="./index.css">
</head>
3. 行内样式（补充）
直接在标签中写：
<div style="color:red; font-size:20px;">我是div</div>
四、选择器（Selector）
选择器的作用：告诉浏览器“要修饰谁”。
1️⃣ 标签选择器（元素选择器）
直接使用 HTML 标签名：
<style>
div {
color: blue;
}
</style>
<body>
<div>我是div标签</div>
</body>
2️⃣ 类选择器（class）
以 . 开头，通过 HTML 的 class 属性调用：
<style>
.name {
color: green;
}
</style>
<body>
<div class="name">我是div标签</div>
<div class="name">我也是</div>
</body>
3️⃣ ID 选择器（id）
以 # 开头，通过 HTML 的 id 属性调用：
<style>
#name {
color: red;
}
</style>
<body>
<div id="name">我是唯一的div</div>
</body>
五、CSS 常用属性
1️⃣ 字体属性
| 属性 | 含义 | 示例 |
|---|---|---|
| font-size | 字体大小 | 20px |
| font-weight | 字体粗细 | 400 / bold |
| font-family | 字体设置 |
'仿宋', 'Arial'
|
<style>
#name {
font-size: 20px;
font-weight: 400;
font-family: '仿宋';
}
</style>
2️⃣ 文本属性
| 属性 | 含义 | 示例 |
|---|---|---|
| line-height | 行高 | 1.5em |
| text-align | 水平对齐 | left / center / right |
3️⃣ 颜色属性
| 属性 | 含义 | 示例 |
|---|---|---|
| color | 文本颜色 | red / yellow / #333 |
| background-color | 背景颜色 | red / #f7f2f2 |
4️⃣ 盒子模型（Box Model）
网页中的每个元素都可以看作一个“盒子”。
盒子模型包含：宽度、高度、边框、内边距、外边距、圆角。
| 属性 | 含义 | 单位 |
|---|---|---|
| width | 宽度 | px |
| height | 高度 | px |
| border | 边框 | px |
| padding | 内边距 | px |
| margin | 外边距 | px |
| border-radius | 圆角 | px / %（50%可变圆） |
示例：
div {
color: #f7f2f2;
background-color: red;
height: 100px;
width: 100px;
border: 1px solid #000;
padding: 10px;
margin: 10px;
border-radius: 10px;
}
5️⃣ 盒子的上下左右属性
- 上：top
- 下：bottom
- 左：left
- 右：right
6️⃣ 清除网页默认内外边距
浏览器默认会给元素加 margin、padding，可用通配符 * 清除：
* {
padding: 0;
margin: 0;
}
🎯 总结
学会 CSS，就是学会给网页“穿衣服”。
从颜色到布局，从文字到圆角，每一行代码都能让网页焕然一新。
💡下次当你看到一个漂亮的网站时，不妨按下 F12 看看它的 CSS。
你会发现，每个像素的美感，都藏在一行行样式里。
📌 文章目录回顾：
1️⃣ 什么是 CSS
2️⃣ CSS 作用
3️⃣ 应用方式
4️⃣ 选择器
5️⃣ CSS 常用属性
❤️ 如果这篇文章帮到你，记得点赞 + 收藏 + 关注！
我会持续更新更多 前端入门笔记 与 实战代码示例。
