一、元素按显示方式分为哪几种, 并举例, 正确描述它们
块级元素：霸占一行，不能与其他任何元素并列，能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。
行类元素：与其他行内元素并排，不能设置宽高，默认的宽度就是文字的宽度
二、CSS是什么? 它的主要作用是什么?
CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。
CSS就是用来设置HTML元素在文档中的布局与显示方式
三、什么是CSS选择器,它的样式声明是哪二部分组成?
选择器就是一种选择元素的方式。
样式声明由属性和属性值组成。
四、举例演示CSS简单选择器(全部)
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>例演示CSS简单选择器(全部)</title>
<style>
/* 属性选择器 */
p[class="demo3"]{
color: bisque;
}
/* class选择器 */
.demo1{
color: aliceblue;
}
/* id 选择器 */
#demo2{
color: aqua;
}
/* 元素选择器 / 标签选择器 */
h1{
color: beige;
}
/* 群组选择器 */
.demo4, .demo5{
color: black;
}
/* 通配符选择器 */
*{
font-size: 16px;
}
</style>
</head>
<body>
<div>
<p class="demo1">111</p>
<span id="demo2">222</span>
<p class="demo3">333</p>
<p class="demo4">444</p>
<p class="demo5">555</p>
<h1>666</h1>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五、举例演示CSS上下文选择器(全部)
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>举例演示CSS上下文选择器(全部)</title>
<style>
/* 后代选择器 */
div p{
color: bisque;
}
/* 父子选择器 */
div > h2{
font-size: 18px;
}
/* 同级相邻选择器 */
.demo1 + *{
background-color: aqua;
}
/* 同级所有选择器 */
.demo1 ~ *{
background-color: blanchedalmond;
}
</style>
</head>
<body>
<section>
<div>
<p class="demo1">111</p>
<p class="demo2">222</p>
<h2>333</h2>
</div>
<h2>444</h2>
<h2>555</h2>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
六、举例演示常用CSS结构伪类选择器(不少于四种)
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>举例演示常用CSS结构伪类选择器(不少于四种)</title>
<style>
/*非限定类型的伪类*/
/*选中所有ul下面的第一个子元素*/
ul > :nth-child(1) {
background-color: blanchedalmond;
}
/*选中第一个ul下面的第一个子元素*/
ul:first-child > :nth-child(1){
background-color: aqua;
}
/*选中第一个ul下面的最后一个子元素*/
ul:first-child > :last-child{
background-color: blue;
}
/*选中最后一个子元素中的，类型为p*/
/* n从0开始取值，n+1=1，1+1=2 ... */
ul:first-child > :last-child > p:nth-child(n+1){
background-color: yellow;
}
/*限定类型*/
ul:first-of-type > :last-of-type > p:nth-of-type(n+1){
background-color: cyan;
}
/*
nth-child()：非限定类型，关注点在子元素的位置上
nth-of-type()：限定类型，关注点有二点，一是位置，二是类型
*/
</style>
</head>
<body>
<section>
<ul>
<li>
<h3>购物车</h3>
<ul>
<li>1-111</li>
<li>1-222</li>
<li>1-333</li>
</ul>
</li>
<li>
<h3>个人简介</h3>
<ul>
<li>2-111</li>
<li>2-222</li>
<li>2-333</li>
</ul>
</li>
<li>
<h3>工作经历</h3>
<p>ssssssssss</p>
<ul>
<li>3-111</li>
<li>3-222</li>
<li>3-333</li>
</ul>
<p>xxxxxxxxxxxxxxx</p>
</li>
</ul>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
七、举例演示常用CSS表单伪类选择器(不少于三种)
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>举例演示常用CSS表单伪类选择器(不少于三种)</title>
<style>
input:enabled{
background-color: yellow;
}
input:required{
background-color: lightslategray;
}
input:disabled
{
background-color: lightseagreen;
}
</style>
</head>
<body>
<h3>用户登录</h3>
<form>
<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="email">邮箱</label>
<input type="email" id="email" name="email">
</p>
<p>
<label for="save">保存密码</label>
<input type="checkbox" id="save">
</p>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
