CSS基础：标签选择器与常用样式设置

需积分: 44 161 浏览量更新于2024-08-17 收藏 3.43MB PPT 举报

在CSS基础教程中，标签选择器是理解HTML与CSS交互的关键组成部分。HTML标签，如`<html>`、`<body>`、`<h1>`、`<img>`等，是网页结构的基础，而CSS则通过这些标签来赋予页面样式和布局。标签选择器直接对应HTML元素，例如，我们可以使用`header`选择页面头部，`content/container`用于表示主要内容区域，`footer`指定页脚部分。 CSS提供了简单但强大的样式设置功能，包括： 1. **宽度和高度**：`width`用于设定元素的宽度，单位可以是像素（px），而`height`用于设置元素的高度。 2. **颜色**：`color`控制文本的前景色，即文字的颜色，如设置`color: red;`会让文字变为红色。 3. **背景色**：`background-color`用来设置元素的背景色，这对于区分文本和页面背景非常有用。 4. **字体大小**：`font-size`用于调整文本的字号，有助于实现良好的可读性。此外，CSS还支持更高级的选择器： - **子代选择器**：`div > p` 仅选中`div`元素内的直接子级`p`元素，例如，可以设置所有`div`内的段落文字颜色为红色。 - **属性选择器**：`p[class="class-name"]` 和 `p[id="id-name"]` 分别根据元素的类(class)和ID(id)来匹配元素，并设置样式。例如，可以选择所有`class`为"hot"的`p`元素改变颜色。字体选择方面，CSS允许指定字体名称，如常见的宋体（`SimSun`，Unicode编码 `\5B8B\4F53`）、新宋体 (`NSimSun`)，黑体 (`SimHei`)，以及Windows系统预设的微软雅黑 (`microsoft yahei`)，以及各种中文字体如楷体 (`KaiTi`) 和隶书 (`LiS`)。这些信息对于实现跨浏览器的中文排版至关重要。理解并熟练运用标签选择器和这些CSS属性，能够帮助开发者精确地控制网页布局和视觉呈现，是Web前端开发的基础技能之一。通过实践和学习，你可以逐步掌握更复杂的CSS选择器和样式规则，提升网页设计的灵活性和专业性。

Pa1nk1LLeR

粉丝: 67
资源: 2万+

CSS基础：标签选择器与常用样式设置

练习前端-CSS引入、基础选择器-day04

复习自测-CSS基础及选择器(1).doc

HTML---CSS----基础知识及代码----各种小程序网页设计

HTML关山月引入CSS样式表-链入式、CSS基础选择器-标签选择器

02-CSS基础.docx

农产品网页美化-CSS基础设置.pptx

练习前端-CSS权重计算、复杂选择器、基础属性-day05

shoot-to-kill-css-selector-intent:射杀； CSS选择器意图

02-CSS-TUGAS-4-CSS:任务4 CSS

me_html_css:html-css基础研究（首先在github上尝试）

最新资源