Effizienter CSS Komplettkurs

所在平台: Udemy

课程主页: https://www.udemy.com/course/effizienter-css-komplettkurs/

课程评论：没有评论

第一个写评论        关注课程

课程简介

## CSS 高效精通课程总结 本课程旨在快速、深入地教授 CSS 知识，确保学员在学完后能真正理解 CSS 的原理和应用。每节课都遵循“描述、语法、示例、有用信息、应用场景”的结构，并提供“能做什么、如何定义、如何应用、重要信息、何时使用”的问答环节，帮助学员巩固知识。 **课程涵盖的核心主题包括：** **一、 CSS 基础与引入** * HTML 中的 CSS 设置 * CSS 概述 * 行内 CSS (Inline CSS) **二、 颜色与单位** * **颜色值：** * 命名颜色 * 十六进制颜色 (Hex Colors) * RGB 颜色 * HSL 颜色 * 颜色透明度 * `transparent` 关键字 * `currentColor` 关键字 * **长度单位：** * `px` (像素) * `%` (百分比) * 视口单位 (`vw`, `vh`, `vmin`, `vmax`) * 相对单位 (`em`, `rem`) **三、 盒模型与文本样式** * **盒模型 (Box Model)：** * `box-sizing` * `padding` * `margin` * `border-style`, `border-width`, `border-color`, `border`, `border-radius` * `width`, `height`, `min-width`, `min-height`, `max-width`, `max-height` * **文本排版：** * `font-style`, `font-weight`, `font-size`, `line-height`, `font-family`, `font` * `@font-face` (自定义字体), Fallback Fonts, Google Fonts **四、 CSS 引入方式与层叠** * 内部 CSS (Internal CSS) * 外部 CSS (External CSS) * **层叠顺序 (Cascading Order):** * `important` * CSS 特异性 (Specificity) * **选择器 (Selectors):** * 元素选择器 * 类选择器 (`.class`) * ID 选择器 (`#id`) * 通用选择器 (`*`) * 属性选择器 (`[attribute|=value]`, `[attribute^=value]`, `[attribute$=value]`, `[attribute*=value]`, `[attribute~=value]`, `[attribute=value]`) * 群组选择器 (Selector Group) * 上下文选择器（后代选择器 ` ` , 子代选择器 `>`） * 相邻兄弟选择器 (`+`) * 通用兄弟选择器 (`~`) * 组合选择器 (Combined Selectors) **五、 布局与定位** * **`display` 属性 (1):** * `block`, `inline`, `inline-block`, `none` * `top`, `right`, `bottom`, `left` * `position` (`static`, `relative`, `absolute`, `fixed`, `sticky`) * `z-index` * `visibility` * `opacity` * `float`, `clear` * **Flex 布局 (2):** * `display: flex` * `flex-direction`, `flex-wrap`, `flex-flow` * `justify-content`, `align-content`, `align-items`, `justify-items` * `align-self`, `justify-self` * `flex-grow`, `flex-shrink`, `flex-basis`, `flex` * `gap`, `column-gap`, `row-gap` * `order` * **Grid 布局 (3):** * `display: grid` * `grid-template-columns`, `grid-template-rows` * `grid-column-start`, `grid-column-end`, `grid-column` * `grid-row-start`, `grid-row-end`, `grid-row` * `grid-auto-columns`, `grid-auto-rows` * `grid-auto-flow` * `grid-template-areas`, `grid-area` * `place-content`, `place-items`, `place-self` **六、 视觉效果与文本处理** * **特效：** * `text-shadow`, `box-shadow` * `text-decoration` (及其相关属性: `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, `text-decoration-thickness`) * `outline` (及其相关属性: `outline-style`, `outline-color`, `outline-width`, `outline-offset`) * `filter`, `backdrop-filter` * **文本对齐与换行：** * `text-align`, `text-align-last`, `vertical-align` * `text-indent` * `text-transform` * `font-variant` * `overflow` (及其变体: `overflow-x`, `overflow-y`) * `resize` * `overflow-wrap`, `white-space`, `text-overflow` * `word-break`, `letter-spacing`, `word-spacing` **七、 列表与表格样式** * `list-style-type`, `list-style-position`, `list-style-image`, `list-style` * `border-collapse`, `border-spacing`, `table-layout` **八、 CSS 变量与函数** * `root` * `var()` * `calc()`, `min()`, `max()` **九、 伪元素与伪类** * **伪元素 (`::`):** `::before`, `::after`, `::first-letter`, `::first-line`, `::marker` * **伪类 (`:`):** * 状态类: `:hover`, `:focus`, `:focus-within`, `:active` * 结构类: `:first-child`, `:last-child`, `:nth-child(n)`, `:nth-last-child(n)` * 类型类: `:first-of-type`, `:last-of-type`, `:nth-of-type(n)`, `:nth-last-of-type(n)` * 状态捕获类: `:empty`, `:only-child`, `:only-of-type` * 表单类: `:required`, `:optional`, `:disabled`, `:enabled`, `:invalid`, `:valid`, `:checked`, `:read-only`, `:read-write`, `:in-range`, `:out-of-range`, `:visited`, `:link` * 逻辑类: `:not(selector)` * 语言类: `:lang(language)` * 目标类: `:target` **十、 背景与渐变** * `background-image`, `background-position`, `background-size`, `background-repeat`, `background` * `background-attachment`, `background-origin`, `background-clip` * **渐变 (Gradients):** * `linear-gradient()`, `repeating-linear-gradient()` * `radial-gradient()`, `repeating-radial-gradient()` * `conic-gradient()`, `repeating-conic-gradient()` **十一、 动画与过渡** * **变换 (`transform`):** `translate()`, `scale()`, `rotate()`, `skew()` (及其X/Y/Z轴变体) * **过渡 (`transition`):** `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function`, `transition` * **动画 (`animation`):** `animation-name`, `animation-duration`, `animation-delay`, `animation-iteration-count`, `animation-direction`, `animation-timing-function`, `animation-fill-mode`, `animation-play-state`, `@keyframes` **十二、 多列布局与特殊属性** * **多列布局：** `column-count`, `column-width`, `columns` * `column-gap`, `column-span` * `column-rule-style`, `column-rule-width`, `column-rule-color`, `column-rule` * `column-rule-color`, `column-rule-width`, `column-rule-style` * `column-rule-color`, `column-rule-width` * `column-rule-color` * `column-direction`, `writing-mode`, `text-orientation` **十三、 引入与媒体查询** * `@import` * `@media` (媒体查询) 课程还包含一个**主题总览快速浏览**的章节，方便学员快速了解课程内容。

课程评论(0条)