CSS层叠样式表核心知识
CSS基础概念
CSS（层叠样式表）用于控制HTML标签的视觉呈现。要有效使用CSS，需要掌握两个核心能力：精准选择目标标签，以及灵活调整样式属性。
基础语法结构
选择器 {
属性名1: 属性值1 属性值2;
属性名2: 属性值;
}
/* 单行注释 */
/* 多行注释 */
CSS引入方式
- 内部样式表（开发练习常用）：
<head> <style> p { color: green; } </style> </head> - 外部样式表（生产推荐）：
<head> <link rel="stylesheet" href="styles.css"> </head> - 内联样式（不推荐）：
<div style="color: green;">内容</div>
CSS选择器详解
基本选择器
HTML标签可通过类型、id属性和class属性来区分：
- id：页面唯一标识，每个id只能使用一次
- class：可重复使用，一个标签可包含多个class值，用于分组
| 选择器类型 | 语法示例 |
|---|---|
| 标签选择器 | p |
| ID选择器 | #header |
| 类选择器 | .highlight |
| 通用选择器 | * |
通用选择器常用于重置默认样式：
.highlight {
color: green;
}
#header {
background-color: yellow;
}
组合选择器
当需要精确选择特定上下文中的元素时，可以使用组合选择器：
| 类型 | 语法 | 说明 |
|---|---|---|
| 后代选择器 | div p |
选择div内所有p元素 |
| 子元素选择器 | div > p |
选择div的直接子p元素 |
| 相邻兄弟选择器 | div + p |
选择紧接div后的p元素 |
| 通用兄弟选择器 | div ~ p |
选择div后面的所有p元素 |
<div id="content">
<p>第一行</p>
<p>第二行 <span>[内嵌span]</span></p>
<p>第三行</p>
非段落文本
<p>第四行</p>
<p>第五行</p>
<div><p>嵌套段落</p></div>
</div>
<p>外部段落1</p>
<p>外部段落2</p>
<span class="highlight extra">额外标签</span>
分组与嵌套
- 分组：使用逗号分隔多个选择器，为它们应用相同样式
- 嵌套：在选择器后附加类选择器进行筛选
/* 分组示例 */
h1, p, .highlight {
font-weight: bold;
}
/* 嵌套示例 */
div.highlight {
background-color: #f0f0f0;
}
/* 综合使用 */
#content p.special {
color: red;
}
属性选择器
/* 匹配包含username属性的元素 */
[username] {
border: 1px solid blue;
}
/* 匹配username属性值为admin的元素 */
[username='admin'] {
background-color: lightblue;
}
/* 匹配拥有username属性的div元素 */
div[username] {
padding: 10px;
}
伪类选择器
用于定义元素的特殊状态：
/* 链接状态 */
a:link { color: #FF0000; }
a:hover { color: #FF00FF; }
a:active { color: #0000FF; }
a:visited { color: #00FF00; }
/* 输入框焦点 */
input:focus {
background-color: lightyellow;
outline: 2px solid blue;
}
伪元素选择器
用于向元素添加特殊效果：
/* 首字母样式 */
p::first-letter {
font-size: 48px;
color: red;
}
/* 在内容前插入内容 */
p::before {
content: "★ ";
color: gold;
}
/* 在内容后插入内容 */
p::after {
content: " [?]";
color: blue;
}
注意：通过伪元素插入的内容不可被用户选中。
选择器优先级
- 同级选择器：遵循就近原则，后定义的样式覆盖先定义的
- 不同级选择器：优先级从高到低为：内联样式 > ID选择器 > 类选择器 > 标签选择器
<head>
<style>
#unique { color: blue; } /* 最高优先级 */
.group { color: red; } /* 中等优先级 */
div { color: yellow; } /* 最低优先级 */
</style>
</head>
<body>
<div id="unique" class="group" style="color: green;">内联样式优先</div>
</body>
CSS样式属性
字体与文本样式
| 属性 | 示例值 | 说明 |
|---|---|---|
font-size |
16px |
字体大小 |
font-weight |
bold |
字体粗细 |
color |
#333 |
文字颜色 |
text-align |
center |
文本对齐方式 |
text-decoration |
none |
文本装饰（常用于移除链接下划线） |
text-indent |
2em |
首行缩进 |
颜色取值方式
- 颜色名称：
red、green等 - 十六进制：
#FF0000 - RGB/RGBA：
rgb(255, 0, 0)、rgba(255, 0, 0, 0.5)
背景属性
div {
width: 800px;
height: 600px;
background-color: #f0f0f0;
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
/* 简写形式 */
background: #f0f0f0 url('bg.jpg') no-repeat center/cover;
}
隐藏元素
display: none：完全隐藏元素，不占据空间visibility: hidden：隐藏元素，但保留占位空间
边框属性
/* 完整边框设置 */
.box {
border-width: 2px;
border-style: solid;
border-color: #333;
border-radius: 8px;
/* 简写 */
border: 2px solid #333;
border-radius: 50%; /* 圆形效果 */
}
/* 单边设置 */
.box-left {
border-left: 5px solid red;
}
/* 多边统一设置 */
.box-multi {
border-width: 5px 10px; /* 上下 左右 */
border-style: dashed solid;
border-color: blue green red yellow; /* 上 右 下 左 */
}
盒子模型
每个HTML元素都可视为一个盒子，包含：
- content：实际内容区域
- padding：内边距（内容与边框的距离）
- border：边框
- margin：外边距（元素间的距离）
/* margin和padding统一设置 */
.element {
margin: 20px; /* 四边相同 */
margin: 20px 10px; /* 上下 左右 */
margin: 20px 10px 5px; /* 上 左右 下 */
margin: 20px 10px 5px 0; /* 上 右 下 左 */
padding: 15px;
/* 水平居中 */
margin: 20px auto;
}
盒子模型对齐规则
- 相邻盒子的margin不叠加，取较大值
- 嵌套盒子的margin和padding不叠加，取较大值
浮动布局
浮动用于实现块级元素的左右排列布局。但会导致父元素塌陷。
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
/* 清除浮动 - 解决塌陷问题 */
.clearfix::after {
content: '';
display: block;
clear: both;
}
溢出处理
.container {
width: 200px;
height: 200px;
overflow: hidden; /* 隐藏溢出内容 */
/* overflow: scroll; */ /* 显示滚动条 */
/* overflow: auto; */ /* 需要时显示滚动条 */
}
/* 圆形头像效果 */
.avatar {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
}
.avatar img {
max-width: 100%;
}
定位属性
| 定位类型 | 属性值 | 特点 |
|---|---|---|
| 静态定位 | static |
默认值，按正常文档流排列 |
| 相对定位 | relative |
相对于自身原位置偏移，保留原占位空间 |
| 绝对定位 | absolute |
相对于最近已定位父元素偏移，不占文档流 |
| 固定定位 | fixed |
相对于浏览器窗口固定，不占文档流 |
/* 相对定位 */
.relative-box {
position: relative;
top: 20px;
left: 30px;
}
/* 绝对定位 */
.absolute-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 居中 */
}
/* 固定定位 - 回到顶部按钮 */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 1000;
}
层叠顺序 (z-index)
z-index控制元素的堆叠顺序，值越大的元素越靠上显示：
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
