CSS 基础：从入门到实践

CSS 基础：从入门到实践1. CSS 介绍什么是 CSS (Cascading Style Sheets)CSS 的作用：美化网页，控制网页布局CSS 的发展历程：CSS1, CSS2, CSS32. CSS 语法与引入方式CSS 规则：选择器、声明块、属性、值引入 CSS 的三种方式：内联样式 (Inline Style)内部样式表 (Internal Style Sheet)外部样式表 (External Style Sheet)CSS 优先级与继承3. CSS 选择器基本选择器：元素选择器 (Element Selector)类选择器 (Class Selector)ID 选择器 (ID Selector)通配符选择器 (Universal Selector)组合选择器：后代选择器 (Descendant Selector)子选择器 (Child Selector)相邻兄弟选择器 (Adjacent Sibling Selector)通用兄弟选择器 (General Sibling Selector)属性选择器伪类选择器：`:hover`, `:active`, `:focus`, `:nth-child()` 等伪元素选择器：`::before`, `::after`, `::first-letter`, `::first-line` 等4. CSS 常用属性文本属性：`color`, `font-size`, `font-family`, `text-align`, `line-height` 等背景属性：`background-color`, `background-image`, `background-repeat`, `background-position` 等边框属性：`border`, `border-width`, `border-style`, `border-color` 等列表属性：`list-style-type`, `list-style-image`, `list-style-position` 等显示属性：`display` (block, inline, inline-block, none)可见性属性：`visibility`, `opacity`5. 盒模型 (Box Model)内容 (Content)内边距 (Padding)边框 (Border)外边距 (Margin)`box-sizing` 属性：`content-box`, `border-box`6. 浮动与定位浮动 (Float)：`float` (left, right, none)清除浮动 (Clearfix)定位 (Position)：`static` (默认)`relative` (相对定位)`absolute` (绝对定位)`fixed` (固定定位)`sticky` (粘性定位)`z-index` 属性7. Flexbox 布局 (弹性盒模型)Flex 容器与 Flex 项目容器属性：`flex-direction`, `flex-wrap`, `justify-content`, `align-items`, `align-content`项目属性：`order`, `flex-grow`, `flex-shrink`, `flex-basis`, `align-self`8. Grid 布局 (网格布局)Grid 容器与 Grid 项目容器属性：`grid-template-columns`, `grid-template-rows`, `grid-gap` 等项目属性：`grid-column`, `grid-row` 等9. 响应式设计 (Responsive Web Design)媒体查询 (Media Queries)视口 (Viewport)弹性图片与流式布局10. 实践案例：美化个人简历页面基于 HTML 基础文章中的简历页面使用 CSS 进行布局和样式美化实现简单的响应式效果11. 总结与展望CSS 学习路径建议未来发展方向 (CSS 变量, CSS-in-JS, 预处理器等)