css（层叠样式表）是创建具有视觉吸引力的网站的基石技术。它允许开发人员设置 html 元素的样式、控制布局并增强用户体验。本文将指导您了解 css 基础知识和中级概念，确保您可以自信地设计网页样式。
什么是css？
css 用于设置 html 元素的样式，定义它们的外观（例如颜色、字体、间距）。它将内容 （html） 与演示文稿 （css） 分开。
示例：设置
元素的样式：
<h1 style="color: blue;">hello world</h1>
三种类型的 css
内联 css：使用 style 属性直接应用于元素。 例子：
<p style="color: red;">this is a red paragraph.</p>
内部 css：编写在 html 文件的 部分的
<style>
body {
background-color: #f0f0f0;
}
</style>外部 css：通过 .css 文件链接，以确保多个页面之间的一致性。 例子：
<link rel="stylesheet" href="styles.css">
选择器用于针对 html 元素进行样式设置。
通用选择器 （*）：设置所有元素的样式。
类型选择器（元素）：针对特定标签，例如
。
类选择器（.classname）：针对具有特定类的元素。 例子：
<style>
.highlight { color: yellow; }
</style>
<p class="highlight">highlighted text</p>id 选择器（#id）：针对唯一 id。 例子：
<style>
#unique { color: green; }
</style>
<p id="unique">unique text</p>文本和字体样式
颜色：设置文本颜色。
font-size：定义文本大小。
font-family：指定字体。 例子：
<style>
p { color: navy; font-size: 16px; font-family: arial; }
</style>背景样式
背景颜色：设置背景颜色。
背景图像：添加背景图像。 例子：
<style>
body { background-color: lightblue; background-image: url('background.jpg'); }
</style>盒模型解释了元素的结构：
content：元素内的实际内容。
padding：内容和边框之间的空间。
边框：包含填充和内容。
边距：元素与相邻元素之间的空间。
示例：
<style>
div {
width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}
</style>定位
static：默认流。
相对：相对于其正常位置定位。
绝对：相对于最近定位的祖先定位。
固定：滚动期间保持在原位。 例子：
<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 转换为美观、实用的网页。通过了解基础知识并深入了解中级概念，您将获得创建响应灵敏、具有视觉吸引力的设计的技能。练习设计简单的项目（例如个人作品集）以掌握这些技术。
评论列表
感觉好难