CSS样式设置实战指南
需积分: 44 65 浏览量
更新于2024-08-17
收藏 3.43MB PPT 举报
"本资源主要介绍了如何使用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`
了解这些基础知识,能帮助开发者更好地控制网页的视觉呈现和结构,提升用户体验。
2021-10-05 上传
2022-04-09 上传
2012-03-17 上传
2023-06-03 上传
2023-04-19 上传
2023-12-19 上传
2024-04-03 上传
2023-07-19 上传
2023-03-11 上传
![](https://profile-avatar.csdnimg.cn/default.jpg!1)
getsentry
- 粉丝: 23
- 资源: 2万+
最新资源
- 解决Eclipse配置与导入Java工程常见问题
- 真空发生器:工作原理与抽吸性能分析
- 爱立信RBS6201开站流程详解
- 电脑开机声音解析:故障诊断指南
- JAVA实现贪吃蛇游戏
- 模糊神经网络实现与自学习能力探索
- PID型模糊神经网络控制器设计与学习算法
- 模糊神经网络在自适应PID控制器中的应用
- C++实现的学生成绩管理系统设计
- 802.1D STP 实现与优化:二层交换机中的生成树协议
- 解决Windows无法完成SD卡格式化的九种方法
- 软件测试方法:Beta与Alpha测试详解
- 软件测试周期详解:从需求分析到维护测试
- CMMI模型详解:软件企业能力提升的关键
- 移动Web开发框架选择:jQueryMobile、jQTouch、SenchaTouch对比
- Java程序设计试题与复习指南