掌握 css：从基础到中级
css（层叠样式表）是创建具有视觉吸引力的网站的基石技术。它允许开发人员设置 html 元素的样式、控制布局并增强用户体验。本文将指导您了解 css 基础知识和中级概念，确保您可以自信地设计网页样式。
1. css 简介
-
什么是css？
css 用于设置 html 元素的样式，定义它们的外观（例如颜色、字体、间距）。它将内容 (html) 与演示文稿 (css) 分开。
示例：设置 <h1> 元素的样式：<h1 style="color: blue;">hello world</h1>
-
三种类型的 css
- 内联 css：使用 style 属性直接应用于元素。 例子：
<p style="color: red;">this is a red paragraph.</p>
- 内部 css：编写在 html 文件的 <head> 部分的 <style> 标记内。 例子：
<style> body { background-color: #f0f0f0; } </style>- 外部 css：通过 .css 文件链接，以确保多个页面之间的一致性。 例子：
<link rel="stylesheet" href="styles.css">
2. css 选择器
-
选择器用于针对 html 元素进行样式设置。
- 通用选择器 (*)：设置所有元素的样式。
- 类型选择器（元素）：针对特定标签，例如 <h1>。
- 类选择器（.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>
3. css 属性和值
-
文本和字体样式
立即学习“前端免费学习笔记（深入）”；
- 颜色：设置文本颜色。
- 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>
4. css 盒子模型
盒模型解释了元素的结构：
- content：元素内的实际内容。
- padding：内容和边框之间的空间。
- 边框：包含填充和内容。
-
边距：元素与相邻元素之间的空间。
示例：<style> div { width: 200px; padding: 10px; border: 2px solid black; margin: 20px; } </style>
5. css 定位和布局
-
定位
- 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>
6. css 伪类和伪元素
-
伪类：根据元素的状态设置样式。
示例：悬停效果<style> a:hover { color: red; } </style> -
伪元素：为元素的特定部分设置样式。
示例：在元素之前添加内容：<style> p::before { content: "note: "; font-weight: bold; } </style>
7. 带有媒体查询的响应式设计
媒体查询根据屏幕尺寸调整样式。
示例：
<style>
@media (max-width: 600px) {
body { background-color: lightgray; }
}
</style>
8. 中级 css 技术
-
转场和动画
示例：<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>
9. 结论
css 将纯 html 转换为美观、实用的网页。通过了解基础知识并深入了解中级概念，您将获得创建响应灵敏、具有视觉吸引力的设计的技能。练习设计简单的项目（例如个人作品集）以掌握这些技术。
