（中职）Web前端设计基础 项目六-3电子课件.pptx

《（中职）Web前端设计基础 项目六-3电子课件.pptx》由会员分享，可在线阅读，更多相关《（中职）Web前端设计基础 项目六-3电子课件.pptx（17页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YCF正版可修改PPT（中职）Web前端设计基础 项目六-3电子课件CSS 3的选择器项目六授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练三 项目实施通过此项目的学习，学习到CSS 3的基本语法结构和选择器的使用，结合这些知识制作一个包含标签选择器、class选择器和ID选择器的实例。选择器实例选择器实例*margin:0px;padding:0px;color:white;font-family:微软雅黑;font-size:14px;divwidth:100px;height:50px;background:red;

2、.boxwidth:100px;height:50px;background:green;#boxwidth:100px;height:50px;background:blue;.wenbenwidth:400px;height:150px;position:absolute;left:100px;top:0px;background:white;pcolor:#000;line-height:50px;设置了ID名称为box的元素标签宽度为100像素、高度为50像素、背景颜色为蓝色。设置了class名称为box的元素标签宽度为100像素、高度为50像素、背景颜色为绿色。设置了所有div标签的

3、宽度为100像素、高度为50像素、背景颜色为红色。三 项目实施启动Sublime程序，新建并保存文件名称为6-11.html。第一步第二步Head标签内的代码输入如下：内嵌式Css样式部分。使用了全局选择器，设置了所有元素的内边距和外边距全都为0、文本颜色为白色、字体为微软雅黑、字体大小为14像素。设置了class名称为wenben的元素标签宽度为400像素、高度为150像素、背景颜色为白色；定位方式为绝对定位，开始位置为距左100像素距上0像素。三 项目实施第三步body标签内的代码输入如下：标签选择器Class选择器ID选择器divwidth:100px;height:50px;backg

4、round:red;.boxwidth:100px;height:50px;background:green;#boxwidth:100px;height:50px;background:blue;三 项目实施再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步四 项目拓展通过项目实施的学习，掌握了基本选择器的使用，结合前面学习过的表单知识，本项目拓展制作一个元素状态伪类选择器的实例。四 项目拓展启动Sublime程序，新建并保存文件名称为6-12.html。第一步第二步Head标签内的CSS代码输入如下：divborder:1px solid gr

5、een;width:400px;margin-top:10PX;padding:5px;inputtype=text1:hover/*鼠标经过（悬停）*/background-color:pink;inputtype=text1:focus/*鼠标获得焦点（点击）并进行文字输入时*/background-color:#ccc;inputtype=text1:active/*鼠标按下（按下还未松开）*/background-color:yellow;inputtype=text2:enabled/*选中时文本框为可用*/background-color:pink;inputtype=text2:

6、disabled/*选中时文本框为不可用*/background-color:#ccc;inputtype=checkbox:checked/*选中多选框时*/outline:2px solid red;设置div标签的样式为绿色的1像素实线边框、宽度为400像素、上边距为10像素、内边距为5像素。设置鼠标经过type属性为text1的input标签时，文本框的背景颜色是粉色。设置鼠标获得type属性为text1的input标签的焦点时，文本框的背景颜色是灰色。设置鼠标按下但还未松开type属性为text1的input标签时，文本框的背景颜色是黄色。设置鼠标选中type属性为text2的inp

7、ut标签为可用时，文本框的背景颜色是粉色。设置鼠标选中type属性为text2的input标签为不可用时，文本框的背景颜色是灰色。设置鼠标选中type属性为checkbox的input标签时，多选框的轮廓设置为红色的2像素实线。四 项目拓展第三步Head标签内的Javascript脚本代码输入如下：function radio_onchange()var radio=document.getElementById(radio1);/获得可用单选按钮的id var text=document.getElementById(text2);/获得文本框id if(radio.checked)text

8、.disabled=;/选中时文本框为可用 else text.disabled=disabled;/否则文本框为不可用 获得id值为radio1的元素赋予变量radio。获得id值为text2的元素赋予变量text。判断radio是否被选中，如果选中则设置文本框为可用（text.disabled=），否则设置文本框为不可用（text.disabled=disabled）。四 项目拓展第四步 鼠标经过、鼠标点击（但未松开）、鼠标获得焦点（点击松开）状态时元素的样式 姓名：地址：点击可用按钮时，文本框背景色为pink；点击不可用按钮时，文本框背景色为灰色；可用 不可用 E:checked是用来指

9、定当表单中的radio单选框、checkbox复选框处于选取状态时的样式 苹果 香蕉 橙子 菠萝 body标签内的代码输入如下：定义radio按钮的状态发生变化（选中或者不选中）时，执行上面的JavaScript代码。四 项目拓展再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步五 项目小结本项目通过项目实施和项目拓展制作了CSS3的基础选择器和CSS3的组合选择去两个案例，学习了HTML5引入CSS的方法、CSS3的基本语法和CSS3的基本选择器、属性选择器、结构伪类选择器、UI元素状态伪类选择器等，掌握了行内样式、内嵌样式、链接样式以及样式的优

10、先级及各类选择器的应用方法。五 项目小结本项目主要知识点总结如表所示。选择器知识点总结知识点 说明CSS 基本语法 选择器 样式属性1:取值1;样式属性2:取值2;CSS 引用方法行内式：直接在HTML 5 标签中使用style 属性 内嵌式：与 之间，并且用 和 标签进行声明。链接样式：在 之间，用 标签链接外部的css 文件CSS 优先级 行内样式 内嵌样式 链接样式标签选择器html5 的标签类选择器用class 标记的.类名称 ID 选择器 用id 标记的#id 名称全局选择器所有元素*属性:值;伪类选择器a 标签的link、visited、active、hover 状态 a:状态名称

11、 属性:值;子元素选择器某元素下的子元素#father pcolor:green;相邻选择器某元素的兄弟元素#box+pcolor:green;群组选择器同时对几个选择器设置相同的CSS 样式 h3,div,#box,pcolor:red;六 技能训练通过测试练习环节，对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。在浏览器中打开素材中的Exercise6.html文件，单击“开始测试按钮”，在文本框输入上面的单词，输入完成后，单击“结束/计算速度”按钮即可显示所用时间、错误数量和输入速度等信息。作业一、上机实训1.上机完成项目实施中选择器的实例操作。2.上机完成项目拓展中元素状态伪类选择器的实例操作。二、技能训练对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。End