引言
CSS(层叠样式表)是前端开发的基石,掌握其核心知识能显著提升页面设计与布局能力。本文基于系统化学习资料,深入讲解CSS语法、选择器优先级、盒子模型、定位等核心概念,结合代码示例与实用技巧,助你从入门到进阶!
目录
一、CSS基础与历史
1.1 CSS简介
CSS用于描述HTML/XML文档的呈现样式,实现了结构与样式的分离。通过CSS,开发者可轻松控制字体、颜色、布局等,提升代码可维护性。
1.2 CSS版本演进
版本 | 发布时间 | 特点 |
---|---|---|
CSS1 | 1996年12月 | 基础样式功能 |
CSS2 | 1998年5月 | 支持定位与媒体查询 |
CSS2.1 | 2004年6月 | 修正版,广泛兼容 |
CSS3 | 未正式发布 | 模块化设计,功能增强 |
二、CSS引入方式与基础语法
2.1 三种引入方式
行间样式:通过标签的style
属性直接添加。
<div style="width: 100px; height: 100px; background: red;"></div>
内部样式:在<style>
标签中定义样式。
<style>
div { width: 100px; height: 100px; }
</style>
外部样式:通过<link>
引入外部CSS文件(推荐)。
<link rel="stylesheet" href="style.css">
三、引入CSS的三种方式及最佳实践
3.1 行间样式
直接在HTML标签中通过style
属性定义样式,适用于快速调试或局部样式覆盖,但会导致HTML与CSS耦合,不推荐大规模使用。
<div style="color: red; font-size: 16px;">行间样式示例</div>
3.2 内部样式
在HTML的<style>
标签内编写CSS,适合单页面开发,但复用性差。
<head>
<style>
.title {
color: blue;
text-align: center;
}
</style>
</head>
3.3 外部样式(推荐)
通过<link>
引入外部CSS文件,实现样式与结构分离,便于维护和复用。
<head>
<link rel="stylesheet" href="styles.css">
</head>
最佳实践:
模块化拆分:按功能或组件拆分CSS文件(如
header.css
、footer.css
)。预处理器:使用Sass/Less增强CSS功能,如变量、嵌套等。
四、CSS选择器详解与高效使用
4.1 基础选择器
类型 | 语法 | 示例 | 用途 |
---|---|---|---|
元素选择器 | tag |
p { color: red; } |
选中所有指定标签 |
类选择器 | .class |
.btn { padding: 8px; } |
复用样式类 |
ID选择器 | #id |
#header { height: 60px; } |
唯一元素样式(慎用) |
4.2 组合选择器
后代选择器:
div p { }
(选中div内所有p标签)。子选择器:
div > p { }
(仅选中直接子元素)。相邻兄弟选择器:
h1 + p { }
(选中紧接h1后的第一个p)。
4.3 伪类与伪元素
伪类:定义元素特殊状态,如:hover
、:nth-child(n)
。
a:hover { color: orange; }
li:nth-child(2n) { background: #f0f0f0; }
伪元素:创建虚拟元素,如::before
、::after
。
.quote::before {
content: "“";
color: gray;
}
五、CSS布局核心:传统与现代方案
5.1 传统布局方案
浮动布局:
.left { float: left; width: 30%; }
.right { float: right; width: 70%; }
.clearfix::after { content: ""; display: block; clear: both; }
定位布局:
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
5.2 现代布局方案
Flexbox:单维度布局(行或列),适合组件对齐。
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
Grid:二维网格布局,适合复杂页面结构。
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 20px;
}
六、深入CSS盒子模型
6.1 盒子模型组成
标准盒模型:
width/height
仅包含内容区域。IE盒模型:
width/height
包含内容+内边距+边框。
切换盒模型:
.box {
box-sizing: border-box; /* 推荐:更易控制尺寸 */
}
6.2 外边距合并问题
垂直相邻元素:上下外边距会合并为较大值。
解决方案:使用
padding
或border
隔开。
七、行内、块级与行内块元素对比
特性 | 行内元素(inline) | 块级元素(block) | 行内块元素(inline-block) |
---|---|---|---|
宽高设置 | 不支持 | 支持 | 支持 |
默认宽度 | 由内容决定 | 父元素100% | 由内容决定 |
换行显示 | 同行显示(除非换行) | 独占一行 | 同行显示 |
典型标签 | <span> , <a> , <em> |
<div> , <p> , <ul> |
<img> , <input> |
转换元素类型:
.inline-to-block { display: block; }
.block-to-inline { display: inline; }
.inline-to-inline-block { display: inline-block; }
八、总结与资源推荐
核心要点:掌握选择器优先级、盒子模型、布局方案是CSS进阶的关键。
学习建议:通过Chrome开发者工具调试样式,理解渲染机制。
扩展阅读: