一、元素按显示方式分为哪几种, 并举例, 正确描述它们
元素按内容是否可替换分为置换元素和非置换元素，
置换元素如<img src="...">src属性指向引用的外部资源，<input type="...">type属性来决定是显示输入框，还是单选按钮等，<link src="...">src属性引用外部资源，等等。这类元素的内容都是来自文档外部，可以替换成不同的资源。
非置换元素如：<p>内容</p><span>内容</span>，HTML 的大多数元素是不可替换元素，即其内容直接表现给客户端（例如浏览器）
按元素是否独占一行分为块级元素和行内元素。一般情况下，行内元素只能包含数据和其他行内元素。而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
元素的显示方式可分为4种：
1，隐藏，通过display设置none或visibility设置hidden来实现。
2，块级元素，独自占据一行，当发生嵌套的时候,如果没有给子元素设置宽高,子元素的宽度和父元素一样宽。典型代表div，p，ul等
3、行内元素，多个元素在一行内显示，无法设置有效宽高，宽度由容器里的内容决定，典型代表span, em,i,a,strong,b等
4、行内块元素，宽高由它内部的内容决定，典型代表img，textarea等
二、CSS是什么? 它的主要作用是什么?
CSS是Cascading Style Sheets(层叠样式表单)的简称。通常把它称作样式表。是一种设计网页样式的工具，用来设置HTML元素在页面中的布局和显示方式
三、 什么是CSS选择器,它的样式声明是哪二部分组成?
CSS选择器就是一个标签的名称或代理名称，供css调用设置。样式声明是由属性和值组成，如color:red; color 是属性 red是值，值可以是字符串或数字
四、 举例演示CSS简单选择器(全部)
1，标签选择器（如：body，div，h1等）
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
body{
background-color: #000;;
}
p{ color: #fff;}
</style>
</head>
<body>
<p>我和我的祖国</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2，类/CLASS选择器（如：class="head"）
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类/CLASS选择器</title>
<style>
.text{color:red;font-size:16px;}
</style>
</head>
<body>
<p class="text">我和我的祖国</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3，ID选择器（如：id="nav"）
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
.text{color:red;font-size:16px;}
</style>
</head>
<body>
<p class="text">我和我的祖国</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4，群组选择器 （如：p, .active, div{}）
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style>
.text,h1{color:red;font-size:16px;}
</style>
</head>
<body>
<p class="text">我和我的祖国</p>
<h1>PHP中文网</h1>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
5，通配符选择器: *, 表示全部元素 通常用在上下文选择器（如：*{}，body *{}）
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通配符选择器:</title>
<style>
*{margin:0;padding:0;color:#ff0000;font-size:18px;}
</style>
</head>
<body>
<p class="text">我和我的祖国</p>
<h1>PHP中文网</h1>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
6，属性选择器 （如：input[type="text"]）
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
p[class="text"]{color:#333;font-size:16px;background-color: #ff0;}
</style>
</head>
<body>
<p class="text">我和我的祖国</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五、举例演示CSS上下文选择器(全部)
1，后代选择器: 空格, 如 div p, body *
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
/*父元素和子元素之间用空格隔开*/
div p{ color: red}
</style>
</head>
<body>
<div>
<p>我和我的祖国</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2，父子选择器: >, 如 div > h2
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子选择器</title>
<style>
/*只会选取紧跟父元素的子元素*/
div>p{ color: red}
</style>
</head>
<body>
<div>
<p>我和我的祖国</p>
<h2><p>第二个子元素</p></h2>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3，同级相邻选择器: +, 如 li.red + li
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同级相邻选择器</title>
<style>
/*只选取第二个子元素*/
ul li.red + li{ color: red}
</style>
</head>
<body>
<div>
<ul>
<li class="red">第一个子元素</li>
<li>第二个子元素</li>
<li>第三个子元素</li>
<li>第四个子元素</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4，同级所有选择器: ~, 如 li.red ~ li
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同级相邻选择器</title>
<style>
/*选取同级所有子元素，但是不包括自己*/
ul li.red ~ li{ color: red}
</style>
</head>
<body>
<div>
<ul>
<li class="red">第一个子元素</li>
<li>第二个子元素</li>
<li>第三个子元素</li>
<li>第四个子元素</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
七、 举例演示常用CSS结构伪类选择器(不少于四种)
:nth-child(n): 匹配父元素中指定索引的子元素
:first-child: 匹配父元素中的第一个子元素
:last-child: 匹配父元素中的最后一个子元素
:nth-last-child(n): 匹配从父元素中倒数选择子元素n的取值从0开始
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
body *{
list-style:none;
}
/*选取第一个ul下面所有类型为<li>的元素*/
ul:first-child>li{background:lightgoldenrodyellow}
/*选取第一个ul下面第二个类型为<li>的元素*/
ul:first-child>li:nth-child(2){background:#ddd}
/*选取第一个ul下面最后一个类型为<li>的元素*/
ul:first-child>li:last-child {background:#ff0}
/*选取第一个ul下面最后一个类型为<li>的元素下面第一个类型为<li>的元素*/
ul:first-child>li:last-child li:nth-child(1){background: aqua}
/*选取ul下面类型为<li>的偶数行元素*/
ul:first-child>li:nth-child(2n){background: blueviolet}
p:first-child{color: #ff0000} /*匹配到p元素，因为他在li和div里面都是第一个*/
h1:first-child{ color: red} /*匹配不到任何元素，因为h1在div里面是第二个*/
h1:nth-child(1){color:red}/*匹配不到任何元素，因为h1在div里面是第二个*/
span:first-child{ color: #ff0000}/*匹配不到任何元素，因为h1在div里面是第三个和第四个*/
p:first-of-type{ color: blue}/*匹配到p元素，因为他在所有块元素里面都是第一个*/
h1:first-of-type{ color: blue}/*匹配到第二个子元素h1，因为他是div里面所有h1的第一个*/
span:first-of-type{ color: blue}/*匹配到第三个子元素span，他是2个span元素中的第一个*/
</style>
</head>
<body>
<ul>
<li>学习环境与软件安装</li>
<li>常用html标签</li>
<li><p>CSS基础与选择器</p>
<ul>
<li>CSS常用选择器</li>
<li>CSS常用伪类选择器</li>
</ul>
</li>
</ul>
<div>
<p>这是p元素</p>
<h1>这是H1</h1>
<span>这是第一个span</span>
<span>这是第二个span</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
六、举例演示常用CSS表单伪类选择器(不少于三种)
:enabled: 选择每个启用的 <input> 元素
:disabled: 选择每个禁用的 <input> 元素
:checked: 选择每个被选中的 <input> 元素
:required: 包含required属性的元素
:optional: 不包含required属性的元素
:valid: 验证通过的表单元素
:invalid: 验证不通过的表单
:read-only: 选择只读表单元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单伪类选择器</title>
<style>
/*选择所有有效的input元素*/
input:enabled {
background: lightgoldenrodyellow
}
/*选择所有禁用的input元素*/
input:disabled {
background: red
}
/*选择所有被选中的input元素*/
input:checked {
background: yellow
}
/*选择所有必选项的input元素*/
input:required {
background: black
}
</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="">关注领域</label>
<input type="checkbox" name="field[]" id="Internet" checked><label for="Internet">互联网</label>
<input type="checkbox" name="field[]" id="agricultural"><label for="agricultural">新农业</label>
<input type="checkbox" name="field[]" id="Science"><label for="Science">科技</label>
</p>
<p>
<label for="warning">警告:</label>
<input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled>
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
笔记：
