365编程自学笔记--day008_CSS 汇总总结

什么是 CSS？
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述 HTML 或 XML 文档外观的样式表语言。它定义了网页的布局、颜色、字体等视觉效果。
CSS 的作用
- 分离内容与样式，便于维护和更新。
- 实现网页的美化和布局控制。
- 支持响应式设计，适应不同设备。
CSS 的编写方式
- 行内样式
- 内联样式
- 外联样式

基本语法结构
```
选择器 {
    属性: 值;
}
```
- 选择器：用于选择需要样式化的 HTML 元素。
- 声明块：包含一组属性和值，用 {} 包裹。
- 属性和值：属性是样式类型（如 color），值是具体设置（如 red）。
CSS 注释
```
/* 这是一个注释 */
```
CSS 的书写规范
- 每行一个声明。
- 缩进增加可读性。
- 使用小写字母和连字符（如 font-size）。

基本选择器
- 元素选择器：p { color: red; }
- 类选择器：.class { color: blue; }
- ID 选择器：#id { color: green; }
- 通配符选择器：* { margin: 0; }
组合选择器
- 后代选择器：div p { color: red; }
- 子元素选择器：div > p { color: blue; }
- 相邻兄弟选择器：h1 + p { color: green; }
- 通用兄弟选择器：h1 ~ p { color: yellow; }
属性选择器
- [type="text"] { border: 1px solid #ccc; }
- [href^="https"] { color: green; }（匹配以 https 开头的链接）
伪类选择器
- 动态伪类：:hover, :active, :focus
- 结构伪类：:first-child, :last-child, :nth-child(2)
伪元素选择器
- ::before, ::after, ::first-line, ::first-letter

盒模型的组成
- 内容（content）：元素的实际内容。
- 内边距（padding）：内容与边框之间的空间。
- 边框（border）：围绕内容和内边距的线条。
- 外边距（margin）：元素与其他元素之间的空间。
盒模型的类型
- 标准盒模型：width 和 height 只包含内容。
- 怪异盒模型：width 和 height 包含内容、内边距和边框。
box-sizing 属性
- content-box：标准盒模型。
- border-box：怪异盒模型。

文档流
元素默认按照从上到下、从左到右的顺序排列。
浮动（float）
- 特性：元素脱离文档流，向左或向右浮动。
- 清除浮动：clear: both;。
定位（position）
- static：默认定位。
- relative：相对自身定位。
- absolute：相对最近的非 static 祖先元素定位。
- fixed：相对视口定位。
- sticky：在滚动时固定在特定位置。
弹性盒子布局（Flexbox）
- 容器属性：display: flex, flex-direction, justify-content, align-items, flex-wrap。
- 项目属性：flex-grow, flex-shrink, flex-basis, order。
网格布局（Grid）
- 容器属性：display: grid, grid-template-columns, grid-template-rows, gap。
- 项目属性：grid-column, grid-row, grid-area。

文本样式
- font-family, font-size, font-weight, font-style。
- text-align, text-decoration, text-transform, line-height。
颜色和背景
- color, background-color, background-image, background-position, background-repeat。
边框和圆角
- border-width, border-style, border-color, border-radius。
阴影
- box-shadow, text-shadow。
过渡和动画
- transition, animation, @keyframes。

媒体查询（@media）

@media (max-width: 768px) {
    body { font-size: 14px; }
}

视口设置

<meta name="viewport" content="width=device-width, initial-scale=1.0">