一.元素按显示方式分为哪几种, 并举例, 正确描述它们
答：1.块元素如：<div></div>;<ul></ul>;<table></table>;<p></p>;<h1-h6>等总是独占一行显示二边不允许有其它元素的叫 块 元素。
2.行内元素如：<span>,<input>, <em>,<strong>,<a>...在一行文本元素的内部生成, 它的宽高由所在行决定。
二、CSS是什么? 它的主要作用是什么?
答：CSS是层叠样式表，用来设置html元素的面的布局、字体、颜色、背景等显示方式。
三、 什么是CSS选择器,它的样式声明是哪二部分组成?
答：选择器就是一种选择元素的方式，他的样式声明是由 属性和属性值组成。如：h1 {color:red;} h1 是选择器 { }内是声明 color是属性 red是属性值;
四、举例演示CSS简单选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例演示CSS简单选择器</title>
<style>
/*优先级 id>class>tag */
/* 通配符选择器 */
body * {
font-size: 16px;
}
/* 元素选择器 */
h3 {
color: red;
margin-left:20px;
}
/*ID选择器*/
#id1{
background-color: aquamarine;
}
/*属性选择器*/
div[class]{
width:500px;
height: 180px;
background-color: darkgray;
}
/*类/class选择器*/
.clas2{
color: brown;
}
/*群组选择器*/
h2,h3{
background-color: chocolate;
}
</style>
</head>
<body>
<section>
<h2>新闻中心</h2>
<div class="clas1" >
<h3>地方新闻</h3>
<ul >
<li>今天北京继续回暖最高温22℃ 明后天降水降温</li>
<li>“夜京城”消费指南将推出 提升夜经济品质</li>
<li>16区一把手下周二起接听12345市民热线</li>
<li>国家图书馆站成为地铁4号线首个5G信号试点车站</li>
<li>延庆新人居升级 从大众走向“国际范”</li>
</ul>
</div>
<div class="clas2">
<h3>国际新闻</h3>
<ul id="id1">
<li>东城区百辆救护车捐赠贫困地区</li>
<li>北京“空地一体化应急救援”首次演练</li>
<li>北京16区启动垃圾分类宣传</li>
<li>如无极端天气 北京下月7日启动试供暖</li>
<li>北航迷你“月宫一号”入小学埋梦想种子</li>
<li>房山区长沟御塘贡米开镰</li>
</ul>
</div>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五、举例演示CSS上下文选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例演示CSS上下文选择器(全部)</title>
<style>
/*空格表示所有*/
section h3{
color: red;
}
/* > 表示父子*/
section > h3{
background-color: chocolate;
}
/*同级相邻 + */
.item + *{
color: brown;
}
/*同级所有 ～ */
.item ~ *{
font-size: 24px;
}
</style>
</head>
<body>
<section>
<h2>新闻中心</h2>
<div >
<h3>地方新闻</h3>
<ul>
<li>东城区百辆救护车捐赠贫困地区</li>
<li class="item">北京“空地一体化应急救援”首次演练</li>
<li>北京16区启动垃圾分类宣传</li>
<li>如无极端天气 北京下月7日启动试供暖</li>
<li>北航迷你“月宫一号”入小学埋梦想种子</li>
<li>房山区长沟御塘贡米开镰</li>
</ul>
<h3>国际新闻</h3>
<ul>
<li>今天北京继续回暖最高温22℃ 明后天降水降温</li>
<li class="item">“夜京城”消费指南将推出 提升夜经济品质</li>
<li>16区一把手下周二起接听12345市民热线</li>
<li>国家图书馆站成为地铁4号线首个5G信号试点车站</li>
<li>延庆新人居升级 从大众走向“国际范”</li>
</ul>
</div>
<h3>北京日报客</h3>
<ul>
<li>东城区百辆救护车捐赠贫困地区</li>
<li>北京“空地一体化应急救援”首次演练</li>
<li>北京16区启动垃圾分类宣传</li>
<li class="item">如无极端天气 北京下月7日启动试供暖</li>
<li>北航迷你“月宫一号”入小学埋梦想种子</li>
<li>房山区长沟御塘贡米开镰</li>
</ul>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
六、举例演示常用CSS结构伪类选择器(不少于四种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例演示常用CSS结构伪类选择器</title>
<style>
/*ul里的第二个子元素*/
ul>:nth-child(2){
color: lightcoral;
}
/*锁定最外面的ul，第一个元素*/
ul:first-child>:nth-child(1){
color: red;
}
/*锁定最外面的ul里面最后一个元素*/
ul:first-child>:last-child{
background-color: chocolate;
}
/*锁定最外面的ul里面最后一个元素里的所有li*/
ul:first-child>:last-child li:nth-child(n+1){
font-size: 24px;
}
/*限定伪类*/
ul:last-of-type h3:nth-of-type(n+1){
background-color: burlywood;
}
ul:first-of-type>:last-of-type h3:nth-of-type(n+1){
color: chartreuse;
}
</style>
</head>
<body>
<section>
<ul class="ul1">
<h2>新闻中心</h2><!-- 外面的ul，第一个元素-->
<li> <!-- 外面的ul，第二个元素-->
<h3>地方新闻</h3>
<ul>
<li>东城区百辆救护车捐赠贫困地区</li>
<li>北京“空地一体化应急救援”首次演练</li>
<li>北京16区启动垃圾分类宣传</li>
</ul>
</li>
<li>
<h3>国际新闻</h3>
<ul>
<li>今天北京继续回暖最高温22℃ 明后天降水降温</li>
<li>“夜京城”消费指南将推出 提升夜经济品质</li>
<li>16区一把手下周二起接听12345市民热线</li>
</ul>
</li>
<li>
<h3>科技 </h3>
<ul>
<li>中科院“种”出了钻石，一星期能长1克拉</li>
<li>2020考研报名今日将截止 考研热为何连年升温</li>
<li>不法分子冒名网信办伪造“撤稿邮件” 将被追责</li>
</ul>
</li>
</ul>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
七、举例演示常用CSS表单伪类选择器(不少于三种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例演示常用CSS表单伪类选择器(不少于三种)</title>
<style>
input:enabled {
background-color: chartreuse;
}
/*选择禁用元素*/
input:disabled {
background-color: lightgray;
}
/*选择所有必选项*/
input:required {
background-color: yellow;
}
</style>
</head>
<body>
<form action="" method="post">
<p>用户名：<input type="text" name="username" required placeholder="请输入用户名" ></p>
<p>密码：<input type="password" name="password" required placeholder="请输入密码"></p>
<p> <label for="save">保存密码:</label> <input type="checkbox" id="save" name="save" checked readonly> </p>
<p>邮箱：<input type="email" name="email" required placeholder="@126.com"></p>
<p>年龄：<input type="number" min="12" max="80"></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>
</form></body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
在作业的联系中基本知道了CSS结构伪类选择器的实现和功效，但是表单伪类选择器 还是有滴蒙。还请老师指点。