1.元素按显示方式分为哪几种, 并举例, 正确描述它们
元素分为置换元素、非置换元素、块级元素、行内元素
一、置换元素
（1）内容来自文档外部, 可以替换成不同的资源。
（2）都过特定属性实现资源的置换。
（3）由于这类元素不由文档直接提供,所以大小尺寸未知。
（4）遵循最小化原则,尽可能最小的空间来显示它们。
（5）实例: <img>, <input>都是置换元素。
二、非置换元素
（1）内容由文档直接提供, HTML中绝大多数都属于非置换元素。
（2）内容通常放在二个标签之间, 所以大多采用双标签。
（3）有块元素与有行内元素, 只是提供者不同罢了
（4）实例: <h1><p><span><div><table><ul+li><a>等。
三、块级元素
（1）遵循最大化的原则，总是独占一行显示, 自动充满父级元素的内容区。
（2）两边不允许有任何其它元素,也就是它总是自带换行的。
（3）在没有内容撑开的情况下, 需要设置宽高,否则无法感知存在。
（4）实例: <div>, <ul+li>, <table>,<p>, <h1-h6>等。
四、行内元素
（1）遵循最小化的原则，总是在一行文本元素的内部生成, 它的宽高由所在行决定,不可以设置。
（2）实例: <span>,<input>, <em>,<strong>,<a>等。
五、元素的显示方式
（1）一切元素都是框。
（2）任何元素都会在页面上占据一定的空间, 页面是以框的形式来显示它们。
（3）块级框对应的是块级元素, 行内框对应的是行内元素。
（4）行内框的宽高, 由它内部的内容决定,块级框的宽高, 是由它内部的子元素决定。
（5）一般来说, 块级框内,可以嵌套行内框, 反过来就不允许(可用display改变)。
2.CSS是什么? 它的主要作用是什么?
CSS就是层叠样式表（英文全称：Cascading Style Sheets）,CSS用来设置HTML元素在文档中在布局与显示方式。
3.什么是CSS选择器,它的样式声明是哪二部分组成?
选择器就是选择某一个或某一组元素，一般情况下是选择某一组元素，也就是｛｝之前在部分。样式声明有键和值两部分组成，称为键值对，健就是名称，值为字符串或数值。
4.举例演示CSS简单选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS简单选择器(全部)-作业</title>
<style>
/*元素选择器*/
p {
color: green;
}
div {
color: darkviolet;
}
/*属性选择器*/
p[class] {
color: lightgray;
}
p[class="red"] {
color: red;
}
p[id="blue"] {
color: blue;
}
/*类选择器*/
.red {
background-color: yellow;
}
/*ID选择器*/
#blue {
background-color: lightgray;
}
/*群级选择器 */
.red, h2 {
background-color: lightcyan;
}
/*通配符选择器*/
body * {
font-size: 2rem;
}
</style>
</head>
<body>
<p>南京教育局回应“南京家长已疯”：执行规定简单化引误解</p>
<p class="red">国新办：十九届四中全会新闻发布会11月1日举行</p>
<p class="red" id="blue">教科文组织宣布：南京入选“世界文学之都” </p>
<p>3700多万农村学生吃上营养餐</p>
<h2>今天下午偷偷写作业,晚上继续学习猪哥视频。</h2>
<div>蓝天、碧水、净土保卫战全面展开 </div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
5.举例演示CSS上下文选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS上下文选择器(全部)-作业</title>
<style>
/*后代选择器*/
section h2 {
color: green;
}
/*父子选择器*/
section > h2 {
color: red;
}
/*同级相邻选择器*/
#list + * {
background-color: lightblue;
}
/*同级所有选择器*/
#list ~ * {
background-color: lightpink;
}
</style>
</head>
<body>
<section>
<div>
<h2 id="list">南京教育局回应“南京家长已疯”：执行规定简单化引误解</h2>
<h2>国新办：十九届四中全会新闻发布会11月1日举行</h2>
<h2>教科文组织宣布：南京入选“世界文学之都”</h2>
</div>
<h2>蓝天、碧水、净土保卫战全面展开</h2>
<h2>今天下午偷偷写作业,晚上继续学习猪哥视频。</h2>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
6.举例演示常用CSS结构伪类选择器(不少于四种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器-作业</title>
<style>
/*选中页面所有的ul下面的子第一个子元素*/
ul > :nth-child(1) {
background-color: lightblue;
}
/*如果只想选中第一个ul中的第一个子元素*/
/*会匹配到工作计划*/
ul:first-child > :nth-child(1) {
background-color: lightgreen;
}
/*选中最后一个子元素中,类型为<p>的元素*/
/*参数是表达式时, n从0开始, n+1, 表示的索引是: 1,2,3,4...*/
ul:first-child > :last-child > p:nth-child(n+1) {
background-color: yellow;
}
/*选中最后一个子元素中,类型为<p>的元素*/
ul:first-of-type > :last-of-type > p:nth-of-type(n+1) {
background-color: cyan;
}
/*选中最后一个子元素中,类型为<li>的后代元素*/
/*开发部, ***部, 销售部会更新背景色*/
ul:first-child > :last-child li:nth-child(n+1) {
background-color: lightsalmon;
}
</style>
</head>
<body>
<ul>
<li>
<h3>购物车</h3>
<ul>
<li>MacBook Pro 笔记本一台</li>
<li>iPhone X Max 手机一部</li>
<li>SONY A7M3 相机一部</li>
</ul>
</li>
<li>
<h3>工作计划</h3>
<ul>
<li>准备录制前端开发实战课程</li>
<li>Laravel项目开发全程实录</li>
<li>编写前端开发实例大全电子书</li>
</ul>
</li>
<li>
<h2>重要通知</h2>
<p>今天开始,为了赶项目,全公司开始进入加班模式,具体安排如下:</p>
<ul>
<li>开发部: 19:00 - 24:00</li>
<li>***部: 19:00 - 23:00</li>
<li>销售部: 19:00 - 22:00</li>
</ul>
<p>今天下午偷偷写作业,晚上继续学习猪哥视频。</p>
</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
7.举例演示常用CSS表单伪类选择器(不少于三种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单伪类选择器-作业</title>
<style>
/*选择可用元素*/
input:enabled {
background-color: blanchedalmond;
}
/*选择禁用元素*/
input:disabled {
background-color: blue;
}
/*选择所有必选项*/
input:required {
background-color: yellow;
}
/*选择所有checked项*/
input:checked {
background-color: yellow;
color: darkviolet;
}
</style>
</head>
<body>
<h2>用户登录</h2>
<form action="" method="post">
<p>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required placeholder="example@email.com">
</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="male" >性别:</label>
<input type="radio" name="gender" id="male"><label for="male">男生</label>
<input type="radio" name="gender" id="female"><label for="female">女生</label>
<input type="radio" name="gender" id="secrecy" checked><label for="secrecy">保密</label>
</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>
<script>
document.querySelector('[type="hidden"]').value = new Date().getTime()
</script>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
