![[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>`, `<ul+li>`, `<table>`,`<p>`, `<h1-h6>`...行内元素为：行内元素遵循: *最小化原则* 总是在一行文本元素的内部生成, 它的宽高由所在行决定,不可以设置 例如: `<span>`,`<input>`, `<em>`,`<strong>`,`<a>`...
二、CSS是什么? 它的主要作用是什么?
CSS是Cascading Style Sheets(层叠样式表单)的简称。通常把它称作样式表。是一种设计网页样式的工具，用来设置HTML元素在页面中的布局和显示方式
三、什么是CSS选择器,它的样式声明是哪二部分组成?
CSS选择器就是一个标签的名称或代理名称，供css调用设置。样式声明是由属性和值组成，如color:red; color 是属性 red是值，值可以是字符串或数字
四、举例演示CSS简单选择器(全部)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例演示CSS简单选择器</title>
<style>
<!-- /*元素选择器*/-->
p {
color: red;
}
div {
background-color: aqua;
}
/*属性选择器*/
li[class=red] {
color: red;
}
li[id] {
color: blue;
}
/*类/class选择器*/
.blue {
color: blue;
}
.yw{
background-color: aquamarine;
}
/*ID选择器*/
#red{
color: red;
}
#yw{
background-color: aquamarine;
}
/*群组选择器*/
.group,h3{
background-color: darkgoldenrod;
}
/*通配符选择器*/
/* 文本放大两倍，背景更改*/
span * {
font-size: 2rem;
background-color: crimson;
}
</style>
<head>
<body>
<div>
<h2>元素选择器</h2>
<p> CSS: 层叠样式表(Cascading Style Sheets) </p>
<p>CSS是用来设置页面中的元素**样式和布局**的</p>
<p>CSS基本语法</p>
</div>
<div>
<h2>属性选择器</h2>
<ul>
<li id="blue">用标签:</li>
<li class="red">在css中使用`@import`关键字, 导入另一张样式表</li>
<li class="red">在css中使用</li>
</ul>
</div>
<div>
<h2>类/class选择器</h2>
<u1>
<li class="blue">表格是最重要的数据格式化工具, 早期还是主要网页布局工具(基本废弃)</li>
<li class="blue">表格是由一组标签组成,要注意正确的嵌套关系</li>
<li class="yw">四个常用的子标签</li>
</u1>
</div>
<div>
<h2>ID选择器</h2>
<u1>
<li id="red">表格是最重要的数据格式化工具</li>
<li id="red">早期还是主要网页布局工具(基本废弃)</li>
<li id="yw"> 表格是由一组标签组成</li>
</u1>
</div>
<h3>群组选择器:</h3>
<u1>
<li class="group">表格是最重要的数据格式化工具</li>
<li class="group">早期还是主要网页布局工具(基本废弃)</li>
<li class="yw"> 表格是由一组标签组成</li>
</u1>
<span>
<h2>通配符选择器</h2>
<!-- 文本放大两倍，背景更改-->
<u1>
<li>总是独占一行显示</li>
<li>自动充满父级元素的内容区</li>
</u1>
<u1>
<li>级元素在没有内容撑开的情况下</li>
<li>需要设置宽高,否则无法感知存在</li>
</u1>
<h3>1.2.1 行内元素</h3>
</span>
</body>
</html>点击 "运行实例" 按钮查看在线实例
五、举例演示CSS上下文选择器(全部)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下文选择器</title>
<style>
/*后代选择器*/
div h2 {
color: red;
}
/*父子选择器*/
div > p {
color: red;
}
/*同级相邻选择器*/
#item + *{
color: blue;
}
/*同级所有选择器*/
.item ~ * {
background-color: aqua;
}
#item + * {
background-color: blueviolet;
}
</style>
</head>
<body>
<div>
<h2>选择器</h2>
<p> CSS: 层叠样式表(Cascading Style Sheets) </p>
<p class="item">CSS是用来设置页面中的元素**样式和布局**的</p>
<p>CSS基本语法</p>
<u1>
<li>指元素之间的结构关系</li>
<li>如层级,包含等,主要有四个选择器</li>
<li id="item">同级所有选择器</li>
<p> 1CSS: 层叠样式表(Cascading Style Sheets) </p>
<p>1CSS是用来设置页面中的元素**样式和布局**的</p>
<h2>Python中文网</h2>
</u1>
<h2>HTML中文网</h2>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
六、举例演示常用CSS结构伪类选择器(不少于四种)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*选中页面所有的ul下面的子第二个子元素*/
ul > :nth-child(2) {
background-color: lightblue;
}
/*如果只想选中第一个ul中的第二个子元素*/
/*会匹配到工作计划*/
ul:first-child > :nth-child(2) {
color: red;
}
/*/选中最后一个: 重要通知*/
ul:first-child > :last-child {
background-color: lightpink;
}
/*选中最后一个子元素中,类型为<h2>的元素*/
ul:first-child > :last-child > h2:nth-child(n+1) {
background-color: yellow;
}
/*选中最后一个子元素中,类型为<li>的后代元素*/
ul:first-child > :last-child li:nth-child(n+1) {
background-color: lightgray;
}
/*选中最后一个子元素中,类型为<p>的元素*/
ul:first-of-type > :last-of-type > p:nth-last-of-type(n+1)
{
background-color: lightseagreen;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<h2>春天</h2>
<p>今天开始</p>
<ul>
<li>1月</li>
<li>2月</li>
<li>3月</li>
</ul>
</li>
<li>
<h2>夏天</h2>
<p>为了赶项目</p>
<ul>
<li>4月</li>
<li>5月</li>
<li>6月</li>
</ul>
</li>
<li>
<h2>秋天</h2>
<p>全公司开始进入加班模式,具体安排如下:</p>
<ul>
<li>7月</li>
<li>8月</li>
<li>9月</li>
</ul>
</li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
七、举例演示常用CSS表单伪类选择器(不少于三种)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单伪类选择器</title>
<style>
input:enabled {
background-color: blue;
}
input:disabled {
color: red;
}
input:required {
background-color: blueviolet;
}
</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="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>点击 "运行实例" 按钮查看在线实例
八、手抄
九、总结
通过css学习知道了选择器如何使用，让页面的能更好的展示效果。