![[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
元素按显示方式分为“块级元素”和“行内元素”
块级元素
遵循：“最大化原则”，块级元素的特点都是独占一行，自动充满父级元素的内容区。
在未设置样式的情况下无法与其他块级元素同行显示。
高度在未设置的情况下随内容高度变化。
块级元素有<div> <header> <nav> <footer> <p>,<form>等。
行内元素
遵循：“最小化原则，行内元素的特点是宽高由所在行决定，不可以设定。
例如: <span> <input> <em> <strong> <a>等。
CSS层叠样式表（英文全称：Cascading Style Sheets），它主要的作用是用来设置HTML元素在文档中的布局与显示方式。
如果说HTML是一个人，那么CSS就是定义一个人的外表衣着，妆容，发型等。
CSS选择器就是通过CSS对HTML页面元素实现一对一，一对多，多对一的样式的定义。
一个HTML标签最终如何呈现是有CSS选择器来定义的。
CSS的样式声明由选择器+样式声明组成，例如：
img{ /** img就是选择器 **/
width:500px /** {}中的内容就是对选择器的定义 **/
}<style type="text/css">
nav{
color:#f00;
}
section{
color:#0f0;
}
footer{
color:#00f
}
p[name="a1"]{
color:#f00
}
div[name]{
color:#0f0
}
.cls{
color:#f00
}
#idSelect{
color: #f0f;
}
table th,table td{
color: #f00;
}
dl *{
color:#f00
}
</style>
<h3>元素选择</h3>
<hr>
<nav>我的nav标签 - 元素选择</nav>
<section>我是section标签 - 元素选择</section>
<footer>我是footer标签 - 元素选择</footer>
<h3>属性选择</h3>
<hr>
<p name="a1">我是P标签 - 属性选择</p>
<p name="a2">我是P标签 - 属性选择</p>
<div>我是DIV标签 - 属性选择</div>
<div name="a4">我是DIV标签 - 属性选择</div>
<h3>clas与ID选择</h3>
<hr>
<div class="cls">我是DIV标签 - class选择</div>
<div id="idSelect">我是DIV标签 - ID选择</div>
<h3>群组选择器</h3>
<hr>
<table border="1" cellspacing="0" cellpadding="5">
<thead>
<tr>
<th>th单元格</th>
<th>th单元格</th>
<th>th单元格</th>
</tr>
</thead>
<tbody>
<tr>
<td>td单元格</td>
<td>td单元格</td>
<td>td单元格</td>
</tr>
</tbody>
</table>
<h3>通配符选择器</h3>
<hr>
<dl>
<dt>dt普通文本</dt>
<dd>dd普通文本</dd>
<dd><a href="">链接文本</a></dd>
</dl>
<style type="text/css">
.list>li{
color: #f00;
}
ul>li{
color: #000;
}
.list2 li{
color: #f00;
}
.spc + dd{
color: #f00;
}
div p ~ p{
color: #f00;
}
</style>
<h3>父子选择器</h3>
<hr>
<ul class="list">
<li>父子选择器</li>
<li>
<ul>
<li>孙元素本身样式不会受影响</li>
</ul>
</li>
<li>父子选择器</li>
</ul>
<h3>后代选择器</h3>
<hr>
<ol class="list2">
<li>后代选择器</li>
<li>后代选择器</li>
<li>
<ol>
<li>父元素下所有符合条件的元素都会被改变</li>
</ol>
</li>
</ol>
<h3>同级相邻选择器</h3>
<hr>
<dl>
<dd>同级相邻选择器</dd>
<dd class="spc">同级相邻选择器</dd>
<dd>同级相邻选择器</dd>
</dl>
<!-- 同级选择器 由[兄]+[弟]组成，选择的是[兄]标签后的一个同级标签，最终样式只会影响[弟]，[兄]不会有变化 -->
<h3>同级所有选择器</h3>
<hr>
<div>
<p>同级所有选择器</p>
<p>同级所有选择器</p>
<p>同级所有选择器</p>
<!-- 同级所有选择器 由[起始] ~ [结束]组成，启示元素后所有元素样式都会有变化，但不包括[起始] -->
</div>
<style type="text/css">
.pseudo-cls ul li:nth-child(3){
color:#f00
}
.pseudo-cls ul li:first-child{
color:#0f0
}
.pseudo-cls ul li:last-child{
color:#00f
}
.pseudo-cls h2:first-of-type{
color:#f00
}
.pseudo-cls p:nth-of-type(2){
color:#f00
}
</style>
<div class="pseudo-cls">
<ul>
<li>LI标签 first-child元素</li>
<li>LI标签 nth-child元素</li>
<li>LI标签 nth-child元素</li>
<li>LI标签 last-child元素</li>
</ul>
<h2>H2标签 first-of-type</h2>
<h2>H2标签</h2>
<p>我是P标签 </p>
<p>我是P标签 nth-of-type(2)</p>
</div>
<style type="text/css">
input:enabled{
background-color: lightyellow;
}
input:disabled{
background-color: lightcoral;
}
input:checked+label{
color:red
}
input:required{
background-color:#f00
}
</style>
<form action="">
<p>
<label for="username">用户:</label><input type="text" id="username" name="username" placeholder="请输入用户名">
</p>
<p>
<label for="password">密码:</label><input type="text" id="password" name="password" placeholder="请输入密码">
</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></p>
<p>
<label for="phone">手机号:</label><input type="tel" id="phone" name="phone" placeholder="手机号必须输入" required>
</p>
<p>
<label for="warn">警告:</label><input type="text" id="warn" name="warn" placeholder="每天只许登录3次" disabled>
</p>
<p>
<button>注册</button>
</p>
</form>
1.引用css的方法有3种：
1. HTML页面内部使用 <style></style>，该方法只对一个HTML文件生效
2. <head>标签头部调用 <link rel="stylesheet" href='style.css'>
3. @import调用 import url('style.css')，@import可以在<style>标签，或者.css文件第一行使用2.CSS选择器的使用中，优先级尤为重要，顺序依次为：
<div style="">行内样式 > #id选择器 > 类选择器,属性选择器,伪类选择器 > 伪元素选择器,标签选择器
3.在一个标签元素被多个样式选择时，按照优先级来决定最终效果，如果选择器级别相同，那么按照代码的优先顺序决定结果。
<style type="text/css">
#a1{
color:red
}
.a2{
color:blue
}
.a3{
color:blue
}
p[name]{
color:red
}
.a4{
background-color:#0f0
}
</style>
<div class="a2" id="a1">ID选择器高于CLASS选择器，并且两个选择器都指定了color属性，那么最终结果以优先级高的ID选择器为准</div>
<p name='' class="a3">两个同级选择器定义的CSS属性冲突时最终结果以代码顺序为准</p>
<p name='' class="a4">两个同级选择器定义的CSS属性没有发生冲突，则两个属性会生效</p>4.上下文选择器，~ 和 + 可以按照[兄]和[弟]来理解，并不包含[兄]元素本身，生效的是[兄]元素之后[弟]的元素。
