CSS（层叠样式表）用于控制网页的样式和布局，使网页更加美观和用户友好。
CSS 引入方式
CSS 有三种主要的引入方式：
1. 内联样式
<div style="color: red; font-size: 16px; margin: 10px;">
这是一个使用内联样式的元素
</div>
<p style="background-color: #f0f0f0; padding: 15px; border: 1px solid #ccc;">
带背景和边框的段落
</p>
2. 内部样式表
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
}
.btn {
background: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn:hover {
background: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>页面标题</h1>
<button class="btn">点击按钮</button>
</div>
</body>
</html>
3. 外部样式表
<!-- HTML 文件中引入 -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="responsive.css" media="screen and (max-width: 768px)">
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
/* styles.css 文件内容 */
/* 重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 基础样式 */
body {
font-family: "Microsoft YaHei", sans-serif;
line-height: 1.6;
color: #333;
}
/* 布局样式 */
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 1rem 0;
text-align: center;
}
.main-content {
display: flex;
min-height: 80vh;
}
.sidebar {
width: 250px;
background: #f8f9fa;
padding: 20px;
}
.content {
flex: 1;
padding: 20px;
}
CSS 选择器
常用的 CSS 选择器类型：
/* 元素选择器 */
div {
margin: 10px;
}
/* 类选择器 */
.container {
max-width: 1200px;
}
/* ID 选择器 */
#header {
background: #333;
}
/* 属性选择器 */
input[type="text"] {
border: 1px solid #ccc;
}
/* 伪类选择器 */
a:hover {
color: red;
}
button:active {
transform: scale(0.98);
}
/* 伪元素选择器 */
p::first-line {
font-weight: bold;
}
/* 后代选择器 */
.container p {
line-height: 1.6;
}
/* 子元素选择器 */
ul > li {
list-style: none;
}
/* 相邻兄弟选择器 */
h1 + p {
margin-top: 0;
}
/* 通用选择器 */
* {
box-sizing: border-box;
}
盒模型
CSS 盒模型包含内容、内边距、边框和外边距：
.box-model {
/* 内容尺寸 */
width: 300px;
height: 200px;
/* 内边距 */
padding: 20px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
/* 边框 */
border: 2px solid #007bff;
border-radius: 8px;
/* 外边距 */
margin: 20px auto;
/* 背景 */
background-color: #f8f9fa;
/* 盒模型计算方式 */
box-sizing: border-box; /* 或 content-box */
}
/* 实际总宽度计算：
border-box: width = 内容 + padding + border
content-box: 总宽度 = width + padding + border + margin
*/
布局技术
常用的 CSS 布局方式：
.container {
display: flex;
flex-direction: row; /* row | row-reverse | column | column-reverse */
justify-content: center; /* flex-start | flex-end | center | space-between | space-around */
align-items: center; /* stretch | flex-start | flex-end | center | baseline */
flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
gap: 10px; /* 项目间距 */
}
.item {
flex: 1; /* 弹性比例 */
flex-grow: 0; /* 放大比例 */
flex-shrink: 1; /* 缩小比例 */
flex-basis: 200px; /* 初始尺寸 */
align-self: flex-start; /* 单个项目对齐 */
}
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 列定义 */
grid-template-rows: 100px auto 100px; /* 行定义 */
gap: 20px; /* 间距 */
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
/* 响应式网格 */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
}
样式属性分类
文字样式
.text-style {
/* 字体 */
font-family: "Microsoft YaHei", Arial, sans-serif;
font-size: 16px;
font-weight: normal; /* normal | bold | 100-900 */
font-style: normal; /* normal | italic | oblique */
/* 文本 */
color: #333333;
text-align: left; /* left | right | center | justify */
line-height: 1.6;
text-decoration: none; /* underline | overline | line-through */
text-transform: none; /* uppercase | lowercase | capitalize */
letter-spacing: 1px;
word-spacing: 2px;
/* 高级文字效果 */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-webkit-text-stroke: 1px black; /* 文字描边 */
}
背景样式
.background-style {
/* 纯色背景 */
background-color: #ffffff;
/* 图片背景 */
background-image: url("background.jpg");
background-repeat: no-repeat; /* repeat | repeat-x | repeat-y | no-repeat */
background-position: center center; /* x y */
background-size: cover; /* cover | contain | length */
background-attachment: fixed; /* scroll | fixed | local */
/* 渐变背景 */
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
background: radial-gradient(circle, #ff6b6b, #4ecdc4);
/* 多重背景 */
background:
url("pattern.png") repeat,
linear-gradient(45deg, rgba(255,255,255,0.8), rgba(255,255,255,0.8));
}
边框和阴影
.border-shadow {
/* 边框 */
border: 1px solid #ddd;
border-width: 1px;
border-style: solid; /* none | hidden | dotted | dashed | solid | double */
border-color: #cccccc;
border-radius: 8px;
/* 单独设置各边 */
border-top: 2px solid blue;
border-right: 1px dashed red;
border-bottom: 3px dotted green;
border-left: 1px solid #ccc;
/* 阴影 */
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
/* 参数：水平偏移 垂直偏移 模糊半径 扩散半径 颜色 */
/* 内阴影 */
box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
/* 多重阴影 */
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 4px 8px rgba(0,0,0,0.05);
}
动画和过渡
.transition-example {
background: #007bff;
transition: all 0.3s ease-in-out;
/* 属性：transition-property | transition-duration | transition-timing-function | transition-delay */
}
.transition-example:hover {
background: #0056b3;
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(0,123,255,0.3);
}
/* 单独设置不同属性的过渡 */
.complex-transition {
transition:
background-color 0.3s ease,
transform 0.2s ease-out,
opacity 0.5s linear 0.1s;
}
@keyframes slideIn {
0% {
opacity: 0;
transform: translateX(-100%);
}
80% {
transform: translateX(10px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.animated-element {
animation: slideIn 0.5s ease-out forwards;
/* 属性：animation-name | animation-duration | animation-timing-function |
animation-delay | animation-iteration-count | animation-direction |
animation-fill-mode | animation-play-state */
}
/* 动画控制 */
.controlled-animation {
animation-name: bounce;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0.2s;
animation-iteration-count: infinite; /* 1 | infinite */
animation-direction: alternate; /* normal | reverse | alternate | alternate-reverse */
animation-fill-mode: both; /* none | forwards | backwards | both */
animation-play-state: running; /* running | paused */
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
响应式设计
/* 移动设备优先 */
.container {
padding: 10px;
font-size: 14px;
}
/* 平板设备 */
@media (min-width: 768px) {
.container {
padding: 20px;
font-size: 16px;
}
}
/* 桌面设备 */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
font-size: 18px;
}
}
/* 特定设备方向 */
@media (orientation: landscape) {
.header {
height: 80px;
}
}
/* 高分辨率屏幕 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo {
background-image: url("logo@2x.png");
background-size: contain;
}
}
CSS 最佳实践
- 使用外部样式表，避免内联样式
- 采用移动优先的响应式设计
- 使用语义化的类名和选择器
- 合理使用 CSS 变量（自定义属性）
- 注意选择器性能，避免过度嵌套
- 使用 Flexbox 和 Grid 进行现代布局
- 添加适当的浏览器前缀兼容性
- 使用 CSS 预处理器（如 Sass、Less）提高开发效率
注意：在实际项目中，建议使用 CSS 重置或标准化样式来确保浏览器一致性，并考虑使用 CSS 框架（如 Bootstrap、Tailwind CSS）来加速开发。
提示： 这是一个重要的概念，需要特别注意理解和掌握。
注意： 这是一个常见的错误点，请避免犯同样的错误。