一、元素按显示方式分为哪几种, 并举例, 正确描述它们
按照元素内容是否可以被替换，可以分为可置换元素和不可置换元素，
可置换元素如：<img>、<input>等，这类元素主要是 自闭合标签/空标签，
不可置换元素如：<div><h1><span><ul>等，这类元素主要是 双标签；
按照元素是否独占一行，可分为块级元素和行内元素，
块级元素：总是独占一行显示, 自动充满父级元素的内容区，且自带换行效果的，在没有内容撑开的情况下, 需要设置好块级元素的宽高,否则无法感知到它的存在，如<div>、<p>；
行内元素：总是在行文本元素的内部生成, 它的宽高由所在内容决定,不可以单独进行设置，如<span><strong><b>；
二、CSS是什么? 它的主要作用是什么?
CSS是层叠样式表，它的主要作用是用来设置html元素在文档中的布局和显示样式。
三、什么是CSS选择器,它的样式声明是哪二部分组成?
css选择器指的是可以通过一对一，一对多或者多对一来控制html页面中元素样式的；
它的样式声明由属性和对应属性值组成。
四、举例演示CSS简单选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style>
/*优先级id>class>tag*/
/*1.元素选择器*/
p {
color:blue;
}
/*2.属性选择器*/
p[class="great"]{
color: green;
}
/*3.类/class选择器*/
.cont{
color: yellow;
}
/*4.ID选择器*/
#part1{
background: red;
}
/*5.群组选择器*/
h1,.test {
background: pink;
}
/*6.通配符选择器*/
body *{
font-size: 2rem;
}
</style>
</head>
<body>
<p>这个经验，历久弥新！</p>
<p class="great">上海国展中心迎接进博会</p>
<p class="cont">进博***纯牛奶月销量猛翻36倍</p>
<p id="part1">商务部：中美经贸磋商双方牵头人本周五将再次通话</p>
<p>农村学生吃上营养餐</p>
<h1>大数据时代，除了智商还要有“数商”</h1>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五、举例演示CSS上下文选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下文选择器</title>
<style>
/*后代选择器*/
side h3 {color: #1E9FFF}
/*父子选择器*/
side > h3{color:yellow}
/*同级相邻选择器*/
.itme + *{
background: deeppink;}
/*同级所有选择器*/
.itme ~ *{
background-color: cadetblue;
}
</style>
</head>
<body>
<side>
<h3>这个经验，历久弥新！</h3>
<div>
<h3 class="itme">这个经验，历久弥新！</h3>
<h3>农村学生吃上营养餐</h3>
<h3>农村学生吃上营养餐</h3>
</div>
</side>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
六、举例演示常用CSS结构伪类选择器(不少于四种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css结构伪类选择器</title>
<style>
/*非限定类型*/
/*选中页面中所有ul中第3个子元素*/
ul > :nth-child(3) {background-color: red}
/*选中第一个ul中的第3个子元素*/
ul:first-child>:nth-child(3){background-color: #1E9FFF}
/*选中最后一个*/
ul:first-child>:last-child{background-color: green}
/*选中最后一个子元素中，类型为<p>的元素*/
ul:first-child>:last-child>p:nth-child(n+1){background-color: brown}
/*选中最后一个子元素中,类型为<li>的后代元素*/
ul:first-child>:last-child li:nth-child(n+1){background-color: darkviolet}
/*选中最后一个子元素中，倒数第二个<p>元素*/
ul:first-child>:last-child>p:nth-last-child(2){background-color: springgreen}
</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>凡加班人员, 提供免费晚餐, 滴滴补助, 不愿回家,可报住宿费200/人</p>
</li>
<li>
<h2>重要通知2</h2>
<p>今天开始,为了赶项目,全公司开始进入加班模式,具体安排如下:</p>
<ul>
<li>开发部: 19:00 - 24:00</li>
<li>***部: 19:00 - 23:00</li>
<li>销售部: 19:00 - 22:00</li>
</ul>
<p>凡加班人员, 提供免费晚餐, 滴滴补助, 不愿回家,可报住宿费200/人</p>
<p>凡加班人员, 提供免费晚餐, 滴滴补助, 不愿回家,可报住宿费200/人</p>
<p>凡加班人员, 提供免费晚餐, 滴滴补助, 不愿回家,可报住宿费200/人</p>
<p>凡加班人员, 提供免费晚餐, 滴滴补助, 不愿回家,可报住宿费200/人</p>
</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
七、举例演示常用CSS表单伪类选择器(不少于三种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css表单伪类</title>
<style>
/*选择所有有效input元素*/
input:enabled{
background-color:green;
}
/*选择所有禁用input元素*/
input:disabled
{
background-color:red;
}
/*选择所有必选项input元素*/
input:required{
background-color:yellow;
}
</style>
</head>
<body>
<form action="">
<p>
<label for="username">用户名</label>
<input type="text" id="username" required>
</p>
<p>
<label for="password">密码</label>
<input type="password" id="password" disabled>
</p>
<p>
<label for="read">完成</label>
<input type="checkbox" id="read">
</p>
<label for="email">邮箱</label>
<input type="email" id="email" placeholder="example@emai.com">
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
八、手抄版本周末补上