元素按显示方式分为哪几种, 并举例, 正确描述它们
元素按照显示方式分为块级元素和行内元素两种
块级元素
遵循: 最大化原则， 总是独占一行显示, 自动充满父级元素的内容区，块级元素二边不允许有任何其它元素,也就是它总是自带换行的， 块级元素在没有内容撑开的情况下, 需要设置宽高,否则无法感知存在，如：div,p,h1等。
行内元素
遵循: 最小化原则，总是在一行文本元素的内部生成, 它的宽高由所在行决定,不可以设置，如：span,input等。
CSS是什么? 它的主要作用是什么?
css：层叠样式表，用来设置页面中的元素样式和布局的
什么是CSS选择器,它的样式声明是哪二部分组成?
css选择器是一种模式，用于选择需要添加样式的元素，样式声明部分由属性和属性值组成
举例演示CSS简单选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单选择器</title>
<style>
/*元素选择器*/
p {
color: green;
}
/*属性选择器*/
p[class] {
color: lightgray;
}
p[class="red"] {
color: red;
}
p[id="blue"] {
color: blue;
}
/*类选择器, 对应标签中的class属性*/
.red {
background-color: yellow;
}
/*ID选择器, 对应标签中的id属性*/
#blue {
background-color: lightgray;
}
/*群级选择器:*/
.red, h2 {
background-color: lightcyan;
}
/*通配符选择器*/
body * {
font-size: 3rem;
}
</style>
</head>
<body>
<p>腾讯将成NBA新赛季全国独播平台,已推出宣传片!</p>
<p class="red">定了！12月1日商合杭高铁北段正式开通</p>
<p class="red" id="blue">马英九为救韩国瑜放大招！直击蔡当局要害气氛瞬间火爆</p>
<p>62岁葛优坐出租车：现在年轻人，都不认识我了</p>
<h2>今晚加班,公司管饭管打车</h2>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
举例演示CSS上下文选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下文选择器</title>
<style type="text/css">
/*后代选择器*/
section h2 {
color: blue;
}
/*父子选择器*/
section > h2 {
color: red;
}
/*同级相邻选择器*/
.xl + * {
background-color: lightblue;
}
/*同级所有选择器*/
#item ~ * {
background-color: lightpink;
}
</style>
</head>
<body>
<section>
<div>
<h2 id="item">PHP中文网</h2>
<h2>phpStudy V8</h2>
<h2>小皮控制面板</h2>
</div>
<h2 class="xl">HTML中文网</h2>
<h2>Python中文网</h2>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
举例演示常用CSS结构伪类选择器(不少于四种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style type="text/css">
:root{
background: yellow;
}
ul > :nth-child(2) {
background-color: lightblue;
}
ul:first-child > :last-child {
background-color: red;
}
ul:first-child > :nth-child(2) {
background-color: lightgreen;
}
</style>
</head>
<body>
<ul>
<li>
<h3>短歌行</h3>
<ul>
<li>白日何短短，百年苦易满。</li>
<li>苍穹浩茫茫，万劫太极长。</li>
<li>麻姑垂两鬓，一半已成霜。</li>
</ul>
</li>
<li>
<h3>短歌行二</h3>
<ul>
<li>吾欲揽六龙，回车挂扶桑。</li>
<li>苍穹浩茫茫，万劫太极长。</li>
<li>李白</li>
</ul>
</li>
<li>
<h3>短歌行</h3>
<ul>
<li>白日何短短，百年苦易满。</li>
<li>苍穹浩茫茫，万劫太极长。</li>
<li>麻姑垂两鬓，一半已成霜。</li>
</ul>
</li>
<p>一鸟死，百鸟鸣。一兽走，百兽惊。</p>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
举例演示常用CSS表单伪类选择器(不少于三种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单伪类</title>
<style type="text/css">
input:enabled {
background-color: red;
}
/*选择禁用元素*/
input:disabled {
background-color: green;
}
/*选择所有必选项*/
input:required {
background-color: yellow;
}
</style>
</head>
<body align="center">
<h2>网站用户注册</h2>
<form>
<p>
<label for="username">账号：</label>
<input type="text" name="username" id="username" value="zhangsan" required>
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" placeholder="必须在8到12位之间" required>
</p>
<p>
<label>邮箱：</label>
<input type="email" name="email" id="email" placeholder="example@email.com">
</p>
<p>
<label for="warning">警告:</label>
<input type="text" id="warning" value="一天内仅允许注册三次" style="border:none" disabled>
</p>
<p>
<button type="button">注册</button>
</p>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
PS：手抄代码如下
