HTML入门教程7：HTML样式
一、CSS基础
1. CSS简介
CSS（Cascading Style Sheets）用于描述HTML元素在屏幕、纸张或其他媒体上的显示方式。它可以控制元素的布局、颜色、字体、间距等。
2. CSS的三种应用方式
- 内联样式：直接在HTML元素的
style属性中定义样式。 - 内部样式表：在HTML文档的
<head>部分使用<style>标签定义样式。 - 外部样式表：将样式定义在单独的
.css文件中，并通过<link>标签链接到HTML文档。
二、CSS选择器
1. 基本选择器
- 元素选择器：选择所有指定名称的元素。
- 类选择器：选择所有具有指定类名的元素，类名前加点号（.）。
- ID选择器：选择具有指定ID的元素，ID前加井号（#）。
- 通配符选择器：选择所有元素（*）。
2. 组合选择器
- 后代选择器：选择某元素后代中的所有指定元素（空格分隔）。
- 子选择器：选择某元素子代中的所有指定元素（大于号分隔）。
- 相邻兄弟选择器：选择紧接在另一元素后的元素（加号分隔）。
- 通用兄弟选择器：选择在另一元素之后的所有兄弟元素（波浪线分隔）。
三、CSS盒模型
盒模型是CSS布局的基础，它描述了元素如何占用空间。每个元素都被表示为一个矩形盒子，盒子包括内容、内边距（padding）、边框（border）和外边距（margin）。
四、CSS布局
1. 标准流
元素按照在HTML中出现的顺序排列，这是默认的布局方式。
2. 浮动
使用float属性可以让元素浮动到其容器的左侧或右侧，其他内容将围绕浮动元素排列。
3. 定位
使用position属性可以对元素进行精确定位，包括静态定位（默认）、相对定位、绝对定位、固定定位和粘性定位。
4. Flexbox布局
Flexbox是一个一维布局模型，它可以让容器内的元素能够灵活地调整大小和顺序，以适应不同屏幕尺寸和方向。
5. Grid布局
Grid是一个二维布局模型，它允许你创建具有行和列的网格，并将元素放置在网格的特定区域中。
五、CSS响应式设计
响应式设计使网页能够在不同设备和屏幕尺寸上良好地显示。这通常通过使用媒体查询（@media）和灵活的网格布局来实现。
六、CSS动画和过渡
CSS提供了动画和过渡效果，使元素能够在不同状态之间平滑转换。动画可以定义关键帧，而过渡则定义了元素属性在状态变化时的过渡方式。
七、CSS优先级和特异性
当多个样式规则应用于同一元素时，优先级和特异性规则决定了哪个样式会被应用。特异性是基于选择器的类型和数量来计算的，而优先级则可以通过!important声明来提升。
八、使用CSS的注意事项
- 保持样式表简洁：避免冗余和重复的样式规则。
- 使用有意义的类名：类名应该能够反映元素的功能或外观。
- 遵循最佳实践：如使用CSS预处理器（如Sass或Less）、CSS框架（如Bootstrap）和CSS重置样式表等。
- 考虑可访问性：确保样式不会妨碍用户访问内容，特别是对于那些使用屏幕阅读器或需要高对比度显示的用户。
通过掌握这些HTML样式的基础知识和技巧，你可以创建出布局合理、视觉吸引人的网页。随着经验的积累，你还可以进一步探索CSS的高级特性，如变量、自定义属性和伪元素等。