学会给网页穿衣服——学习 CSS 语言

📘本文适合：前端入门、HTML/CSS初学者

📍关键词：CSS、网页美化、前端样式、网页布局

一、什么是 CSS

CSS（Cascading Style Sheets，层叠样式表）

是一种用于描述 HTML 文档样式（如布局、颜色和字体等）的语言。

它是前端开发中控制网页外观和布局的核心技术之一，通常与 HTML 搭配使用。

👉 用白话说：

CSS 就是一门让网页"变好看"的语言。

二、CSS 的作用

1️⃣ 页面外观美化

让网页更有设计感和层次感。

2️⃣ 布局与定位

控制网页元素的位置与排列方式。

三、CSS 的三种应用方式

又称为 CSS 引用方式 ，共有三种：
内部样式、行内样式、外部样式

1. 内部样式

在 HTML 的 <head> 标签中使用 <style> 标签写 CSS 代码：

html 复制代码

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 在这里写CSS */
  </style>
</head>

2. 外部样式

把样式单独写在 .css 文件中，再通过 <link> 引入：

html 复制代码

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- 引入外部CSS -->
  <link rel="stylesheet" href="./index.css">
</head>

3. 行内样式（补充）

直接在标签中写：

html 复制代码

<div style="color:red; font-size:20px;">我是div</div>

四、选择器（Selector）

选择器的作用：告诉浏览器"要修饰谁"。

1️⃣ 标签选择器（元素选择器）

直接使用 HTML 标签名：

html 复制代码

<style>
  div {
    color: blue;
  }
</style>

<body>
  <div>我是div标签</div>
</body>

2️⃣ 类选择器（class）

以 . 开头，通过 HTML 的 class 属性调用：

html 复制代码

<style>
  .name {
    color: green;
  }
</style>

<body>
  <div class="name">我是div标签</div>
  <div class="name">我也是</div>
</body>

3️⃣ ID 选择器（id）

以 # 开头，通过 HTML 的 id 属性调用：

html 复制代码

<style>
  #name {
    color: red;
  }
</style>

<body>
  <div id="name">我是唯一的div</div>
</body>

五、CSS 常用属性

1️⃣ 字体属性

属性	含义	示例
font-size	字体大小	20px
font-weight	字体粗细	400 / bold
font-family	字体设置	`'仿宋'`, `'Arial'`

html 复制代码

<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%可变圆）

示例：

css 复制代码

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，可用通配符 * 清除：

css 复制代码

* {
  padding: 0;
  margin: 0;
}

🎯 总结

学会 CSS，就是学会给网页"穿衣服"。

从颜色到布局，从文字到圆角，每一行代码都能让网页焕然一新。

💡下次当你看到一个漂亮的网站时，不妨按下 F12 看看它的 CSS。

你会发现，每个像素的美感，都藏在一行行样式里。

📌 文章目录回顾：

1️⃣ 什么是 CSS

2️⃣ CSS 作用

3️⃣ 应用方式

4️⃣ 选择器

5️⃣ CSS 常用属性

❤️ 如果这篇文章帮到你，记得点赞 + 收藏 + 关注！

我会持续更新更多 前端入门笔记 与 实战代码示例。