css（层叠样式表）是创建具有视觉吸引力的网站的基石技术。它允许开发人员设置 html 元素的样式、控制布局并增强用户体验。本文将指导您了解 css 基础知识和中级概念，确保您可以自信地设计网页样式。
什么是css？
css 用于设置 html 元素的样式，定义它们的外观（例如颜色、字体、间距）。它将内容 (html) 与演示文稿 (css) 分开。
示例：设置 <h1> 元素的样式：
<h1 style="color: blue;">hello world</h1>
三种类型的 css
<p style="color: red;">this is a red paragraph.</p>
<style>
body {
background-color: #f0f0f0;
}
</style>
<link rel="stylesheet" href="styles.css">
选择器用于针对 html 元素进行样式设置。
<style>
.highlight { color: yellow; }
</style>
<p class="highlight">highlighted text</p>
<style>
#unique { color: green; }
</style>
<p id="unique">unique text</p>
文本和字体样式
<style>
p { color: navy; font-size: 16px; font-family: arial; }
</style>
背景样式
<style>
body { background-color: lightblue; background-image: url('background.jpg'); }
</style>
盒模型解释了元素的结构：
边距：元素与相邻元素之间的空间。
示例：
<style>
div {
width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}
</style>
定位
<style>
div { position: absolute; top: 50px; left: 100px; }
</style>
flexbox
flexbox 简化了创建灵活且响应式布局的过程。
示例：
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
网格
css grid 提供了强大的布局系统。
示例：
<style>
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
</style>
伪类：根据元素的状态设置样式。
示例：悬停效果
<style>
a:hover { color: red; }
</style>
伪元素：为元素的特定部分设置样式。
示例：在元素之前添加内容：
<style>
p::before { content: "note: "; font-weight: bold; }
</style>
媒体查询根据屏幕尺寸调整样式。
示例：
<style>
@media (max-width: 600px) {
body { background-color: lightgray; }
}
</style>
转场和动画
示例：
<style>
div {
transition: transform 0.5s;
}
div:hover {
transform: scale(1.2);
}
</style>
css 变量
示例：
<style>
:root { --main-color: blue; }
p { color: var(--main-color); }
</style>
css 将纯 html 转换为美观、实用的网页。通过了解基础知识并深入了解中级概念，您将获得创建响应灵敏、具有视觉吸引力的设计的技能。练习设计简单的项目（例如个人作品集）以掌握这些技术。
