一、元素按显示方式分为哪几种, 并举例, 正确描述它们
元素按照现实可分为：块级元素、行内元素、行内块元素 三种。
1、块级元素
自动充满一整行，可以设置宽高，子元素可以撑开没有设置宽高的父元素。
2、行内元素
无法设置宽高、宽度是根据内容的宽高决定、多个行内元素可以在一行显示。
3、行内块元素
兼容了快元素跟行内元素的特点，可以设置宽高度，并且一行可以显示多个行内块元素
二、 CSS是什么? 它的主要作用是什么?
CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。CSS就是用来设置HTML元素在文档中的布局与显示方式
三、什么是CSS选择器,它的样式声明是哪二部分组成?
选择器就是一种选择元素的方式。样式声明由属性和属性值组成。例如：.box{ color：#333 }
四、举例演示CSS简单选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<!-- * 元素按显示方式分为哪几种, 并举例, 正确描述它们
* CSS是什么? 它的主要作用是什么?
* 什么是CSS选择器,它的样式声明是哪二部分组成?
* 举例演示CSS简单选择器(全部)
* 举例演示CSS上下文选择器(全部)
* 举例演示常用CSS结构伪类选择器(不少于四种)
* 举例演示常用CSS表单伪类选择器(不少于三种)-->
<meta charset="UTF-8">
<title>简单选择器全部</title>
<style>
/*元素选择器*/
p{
color: #009999;
}
/*属性选择器*/
p[class]{color: #9c9c9c}
p[class="text"]{color:#333333}
/*简化写法*/
.text{
color: #660000;
}
/*通配选择器*/
*{background-color: #fff}
/*ID选择器*/
#blue{
background-color: #000;
}
/*群组选择器*/
h2,h3{
background-color: #b20e00;
}
</style>
</head>
<body>
<h2>文章列表</h2>
<h3>发布日期：2019.10.31</h3>
<p>115岁女蝉联科学家6998921</p>
<p class="text">2首位5G用户诞生5412288</p>
<p class="text">3新规11月起施行4510967</p>
<p id="blue">4马云接受央视专访4422511</p>
<p>5范冰冰被曝欠6亿4063491</p>
<p>6百色酒吧坍塌事故3677848</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五、举例演示CSS上下文选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例演示CSS上下文选择器(全部</title>
<style>
/*后代选择器 空格是后代*/
/*选择 section 下所有的h2*/
section h2{
color: #747474;
}
/*父子选择器 >是子元素*/
/*选择section下的h2*/
section > h2{
background-color: #660000;
}
/*同级相邻选择器 * 是所有的*/
/*选择section同级相邻的元素*/
.text + * { color: #666633 }
/*同级所有选择器*/
#test ~ *{
background-color: lightseagreen;
}
</style>
</head>
<body>
<section>
<div>
<h2 id="test">十九届四中全会：坚持和完善“一国两制”制度体系</h2>
<h2 >新晋中央委员马正武：39岁起当了17年央企董事长</h2>
<h2>新晋中央委员马伟明：“国宝级”专家</h2>
</div>
<h2 class="text">进博会那些让人大开眼界的“网红”产品，后来去哪了？</h2>
<h2>西昌卫星发射中心339名“百战”任务人员获表彰</h2>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
六、 举例演示常用CSS结构伪类选择器(不少于四种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例演示常用CSS结构伪类选择器(不少于四种)</title>
<style>
/*非限定类型*/
/*:nth-child(2) 指定某个元素*/
/*:nth-child(n+1) 指定所有子元素*/
/*:first-child 指定第一个元素*/
/*:last-child 指定最后一个元素*/
/*案例*/
/*指定所有UL中的第三个元素*/
ul > :nth-child(3) {
color: #b20e00;
}
/*指定ul中的第二个子元素*/
ul:first-child > :nth-child(2){
background-color: #9c9c9c;
}
/*指定ul中的最后一个元素*/
ul:first-child > :last-child {
color: #009999;
}
/*选择UL中的最后一个元素里的P标签*/
ul:first-child > :last-child > p:nth-child(n+1){
color: #ffc600;
}
/*选择ul中第一个ul中的所有li*/
ul:first-child > :first-child li:nth-child(n+1){
background-color: #666633;
}
/*限定类型*/
/*:first-of-type 指定第一个元素*/
/*:last-of-type 指定第一个元素*/
/*案例*/
/*选择UL中的最后一个元素里的P标签*/
ul:first-of-type > :last-of-type >p:nth-of-type(n+1){
color: blue;
}
</style>
</head>
<body>
<ul>
<li>
<h3>国家大事</h3>
<ul>
<li>十九届四中全会：坚持和完善“一国两制”制度体系</li>
<li>新晋中央委员马正武：39岁起当了17年央企董事长</li>
<li>新晋中央委员马伟明：“国宝级”专家</li>
</ul>
</li>
<li>
<h3>国际大事</h3>
<ul>
<li>美国要在亚洲部署中程导弹，</li>
<li>国产航母即将正式入列？国防部：</li>
<li>教育部：教授连续三年不教本科生转出教师系列</li>
</ul>
</li>
<li>
<h3>邻国好友</h3>
<p>我们跟巴基斯坦是好朋友</p>
<ul>
<li>蓬佩奥宣称中国共产党给全世界带来挑战，中方驳斥</li>
<li>巴基斯坦火车大火致73死 盘点该国近10年铁道事故</li>
<li>韩军方：朝鲜再次发射不明飞行物</li>
</ul>
<p>我们坚决抵制萨德的部署</p>
</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
七、举例演示常用CSS表单伪类选择器(不少于三种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例演示常用CSS结构伪类选择器(不少于四种)</title>
<style>
/*非限定类型*/
/*:nth-child(2) 指定某个元素*/
/*:nth-child(n+1) 指定所有子元素*/
/*:first-child 指定第一个元素*/
/*:last-child 指定最后一个元素*/
/*案例*/
/*指定所有UL中的第三个元素*/
ul > :nth-child(3) {
color: #b20e00;
}
/*指定ul中的第二个子元素*/
ul:first-child > :nth-child(2){
background-color: #9c9c9c;
}
/*指定ul中的最后一个元素*/
ul:first-child > :last-child {
color: #009999;
}
/*选择UL中的最后一个元素里的P标签*/
ul:first-child > :last-child > p:nth-child(n+1){
color: #ffc600;
}
/*选择ul中第一个ul中的所有li*/
ul:first-child > :first-child li:nth-child(n+1){
background-color: #666633;
}
/*限定类型*/
/*:first-of-type 指定第一个元素*/
/*:last-of-type 指定第一个元素*/
/*案例*/
/*选择UL中的最后一个元素里的P标签*/
ul:first-of-type > :last-of-type >p:nth-of-type(n+1){
color: blue;
}
</style>
</head>
<body>
<ul>
<li>
<h3>国家大事</h3>
<ul>
<li>十九届四中全会：坚持和完善“一国两制”制度体系</li>
<li>新晋中央委员马正武：39岁起当了17年央企董事长</li>
<li>新晋中央委员马伟明：“国宝级”专家</li>
</ul>
</li>
<li>
<h3>国际大事</h3>
<ul>
<li>美国要在亚洲部署中程导弹，</li>
<li>国产航母即将正式入列？国防部：</li>
<li>教育部：教授连续三年不教本科生转出教师系列</li>
</ul>
</li>
<li>
<h3>邻国好友</h3>
<p>我们跟巴基斯坦是好朋友</p>
<ul>
<li>蓬佩奥宣称中国共产党给全世界带来挑战，中方驳斥</li>
<li>巴基斯坦火车大火致73死 盘点该国近10年铁道事故</li>
<li>韩军方：朝鲜再次发射不明飞行物</li>
</ul>
<p>我们坚决抵制萨德的部署</p>
</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：HTML就是光着屁股的人，css就是给光屁股的人穿上漂亮的衣服。