![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：写得很认真, 望坚持下去
Collection
Collection
元素按显示方式分为哪几种, 并举例, 正确描述它们
置换元素，非置换元素，块级元素，行内元素
1.一切元素都是框
2.任何元素都会在页面上占据一定的空间，页面是以框的形式来显示它们
3.块级框对象的是块级元素，行内框对应的是行内元素
4.行内框的宽高，由它内部的内容决定
5.块级框的宽高，由它内部的子元素决定
6.一般来说，块级框内，可以嵌套行内框，反过来不允许（可用display改变）
CSS是什么? 它的主要作用是什么?
CSS:层叠样式表(Cascading Style Sheets)
作用:用来设置HTMl元素在文档中的布局与显示方式
什么是CSS选择器,它的样式声明是哪二部分组成?
选中我所需要的标签
CSS样式声明=属性+属性值（键+值)
举例演示CSS简单选择器(全部)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例演示CSS简单选择器(全部)</title>
<style>
/*优先级id>class>tag*/
/*1.元素选择器*/
p {
color: lightgreen;
}
/*2.属性选择器*/
p[class="change"]{
color: lightblue;
}
/*3.类/class选择器*/
.test{
color: lightcoral;
}
/*4.ID选择器*/
#select{
color: lightpink;
}
/*5.群组选择器*/
h2,h3{
color: lightseagreen;
}
/*6.通配符选择器*/
body *{
font-size: 2rem;
}
</style>
</head>
<body>
<p>Monster one</p>
<p class="change">Monster two</p>
<p class="test">Monster three</p>
<p id="select">Monster four</p>
<p>Monster five</p>
<h2>Monster six</h2>
<h3>Monster seven</h3>
</body>
</html>点击 "运行实例" 按钮查看在线实例
举例演示CSS上下文选择器(全部)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 举例演示CSS上下文选择器(全部)</title>
<style>
/*空格表示所有*/
body h2{
color: red;
}
/* > 表示父子*/
body > h2{
color: green;
}
/*同级相邻 + */
.item + *{
font-size: 2rem;
}
/*同级所有 ～ */
.item ~ *{
background-color: lightcoral;
}
</style>
</head>
<body>
<div>
<h2 class="item">Monster one</h2>
<h2>Monster two</h2>
<h2>Monster three</h2>
</div>
<h2>Monster four</h2>
<h2>Monster five</h2>
</body>
</html>点击 "运行实例" 按钮查看在线实例
举例演示常用CSS结构伪类选择器(不少于四种)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 举例演示常用CSS结构伪类选择器(不少于四种)</title>
<style>
/*ul里的第二个子元素*/
ul>:nth-child(2){
color: lightcoral;
}
/*锁定最外面的ui，第一个元素*/
ul:first-child>:nth-child(1){
color: red;
}
/*锁定最外面的ul，最后一个元素*/
ul:first-child>:last-child{
color: green;
}
/*锁定最外面的ul，最后一个元素里的li*/
ul:first-child>:last-child li:nth-child(n+1){
color: red;
}
/*限定伪类*/
ul:first-of-type>:last-of-type h4:nth-of-type(n+1){
background-color: lightcoral;
}
</style>
</head>
<body>
<ul>
<li>
<h3>个人介绍</h3>
<ul>
<li>姓名：Monster</li>
<li>电话：133********</li>
<li>从事职业：IT</li>
</ul>
</li>
<li>
<h2>学习计划</h2>
<ul>
<li>每天准时上课</li>
<li>按时完成作业</li>
<li>反复练习所学到的知识内容</li>
</ul>
</li>
<li>
<h1>人生规划</h1>
<ul>
<li>升职加薪</li>
<li>荣任CEO</li>
<li>赢取白富美</li>
</ul>
<h4>俄罗斯方块告诉我，获得的成功会消失，犯下的错误会积累</h4>
<h4>加油</h4>
</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
举例演示常用CSS表单伪类选择器(不少于三种)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例演示常用CSS表单伪类选择器(不少于三种)</title>
<style>
input:enabled{
background-color: lightcoral;
}
input:required{
background-color: lightslategray;
}
input:disabled
{
background-color: lightseagreen;
}
</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>点击 "运行实例" 按钮查看在线实例
总结
可以轻松的控制页面元素，使页面更加美观
笔记
