工信版（中职）Web前端设计基础 项目六-2电子课件
2022-10-25
|
28页
|
199人阅读
|
5人下载
普通
资源信息
| 学段 | 中职 |
|---|---|
| 学科 | 职教专业课 |
| 课程 | 程序设计基础 |
| 教材版本 | - |
| 年级 | 高一 |
| 章节 | - |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学 |
| 学年 | 2022-2023 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 1.29 MB |
| 发布时间 | 2022-10-25 |
| 更新时间 | 2023-04-09 |
| 作者 | 匿名 |
| 品牌系列 | - |
| 审核时间 | 2022-10-25 |
| 下载链接 | https://m.zxxk.com/soft/35574055.html |
| 价格 | 0.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
YCF
（中职）Web前端设计基础 项目六-2电子课件
1
单击此处编辑母版文本样式
第二级
第三级
第四级
第五级
CSS 3的选择器
项目六
授课教师：姓名
WEB前端设计基础
学习情境一
授课教师：姓名
单击此处编辑母版标题样式
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
二 知识准备
CSS 3基本语法；
CSS 3引用方法；
CSS 3新增选择器。
CSS 3常用选择器；
CSS 3常用选择器
1.标签选择器
HTML 5文档是由多个不同的标签组成，CSS 3的标签选择器就是声明哪个标签使用什么样式。标签选择器也叫元素选择器，就是“选中”相同的元素，然后对相同的元素设置同一个CSS样式。基本形式如图所示。
CSS 3常用选择器
1.标签选择器
【例6-3】标签选择器实例，代码如下所示（示例文件6-3.html）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器实例</title>
<style>
body{font-family: "微软雅黑";font-size: 16px;}
div{width: 100px;height: 50px;background: red;}
</style>
</head>
<body>
<div>
标签选择器
</div>
<p>div{width: 100px;height: 50px;background: red;}</p>
</body>
</html>
在chrome浏览器中预览
CSS 3常用选择器
2.类选择器
在一个页面中，使用标签选择器会控制该页面中所有的同名标签的显示样式。如果需要同名标签显示不同的样式，此时仅使用标签选择器是不能达到效果的，还需要使用类（Class）选择器。
类选择器用来为一系列类名相同的标签定义相同的显示样式，基本形式如图所示。
类选择器的名称由编写者自己命名，前面必须要加上前缀“.”（英文点号），表明这是一个类选择器，否则该选择器无法生效。
CSS 3常用选择器
2.类选择器
【例6-4】类选择器实例，代码如下所示（示例文件6-4.html）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器实例</title>
<style>
body{font-family: "微软雅黑";font-size: 16px;}
.box{width: 100px;height: 50px;background: green;}
</style>
</head>
<body>
<div class="box">
类选择器
</div>
<p>.box{width: 100px;height: 50px;background: green;}</p>
</body>
</html>
在chrome浏览器中预览
CSS 3常用选择器
3.ID选择器
在网页设计中，可以为元素设置一个id，然后针对这个id进行CSS样式设置。由于ID选择器定义的是某一特定的HTML元素，所以在同一个页面中不允许出现两个相同的id。基本形式如图所示。
ID选择器的名称由编写者自己命名，前面必须要加上前缀“#”，表明这是一个ID选择器，否则该选择器无法生效。
CSS 3常用选择器
3.ID选择器
【例6-5】ID选择器实例，代码如下所示（示例文件6-5.html）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器实例</title>
<style>
body{font-family: "微软雅黑";font-size: 16px;}
#box{width: 100px;height: 50px;background: blue;color:white;}
</style>
</head>
<body>
<div id="box">
ID选择器
</div>
<p>#box{width: 100px;height: 50px;background: blue;color:white;}</p>
</body>
</html>
在chrome浏览器中预览
CSS 3常用选择器
4.全局选择器
如果一个页面中的所有HTML标签都使用一种样式，可以使用全局选择器
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。