CSS入门指南（最简单的方式解释概念和用法）

原创于 2025-02-28 16:57:09 发布

· 1.4k 阅读

版权

文章标签：

12 篇文章

订阅专栏

用 CSS 可以改变网页的：

css复制代码

选择器 {
    属性: 值;
    属性: 值;
}

示例：

css复制代码

p {
    color: red;        /* 段落文字变红色 */
    font-size: 20px;   /* 文字大小设为20像素 */
}

方式 1：内联样式（直接写在 HTML 标签里）

html复制代码
```
<p style="color: blue; font-size: 16px;">这段文字是蓝色，16像素</p>
```
适用场景：快速测试某个元素的样式，但不利于维护。
方式 2：内部样式表（写在 <style> 标签里）

html复制代码
```
<head>
    <style>
        p {
            color: green;
            font-family: "微软雅黑";
        }
    </style>
</head>
```
适用场景：单个页面需要自定义样式时使用。

方式 3：外部样式表（写在独立的 .css 文件中）

html复制代码

<!-- 在 HTML 中链接外部 CSS 文件 -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

css复制代码

/* styles.css 文件内容 */
p {
    margin: 10px;
    padding: 5px;
}

适用场景：最佳实践！适合多页面网站，便于统一管理样式。

所有需要「美化」的 HTML 元素都可以用 CSS 控制，例如：

属性类型	常用属性	示例值	效果
文字	`color`	`red`, `#FF0000`	文字颜色
	`font-size`	`16px`, `1.2em`	文字大小
	`font-family`	`"微软雅黑", Arial`	字体类型
背景	`background-color`	`yellow`, `#FFFF00`	背景颜色
边框	`border`	`1px solid black`	边框粗细、样式、颜色
间距	`margin`	`10px`	元素外部的间距
	`padding`	`5px`	元素内部的间距
尺寸	`width`	`200px`, `50%`	元素宽度
	`height`	`100px`	元素高度

修改文字颜色

html复制代码

<style>
    h1 {
        color: purple;
    }
</style>
<h1>这个标题会变成紫色</h1>

给图片加边框

html复制代码

<style>
    img {
        border: 3px dashed orange;
    }
</style>
<img src="cat.jpg" alt="小猫">

让内容居中

html复制代码

<style>
    div {
        width: 80%;
        margin: 0 auto; /* 水平居中 */
        text-align: center; /* 文字居中 */
    }
</style>
<div>这个容器会居中显示</div>