CSS零基础入门教程：从基础到实战，轻松掌握样式美化核心
文章最后更新时间：2026年01月01日
一、CSS基础认知：什么是CSS及核心作用
美化元素：修改文字颜色、字体、大小，设置背景颜色、背景图片，调整元素边框、内边距、外边距等；
布局排版：实现元素的居中、浮动、定位，搭建多列布局、响应式布局等；
实现交互效果：配合伪类、伪元素实现hover（鼠标悬浮）、active（点击）等效果，结合动画属性实现简单动画。
二、CSS基本语法与引入方式
2.1 基本语法
选择器 {
属性名: 属性值; /* 声明语句，以分号结尾 */
属性名: 属性值;
}p {
color: red;
font-size: 16px;
}2.2 三种引入方式
内联样式（行内样式）：直接在HTML元素的style属性中编写CSS。优点是针对性强，仅作用于当前元素；缺点是样式与结构混合，不利于维护，适用于临时样式调整。 示例：<p style="color: blue; font-weight: bold;">这是蓝色加粗的文字</p>
内部样式表：在HTML文档的<head>标签内，通过<style>标签编写CSS。优点是样式仅作用于当前HTML文件，代码集中；缺点是不适用于多页面共享样式，适用于单页面网站。 示例：
<head><style>h1 {color: #333;text-align: center;}</style></head>
外部样式表：将CSS代码编写在单独的.css文件中，然后在HTML文档中通过<link>标签引入。优点是样式与结构完全分离，可多页面共享，便于维护和复用，是开发中最常用的方式。 示例： 1. 新建style.css文件，编写CSS：h2 { color: green; } 2. 在HTML中引入：<link rel="stylesheet" href="style.css">
三、CSS核心选择器：精准定位元素
元素选择器：以HTML标签名作为选择器，作用于所有该标签的元素。 语法：标签名 { 属性: 值; } 示例：body { margin: 0; padding: 0; }（清除body默认边距）
类选择器：通过元素的class属性定位元素，可重复使用，适用于多个元素共享同一样式。 语法：.类名 { 属性: 值; } 示例：<div class="box"></div>，CSS：.box { width: 200px; height: 200px; background: #f00; }
ID选择器：通过元素的id属性定位元素，一个页面中id值唯一，适用于单个特殊元素。 语法：#id名 { 属性: 值; } 示例：<div id="header"></div>，CSS：#header { height: 80px; background: #333; }
通配符选择器：以“*”表示，作用于页面中所有元素，常用于清除默认样式。 语法：* { margin: 0; padding: 0; }
四、CSS常用样式属性：从基础美化到布局
4.1 文字与字体样式
color：文字颜色（取值：颜色名、十六进制、RGB、RGBA）；
font-size：字体大小（常用单位：px、em、rem）；
font-family：字体（如：font-family: "Microsoft YaHei", sans-serif;）；
font-weight：字体粗细（normal、bold、100-900）；
text-align：文字对齐方式（left、center、right、justify）；
text-decoration：文本装饰（none、underline、line-through，常用于清除a标签下划线）。
4.2 背景样式
background-color：背景颜色；
background-image：背景图片（语法：background-image: url("图片路径");）；
background-repeat：背景图片重复方式（no-repeat、repeat-x、repeat-y）；
background-position：背景图片位置（如：background-position: center center; 居中显示）；
background-size：背景图片大小（如：background-size: cover; 覆盖整个元素）。
4.3 盒模型与边距样式
width/height：内容区宽度/高度；
padding：内边距（元素内部与内容的距离，可分上、右、下、左设置）；
border：边框（语法：border: 1px solid #000; 宽度 样式 颜色）；
margin：外边距（元素与其他元素的距离，可分上、右、下、左设置，margin: 0 auto; 可实现块级元素水平居中）。
4.4 布局相关样式
display：元素显示模式（block：块级元素，独占一行；inline：行内元素，不独占一行；inline-block：行内块元素，兼具行内和块级特性；none：隐藏元素）；
float：浮动（left、right，可实现元素并排，但需注意清除浮动影响）；
position：定位（static：默认定位；relative：相对定位，相对于自身原有位置；absolute：绝对定位，相对于最近的已定位祖先元素；fixed：固定定位，相对于浏览器窗口）。
五、CSS实战小案例：简单卡片布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS卡片布局</title>
<style>
/* 清除默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 容器样式 */
.card-container {
width: 1200px;
margin: 50px auto;
display: flex;
justify-content: space-between;
}
/* 卡片样式 */
.card {
width: 380px;
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 卡片图片样式 */
.card-img {
width: 100%;
height: 200px;
background-image: url("card.jpg");
background-size: cover;
background-position: center;
}
/* 卡片内容样式 */
.card-content {
padding: 20px;
}
.card-title {
font-size: 20px;
color: #333;
margin-bottom: 10px;
}
.card-desc {
font-size: 14px;
color: #666;
line-height: 1.5;
}
</style>
</head>
<body>
<div>
<div>
<div></div>
<div>
<h3>卡片1</h3>
<p>这是一个用CSS实现的简单卡片，包含图片和文字内容，通过flex布局实现并排显示。</p>
</div>
</div>
<div>
<div></div>
<div>
<h3>卡片2</h3>
<p>通过box-shadow添加阴影效果，border-radius实现圆角，提升卡片的视觉层次感。</p>
</div>
</div>
<div>
<div></div>
<div>
<h3>卡片3</h3>
<p>box-sizing: border-box确保内边距和边框不影响元素总宽度，让布局更精准。</p>
</div>
</div>
</div>
</body>
</html>
