收藏
批改状态：合格
老师批语：这个作业本可以留下来以后翻阅,写得不错
一、 元素按显示方式分为哪几种, 并举例, 正确描述它们
答：分为置换元素和非置换元素。
置换元素：元素的内容来自文档的外部，可以替换成不的资源，例如<img>、<input>、<audio>、<vido>等。
非置换元素：元素的内容由文档直接提供，例如<div>、<span>、<p>、<font>、<nav>等
二、CSS是什么? 它的主要作用是什么?
答：css名称为层叠样式表(Cascading Style Sheets)，主要用来设置html元素在文档中布局和显示方式。
三、什么是CSS选择器,它的样式声明是哪二部分组成?
答： 可以控制HTML页面中的元素实现一对一，一对多或者多对一的展示和布局 这就是CSS选择器，它的样式声明由选择器和样式声明组成。
四、 举例演示CSS简单选择器(全部)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS简单选择器的演示</title>
<style>
/*元素控制器*/
p{color:green}
/*属性选选择器*/
p[class]{color: blueviolet }
p[class="shuxing"]{color: blue}
/*类选择器*/
.red{color: red}
/*id选择器*/
#pink{color: pink}
/*群级选择器:*/
#yellow,h3{color: yellow}
/*通配符选择器*/
body * {font-size: 2rem;}
</style>
</head>
<body>
<p>【元素限制器】ThinkPHP6.0今天正式发布</p>
<p class="shuxing">【属性选择器】预警！！！PHP 远程代码执行漏洞</p>
<p class="red">【类选择器】优化CSS并加速网站的21种方法</p>
<p class="red" id="pink" >【ID选择器】Web 性能优化：图片优化让网站大小减少 62%</p>
<p id="yellow">【群级选择器】2019国庆节：16个优秀PHP视频教程学习</p>
<h3>【群级选择器】四大常见PHP开源CMS网站系统安装视频教</h3>
</body>
</html>点击 "运行实例" 按钮查看在线实例
五、 举例演示CSS上下文选择器(全部)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下文选择器</title>
<style>
/*后代选择器: 空格, 如 div p, body **/
section h3{color: red}
/*父子选择器: >, 如 div + h2*/
section>h3{color: green}
/*同级相邻选择器: +, 如 li.red + li*/
#item + h3{ background-color: aqua}
/*同级所有选择器: ~, 如 li.red ~ li*/
#item ~ h3{ background-color: blueviolet}
</style>
</head>
<body>
<section>
<div>
<h3>PHP学习网站</h3>
<h3 id="item">JAVA学习网站</h3>
<h3>Python学习网站</h3>
<h3>Swift学习网站</h3>
</div>
<h3>C语言学习网站</h3>
<h3>ASP.NET学习网站</h3>
</section>
</body>
</html>点击 "运行实例" 按钮查看在线实例
六、 举例演示常用CSS结构伪类选择器(不少于四种)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/demo2.css"> <title>结构伪类选择器</title> </head> <body> <ul> <li> <h3>手机</h3> <ul> <li>华为手机</li> <li>小米手机</li> <li>OPPO手机</li> </ul> </li> <li> <h3>电脑</h3> <ul> <li>华为笔记本</li> <li>华硕笔记本</li> <li>小米笔记本</li> </ul> </li> <li> <h3>抽奖活动</h3> <p>喜迎双11,我店今天举行抽奖活动:</p> <ul> <li>第一场: 7:00 - 8:00</li> <li>第二场: 12:00 - 13:00</li> <li>第三场: 20:00 - 21:00</li> </ul> <p>最终解释权归本店所有</p> </li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
css部分
/*非限定性伪类*/
/*选中所有的ul下面的第二个子元素*/
ul > :nth-child(2){background-color: aqua}
ul:first-child >:nth-child(2){background-color: darkgray}
ul:first-child>:last-child{background-color: deepskyblue}
/*选中最后一个元素为p的标签*/
ul:last-child>:last-child> p:nth-child(n+1){background-color: red}
ul:last-child>:last-child li:nth-child(n+1){background-color: chartreuse}
/*将以上案例全部用限定类型的伪类进行改写*/
ul:first-of-type>:last-of-type>p:nth-last-of-type(n+1){background-color: gold}
ul:first-of-type>:last-of-type li:nth-of-type(n+1){background-color: deeppink}点击 "运行实例" 按钮查看在线实例
七、 举例演示常用CSS表单伪类选择器(不少于三种)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/demo3.css"> <title>表单伪类选择器</title> </head> <body> <h3>用户登录</h3> <form action="" method="post"> <p> <label for="email">邮箱:</label> <input type="email" id="email" name="email" placeholder="zy@php.cn"> </p> <p> <label for="password">密码:</label> <input type="password" id="password" name="password" required placeholder="不得少于6位"> </p> <p> <label for="save" >保存密码:</label> <input type="checkbox" id="save" name="save" checked readonly> </p> <p> <label for="save_time">保存期限:</label> <select name="save_time" id="save_time"> <option value="7" selected>7天</option> <option value="30">30天</option> </select> </p> <p> <input type="hidden" name="login_time" value="登陆时间戳"> </p> <p> <label for="warning">警告:</label> <input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled> </p> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
css部分
/*将所有有效的input背景色设置红色*/
input:enabled{background-color: red}
/*将页面的静元素背景色设置为黄色*/
input:disabled{background-color: yellow;}
input:required{background-color: deepskyblue}
input:checked{background-color: brown}点击 "运行实例" 按钮查看在线实例
总结：通过本节课的学习 知道了css和选择器的相关知识重点需要掌握伪类的使用方法，现整理如下以便于查看：
后代选择器: 空格
父子选择器: >
同级相邻选择器: +
同级所有选择器: ~
:nth-child(n): 匹配父元素中指定索引的子元素
:first-child: 匹配父元素中的第一个子元素
:last-child: 匹配父元素中的最后一个子元素
:nth-last-child(n): 匹配从父元素中倒数选择子元素
:only-child: 匹配父元素中的唯一子元素
selector:nth-of-type(n): 匹配父元素中指定索引的子元素
selector:first-of-type: 匹配父元素中的第一个子元素
selector:last-of-type: 匹配父元素中的最后一个子元素
selector:nth-last-of-type(n): 匹配从父元素中倒数选择子元素
selector:only-of-type: 匹配父元素中的唯一子元素
:enabled: 选择每个启用的 `<input>` 元素
:disabled: 选择每个禁用的 `<input>` 元素
:checked: 选择每个被选中的 `<input>` 元素
:required: 包含`required`属性的元素
:optional: 不包含`required`属性的元素
:valid: 验证通过的表单元素
:invalid: 验证不通过的表单
:read-only: 选择只读表单元素
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
