前端基础：从0到1实现简单网页效果（二）
HTML 选择器基础
HTML 选择器用于在 CSS 或 JavaScript 中定位和操作 HTML 元素。常见的选择器类型包括标签选择器、类选择器、ID 选择器、属性选择器等。
标签选择器
标签选择器直接使用 HTML 元素名称，匹配文档中所有该类型的元素。
<p>这是一个段落。</p>
p {color: blue;
}
类选择器
类选择器以 . 开头，匹配 class 属性中包含指定值的元素。
<div class="example">示例内容</div>
.example {background-color: yellow;
}
ID 选择器
ID 选择器以 # 开头，匹配 id 属性为指定值的元素（ID 在文档中唯一）。
<div id="header">标题</div>
#header {font-size: 24px;
}
属性选择器
属性选择器根据元素的属性或属性值匹配元素。
<input type="text" placeholder="输入内容">
input[type="text"] {border: 1px solid gray;
}
后代选择器
后代选择器通过空格分隔，匹配某个元素内的所有指定后代元素。
<div><p>段落内容</p>
</div>
div p {margin: 10px;
}
子选择器
子选择器使用 > 符号，仅匹配直接子元素。
<ul><li>列表项</li>
</ul>
ul > li {list-style-type: square;
}
伪类选择器
伪类选择器用于定义元素的特殊状态，如 :hover、:active 等。
a:hover {color: red;
}
伪元素选择器
伪元素选择器用于选择元素的特定部分，如 ::before 或 ::after。
p::first-line {font-weight: bold;
}
组合选择器
组合选择器通过逗号分隔，同时匹配多个选择器。
h1, h2, h3 {font-family: Arial;
}
通用选择器
通用选择器 * 匹配所有元素。
* {margin: 0;padding: 0;
}
HTML 块元素概述
HTML 块元素（Block-level Elements）是指在页面中以独立块形式显示的元素，通常占据一整行，并会在前后自动换行。这些元素常用于构建页面的主要结构，如段落、标题、列表等。
常见块元素列表
<div>
通用容器，用于组合其他元素或样式化布局。<div>这是一个div块</div><p>
定义段落，默认会在前后添加间距。<p>这是一个段落</p><h1>到<h6>
标题元素，<h1>级别最高，<h6>最低。<h1>主标题</h1> <h2>副标题</h2><ul>、<ol>、<li>
无序列表、有序列表和列表项。<ul><li>项目1</li><li>项目2</li> </ul><table>、<tr>、<td>
表格及其行和单元格。<table><tr><td>单元格1</td></tr> </table><form>
表单容器，用于收集用户输入。<form><input type="text" /> </form>
块元素的特点
- 默认占据整行：块元素会从新行开始，并延伸到其父元素的宽度。
- 支持宽高设置：可以通过 CSS 直接设置宽度和高度。
- 可嵌套其他元素：块元素可以包含内联元素或其他块元素。
块元素与内联元素的区别
| 特性 | 块元素 | 内联元素 |
|---|---|---|
| 换行行为 | 独占一行 | 不换行 |
| 宽高设置 | 支持 | 不支持 |
| 默认宽度 | 父元素宽度的 100% | 由内容决定 |
| 典型元素 | <div>、<p>、<h1> | <span>、<a>、<img> |
使用 CSS 控制块元素
通过 CSS 可以修改块元素的默认行为，例如将块元素转换为内联块（display: inline-block）以实现水平排列。
div {display: inline-block;width: 100px;
}
注意事项
- 避免嵌套过多块元素，可能导致渲染性能问题。
- 合理使用语义化标签（如
<article>、<section>）以提升可访问性。
CSS 属性概述
CSS（Cascading Style Sheets）用于控制网页的样式和布局，包含多种属性，涵盖文本、颜色、背景、边框、盒模型、定位、动画等方面。以下分类介绍主要 CSS 属性及其用途。
文本属性
font-family
定义文本的字体系列，可以指定多个字体作为备选。
p { font-family: "Arial", sans-serif; }
font-size
设置字体大小，单位包括 px、em、rem 等。
h1 { font-size: 24px; }
font-weight
控制字体的粗细，常用值包括 normal、bold、lighter 或数值（如 400、700）。
strong { font-weight: bold; }
text-align
定义文本的水平对齐方式，可选 left、center、right、justify。
div { text-align: center; }
text-decoration
设置文本装饰，如下划线、删除线等。
a { text-decoration: none; }
颜色与背景属性
color
定义文本颜色，支持十六进制、RGB、HSL 或颜色名称。
p { color: #333; }
background-color
设置元素的背景颜色。
body { background-color: #f5f5f5; }
background-image
指定元素的背景图像。
header { background-image: url("image.jpg"); }
background-size
控制背景图像的尺寸，如 cover、contain 或具体数值。
div { background-size: cover; }
盒模型属性
width 和 height
定义元素的宽度和高度。
.box { width: 200px; height: 100px; }
margin
设置元素的外边距，控制与其他元素的间距。
div { margin: 10px; }
padding
定义元素的内边距，控制内容与边框的距离。
div { padding: 15px; }
border
设置边框样式，包括宽度、类型和颜色。
div { border: 1px solid #000; }
定位与布局属性
display
控制元素的显示方式，如 block、inline、flex、grid。
nav { display: flex; }
position
定义元素的定位方式，可选 static、relative、absolute、fixed。
div { position: relative; }
float
使元素向左或向右浮动，常用于图文混排。
img { float: left; }
动画与过渡属性
transition
定义属性变化的过渡效果，需指定属性、持续时间和时间函数。
button { transition: background-color 0.3s ease; }
animation
通过关键帧创建复杂动画效果。
@keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }
}
div { animation: fadeIn 2s; }
响应式设计属性
media queries
根据设备特性（如屏幕宽度）应用不同样式。
@media (max-width: 768px) {body { font-size: 14px; }
}
flexbox 和 grid
现代布局技术，用于创建灵活的响应式设计。
.container { display: grid; grid-template-columns: 1fr 1fr; }
其他常用属性
opacity
控制元素的透明度，范围从 0（完全透明）到 1（不透明）。
img { opacity: 0.8; }
box-shadow
为元素添加阴影效果。
div { box-shadow: 2px 2px 5px rgba(0,0,0,0.3); }
z-index
定义元素的堆叠顺序，数值越大越靠前。
.modal { z-index: 100; }
CSS 属性繁多且功能强大，合理使用可以实现丰富的视觉效果和交互体验。建议结合具体项目需求，逐步掌握各类属性的用法。