*元素按显示方式分为哪几种, 并举例, 正确描述它们
答：按照显示元素分类：
行内元素（Inline-element）：和其他元素都在一行上，不独占一行。行内元素的高度，行高，顶底边距由元素所包含的图片或文字所决定，不可改变；其宽度为内容文字或图片的宽度所决定，只有其左右边距可人为设置。 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）常见行内元素有<a>、<span>、<strong>等。
块级元素（block-element）:总是独占一行，元素占据的高度，顶底左右边距可以人为设置；其宽度缺省为所在容器的100%，可人为设置；常见的块级元素<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>等。
空元素（void-element）：即没有内容的HTML元素，例如：<br>、<meta>、<hr>、<link>、<input>、<img>
* CSS是什么? 它的主要作用是什么?
答：CSS是层叠样式表 (Cascading Style Sheets)；样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。
* 什么是CSS选择器,它的样式声明是哪二部分组成?
答：CSS选择器就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器；它的样式声明由属性名和属性值两部分组成，格式为 选择器名{属性名：属性值;} 。
* 举例演示CSS简单选择器(全部)
1、标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
span{
color: red;
}
</style>
</head>
<body>
<p>学了HTML，继续学CSS<span>标签选择器，</span>我要认真学</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、ID选择器，针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
#mine{
color: red;
}
</style>
</head>
<body>
<h2 id="mine">ID标签</h2>
<h2>hello,word</h2>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3、类选择器，针对你想要的所有标签使用。优点：灵活。css中用.来表示类。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.mine{
color: red;
}
</style>
</head>
<body>
<h2 class="mine">类选择器又叫class选择器</h2>
<h2>hello,word</h2>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4、通用选择器，将匹配任何标签，css中用*来表示。效率低下，一般不建议使用。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
color: red;
}
</style>
</head>
<body>
<h2 class="mine">现在所有都变红色了</h2>
<h2>hello,word</h2>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 举例演示CSS上下文选择器(全部)
上下文选择器总共三种：
1、后代选择器:先找到祖先元素,再选择它下面的所有指定后代元素
格式: 祖先 目标 {样式声明}
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" >
<title>CSS</title>
<style type="text/css">
section h2 {color:red;}
</style>
</head>
<body>
<section>
<h2>An H2 Heading</h2>
<p>this is paragraph 1</p>
<p>paragraph 2 </p>
<a href="#">Link</a>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、子选择器:先找到父级元素,再选择他下面所有直接后代元素
格式：父级 > 目标元素 {样式声明}
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" >
<title>CSS</title>
<style type="text/css">
section > p {color:red;}
</style>
</head>
<body>
<section>
<h2>An H2 Heading</h2>
<p>this is paragraph 1</p>
<p>paragraph 2 </p>
<a href="#">Link</a>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.相邻选择器: 先确定同胞元素的起始点,选择后面的所有的指定元素
格式：标签1 + 标签2{样式声明}
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" >
<title>CSS</title>
<style type="text/css">
h2 + p {color:red;}
</style>
</head>
<body>
<section>
<h2>An H2 Heading</h2>
<p>this is paragraph 1</p>
<p>paragraph 2 </p>
<a href="#">Link</a>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 举例演示常用CSS结构伪类选择器(不少于四种)
E:first-child 选择父元素下同种标签的第一个子元素
E:last-child 选择父元素的倒数第一个子元素，相当于E:nth-last-child(1)
E:nth-child(n) 选择父元素的第n个子元素
E:empty 选择空节点，即没有子元素的元素，而且该元素也不包含任何文本节点
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" >
<title>CSS</title>
<style type="text/css">
ul li:first-child {color:red;}
ul > li:last-child {color: green;}
ul>:nth-child(2){ color: lightcoral;}
ul:empty{display:none;}
</style>
</head>
<body>
<ul>
<li>这里是</li>
<p>this is paragraph</p>
<li>几个</li>
<li>基本的</li>
<li>结构伪类</li>
<li></li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 举例演示常用CSS表单伪类选择器(不少于三种)
:disabled选取被禁用的表单元素；
:enabled选取未被禁用的表单元素；
:required选取必填表单元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style type="text/css">
input:enabled{background-color:aquamarine;}
input:required{background-color:blueviolet;}
input:disabled{background-color:brown;}
</style>
</head>
<body>
<form action="" method="">
<p>
<label for="username">用户名</label>
<input type="text" id="username" name="username" value="brait" enabled>
</p>
<p>
<label for="password">密码</label>
<input type="password" id="passworde" name="password" placeholder="不能少于6位" required>
</p>
<p>
<label for="warning">警告:</label>
<input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled>
</p>
<button>登录</button>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
