1.元素按显示方式分为哪几种, 并举例, 正确描述它们?
元素的显示方式分为4种：行内元素、块级元素、行内块元素、隐藏。
行内元素：总是在一行文本元素的内部生成，它的宽高由所在行决定。例如：a、em、span、u、i、strong。
块级元素：独占一行，自动充满父级元素的内容区，两边不允许有任何其他元素，总是自带换行。块级元素在内容撑开的情况下，需要设置宽度和高度，否则无法感知存在。例如：h1~h6、p、div、ul。
行内块元素：宽高由它内部的内容决定。例如：img。
隐藏：实现方式display:none; visibility:hidden。
元素按内容是否可以替换，显示显示分2种：置换元素和非置换元素。
2.CSS是什么? 它的主要作用是什么?
层叠样式表（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式。
3.什么是CSS选择器,它的样式声明是哪二部分组成?
CSS选择器是元素选择器，用于选择需要添加样式的元素。css选择器是标签选择器、.类选择器、ID选择器、属性选择器、伪类选择器
样式声明是由属性:值组成。例如font-size:14px
4.举例演示CSS简单选择器(全部)
css简单选择器：标签选择器、类选择器、id选择器、属性选择器、群组选择器
（1）标签选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="static/css/style1.css">
<link rel="stylesheet" href="static/css/style2.css">
</head>
<body>
<p>第二届进博会11月5日开幕 凸显五大亮点</p>
<p>15岁上海女生连续两年蝉联“最年轻科学家”</p>
<p>***总理特鲁多连任 西部省份要“脱加”？</p>
<p>中科院“种”出了钻石：1个星期“长”出1克拉</p>
</body>
</html>
点击 "运行实例" 按钮查看在线实例
（2）类选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何将css作用到当前页面上</title>
<!-- 全局有效 放在head body 上下 都可以，但是要遵循规则放在head中-->
<style type="text/css">
@import "static/css/style2.css";
p{color: green;}
.pink{color: pink}
</style>
</head>
<body>
<p>第二届进博会11月5日开幕 凸显五大亮点</p>
<p class="pink">15岁上海女生连续两年蝉联“最年轻科学家”</p>
<p>***总理特鲁多连任 西部省份要“脱加”？</p>
<p>中科院“种”出了钻石：1个星期“长”出1克拉</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
（3）id选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何将css作用到当前页面上</title>
<!-- 全局有效 放在head body 上下 都可以，但是要遵循规则放在head中-->
<style type="text/css">
@import "static/css/style2.css";
.pink{color: pink;}
#green{color:green;}
</style>
</head>
<body>
<p>第二届进博会11月5日开幕 凸显五大亮点</p>
<p class="pink">15岁上海女生连续两年蝉联“最年轻科学家”</p>
<p>***总理特鲁多连任 西部省份要“脱加”？</p>
<p id="green">中科院“种”出了钻石：1个星期“长”出1克拉</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
（4）属性选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器--属性选择器</title>
<style type="text/css">
input[type="text"]{background-color:lightyellow;}
input[type="password"]{background-color:gray;}
</style>
</head>
<body>
<form action="">
<label for="uname">用户名：</label>
<input type="text" name="uname" id="uname"><br>
<label for="pwd">密 码：</label>
<input type="password" name="pwd" id="pwd">
</form>
</body>
</html>点击 "运行实例" 按钮查看在线实例
（5）群组选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器--群组选择器</title>
<style type="text/css">
h1,h2,.tit{color: green;font-weight: normal;font-size: 14px}
</style>
</head>
<body>
<h1>第二届进博会11月5日开幕 凸显五大亮点</h1>
<h2>15岁上海女生连续两年蝉联“最年轻科学家”</h2>
<p>***总理特鲁多连任 西部省份要“脱加”？</p>
<p class="tit">中科院“种”出了钻石：1个星期“长”出1克拉</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
5.举例演示CSS上下文选择器(全部)
css上下文选择器：后代选择器、父子选择器、同级相邻选择器、同级所有选择器
（1）后代选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器--后代选择器</title>
<style type="text/css">
.tit em{font-size: 200px;}
</style>
</head>
<body>
<h1>第二届进博会11月5日开幕 凸显五大亮点</h1>
<h2>15岁上海女生连续两年蝉联“最年轻科学家”</h2>
<p>***总理特鲁多连任 西部省份要“脱加”？</p>
<p class="tit">中科院“种”出了<em>钻石</em>：1个星期“长”出1克拉</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
（2）父子选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器--父子选择器</title>
<style type="text/css">
p>strong{color:red;}
</style>
</head>
<body>
<h1>第二届进博会11月5日开幕 凸显五大亮点</h1>
<h2>15岁上海女生连续两年蝉联“最年轻科学家”</h2>
<p><strong>***总理<em>特鲁</em></strong>多连任 西部省份要“脱加”？</p>
<p><em>中科院“种”出了<strong>钻石</strong></em>：1个星期“长”出1克拉</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
（3）同级相邻选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器--同级相邻选择器</title>
<style type="text/css">
h2+p{color: green;}
</style>
</head>
<body>
<h1>第二届进博会11月5日开幕 凸显五大亮点</h1>
<h2>15岁上海女生连续两年蝉联“最年轻科学家”</h2>
<p><strong>***总理特鲁</strong>多连任 西部省份要“脱加”？</p>
<p><em>中科院“种”出了钻石</em>：1个星期“长”出1克拉</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
（4）同级所有选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器--同级所有选择器</title>
<style type="text/css">
h2~p{color: green;}
</style>
</head>
<body>
<h1>第二届进博会11月5日开幕 凸显五大亮点</h1>
<h2>15岁上海女生连续两年蝉联“最年轻科学家”</h2>
<p><strong>***总理特鲁</strong>多连任 西部省份要“脱加”？</p>
<p><em>中科院“种”出了钻石</em>：1个星期“长”出1克拉</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
6.举例演示常用CSS结构伪类选择器(不少于四种)
css结构伪类选择器常用:nth-child(n) :first-child :last-child :nth-last-child(n)
（1）:nth-child(n) 匹配父元素中指定索引的子元素。
（2） :first-child 匹配父元素中第一个子元素。
（3） :last-child 匹配父元素中最后一个子元素。
（4）:nth-last-child(n) 匹配从父元素中倒数选择子元素，其中n的取值从0开始计算。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS结构伪类选择器</title>
<style type="text/css">
/*非选定类型的伪类*/
/*选中所欲的ul下面的第二个子元素*/
/* 当前页面中所有的位置在第二个位置上的子元素*/
/*ul> 下面的子元素*/
ul> :nth-child(2){
background-color:lightblue;
}
/*如果只想选中第一个ul中的第二个子元素*/
ul:first-child> :nth-child(2){
background-color:lightgreen;
}
ul:first-child> :last-child{
background-color:lightpink;
}
/*选中最后一个子元素中，类型为<p>*/
/*n是从0开始取值*/
/*n+1=0+1=1*/
/*n+1=1+1=2*/
/*n+1=2+1=3*/
/*p:nth-child 限定子元素的类型*/
ul:first-child > :last-child > p:nth-child(n+1){
background-color:yellow;
}
/*空格 代表 后代*/
/*n+1*/
ul:first-child > :last-child li:nth-child(n+1){
background-color:lightgray;
}
/*将以上案件全部用限定类型的伪类进行改写*/
/*:nth-child(n),根据子元素位置来选择
:first-child 表示第一个子元素
:last-child 表示最后一个子元素
:not :only-child*/
/*ul:first-child 改成irst-of-type*/
/*ul:first-child > :last-child > p:nth-child(n+1){
background-color:yellow;
}
改如下：*/
ul:first-of-type > :last-of-type > p:nth-of-type(n+1){
background-color:cyan;
}
/*ul:first-child > :last-child li:nth-child(n+1){
background-color:lightgray;
}
改如下：*/
ul:first-of-type > :last-of-type li:nth-of-type(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>
<!-- :last-child 指的是下面这个li最后一个子元素-->
<li>
<h2>重要通知</h2>
<p>今天开始，为了赶项目，全公司开始进入加班模式具体安排如下：</p>
<ul>
<!-- ul:first-child > :last-child li:nth-child(n+1)-->
<!-- n+1 代表下面三个全部被选中-->
<li>开发部：19:00-24:00</li>
<li>***部：19:00-24:0</li>
<li>销售部：19:00-24:0</li>
</ul>
<p>凡加班人员，提供免费晚餐，滴滴补助，不愿意回家，可报住宿费</p>
</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
7.举例演示常用CSS表单伪类选择器(不少于三种)
css表单伪类选择器常用:enabled :checked :disabled :read-only :optional :valid :invalid
（1）:enabled 旋转每个启动的input元素
（2）:checked 旋转每个被选中的input元素
（3）:disabled 选择每个禁用的input元素
（4）:required 包含required属性的元素
（5）:read-only 选择只读表单元素
（6） :optional 不包含required属性的元素
（7）:valid 验证通过的表单元素
（8）:invalid 验证不通过的表单元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单伪类选择器</title>
<style type="text/css">
input:read-only{
background-color:gray;
}
input:enabled{
background-color:blanchedalmond;
}
input:disabled{
background-color:lightgreen;
}
input:required{
background-color:yellow;
}
</style>
</head>
<body>
<h2>用户登录</h2>
<form action="" method="post">
<p>
<label for="email">邮箱</label>
<input type="text" name="email" id="email" required>
</p>
<p>
<label for="pwd">密码</label>
<input type="password" name="pwd" id="pwd">
</p>
<p>
<label for="">保存期限</label>
<select name="" id="">
<option value="">请选择</option>
<option value="">一年</option>
<option value="">二年<</option>
<option value="">三年<</option>
</select>
</p>
<p>
<label for="warning">警告</label>
<input type="text" name="warning" id="warning" value="一天内仅允许登录三次" readonly>
</p>
</form>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
