CSS样式设置实战指南

"本资源主要介绍了如何使用CSS进行样式设置，并提供了常见的HTML标签的语义化用法以及常用中文字体的英文名称和Unicode编码。同时，还涉及了CSS选择器的一些基本应用，如子代选择器和属性选择器。" 在CSS（层叠样式表）中，设置样式是其核心功能，用于控制网页元素的外观。在这个案例中，我们学习了如何为不同的HTML标签设置样式。首先，将`<p>`标签的背景色设置为红色，这可以通过以下CSS代码实现： ```css p { background-color: red; } ``` 接着，将`<h1>`标签的字体颜色设置为绿色，对应的CSS代码是： ```css h1 { color: green; } ``` 最后，调整`<span>`标签的文本大小为14像素，可以这样写： ```css span { font-size: 14px; } ``` HTML5引入了语义化的标签，以更好地描述网页内容结构。例如： - `header`：通常用于页眉，包含网站标识、导航链接等。 - `nav`：定义导航链接的部分。 - `footer`：表示页脚，通常包含版权信息、联系方式等。 - `content` 或 `container`：用于包裹主要内容。 - `sidebar`：表示侧边栏，常用于放置辅助信息。 - `column`：用于创建多列布局。 - `wrapper`：用于控制页面整体布局的宽度。 - `loginbar`：登录条，用于用户登录区域。 - `logo`：展示网站或品牌的图标。 - `banner`：广告横幅，显示广告信息。 - `main`：页面的主要内容。 - `hot` 和 `news`：热点和新闻模块。 在CSS选择器方面，子代选择器（`>`）允许我们选择特定元素的直接子元素，例如： ```css div > p { color: red; } ``` 这段代码只会改变`<div>`元素内的直接`<p>`子元素的颜色。属性选择器则允许我们根据HTML标签的属性来设置样式，如： ```css p[class][id] { color: red; } ``` 这将改变所有具有`class`或`id`属性的`<p>`标签的字体颜色。 此外，中文字体在CSS中也有其英文名称和Unicode编码，例如： - 宋体：SimSun，Unicode编码`\5B8B\4F53` - 新宋体：NSimSun，`\65B0\5B8B\4F53` - 黑体：SimHei，`\9ED1\4F53` - 微软雅黑：Microsoft YaHei，`\5FAE\8F6F\96C5\9ED1` - 楷体：KaiTi_GB2312，`\6977\4F53_GB2312` - 隶书：LiS，`\96B6\4E66` 了解这些基础知识，能帮助开发者更好地控制网页的视觉呈现和结构，提升用户体验。