工信版（中职）Web前端设计基础 项目六-3电子课件
2022-10-25
|
17页
|
102人阅读
|
6人下载
普通
资源信息
| 学段 | 中职 |
|---|---|
| 学科 | 职教专业课 |
| 课程 | 程序设计基础 |
| 教材版本 | - |
| 年级 | 高一 |
| 章节 | - |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学 |
| 学年 | 2022-2023 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 1.14 MB |
| 发布时间 | 2022-10-25 |
| 更新时间 | 2023-04-09 |
| 作者 | 匿名 |
| 品牌系列 | - |
| 审核时间 | 2022-10-25 |
| 下载链接 | https://m.zxxk.com/soft/35574056.html |
| 价格 | 0.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
YCF
（中职）Web前端设计基础 项目六-3电子课件
1
单击此处编辑母版文本样式
第二级
第三级
第四级
第五级
CSS 3的选择器
项目六
授课教师：姓名
WEB前端设计基础
学习情境一
授课教师：姓名
单击此处编辑母版标题样式
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
三 项目实施
通过此项目的学习，学习到CSS 3的基本语法结构和选择器的使用，结合这些知识制作一个包含标签选择器、class选择器和ID选择器的实例。
选择器实例
<head>
<meta charset="UTF-8">
<title>选择器实例</title>
<style>
*{margin:0px;padding:0px;color:white;font-family: "微软雅黑";font-size: 14px;}
div{width: 100px;height: 50px;background: red;}
.box{width: 100px;height: 50px;background: green;}
#box{width: 100px;height: 50px;background: blue;}
.wenben{width: 400px;height: 150px;position:absolute;left:100px;top:0px;background: white;}
p{color:#000;line-height: 50px;}
</style>
</head>
设置了ID名称为box的元素标签宽度为100像素、高度为50像素、背景颜色为蓝色。
设置了class名称为box的元素标签宽度为100像素、高度为50像素、背景颜色为绿色。
设置了所有div标签的宽度为100像素、高度为50像素、背景颜色为红色。
三 项目实施
启动Sublime程序，新建并保存文件名称为6-11.html。
第一步
第二步
Head标签内的代码输入如下：
内嵌式Css样式部分。
使用了全局选择器，设置了所有元素的内边距和外边距全都为0、文本颜色为白色、字体为微软雅黑、字体大小为14像素。
设置了class名称为wenben的元素标签宽度为400像素、高度为150像素、背景颜色为白色；定位方式为绝对定位，开始位置为距左100像素距上0像素。
三 项目实施
第三步
body标签内的代码输入如下：
<body>
<div>
标签选择器
</div>
<div class="box">
Class选择器
</div>
<div id="box">
ID选择器
</div>
<div class="wenben">
<p>div{width: 100px;height: 50px;background: red;}</p>
<p>.box{width: 100px;height: 50px;background: green;}</p>
<p>#box{width: 100px;height: 50px;background: blue;}</p>
</div>
</body>
三 项目实施
再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。
第四步
四 项目拓展
通过项目实施的学习，掌握了基本选择器的使用，结合前面学习过的表单知识，本项目拓展制作一个元素状态伪类选择器的实例。
四 项目拓展
启动Sublime程序，新建并保存文件名称为6-12.html。
第一步
第二步
Head标签内的CSS代码输入如下：
<style>
div{border:1px solid green;width:400px;margin-top: 10PX;padding:5px;}
input[type="text1"]:hover { /*鼠标经过（悬停）*/
background-color: pink;
}
input[type="text1"]:focus { /*鼠标获得焦点（点击）并进行文字输入时*/
background-color: #ccc;
}
input[type="text1"]:active { /*鼠标按下（按下还未松开）*/
background-color: yellow;
}
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。