1，元素按显示方式分为哪几种, 并举例, 正确描述它们
分为块级元素和行内元素
块级元素：独占一行，并自动充满父级元素的内容区，不允许两边有任何元素，自带换行
块级元素在没有内容撑开的情况下，需要设置宽高。
例如：<div>,<ul+li><table>,<p>,<h1-h6>
行内元素：总是在一个快级元素内，它的宽高由所在的行决定，不能设置
例如：<span><input><em><strong><a>
2， CSS是什么? 它的主要作用是什么?
层叠样式表(英文全称：Cascading Style Sheets)
用来设置HTML元素在文档中的不布局与显示方式
3，什么是CSS选择器,它的样式声明是哪二部分组成?
选择器，用来选择页面中的标签
由选择器和样式声明组成，其中样式声明由键值对组成，键为属性，值为样式规则。
4，举例演示CSS简单选择器(全部)
1，元素选择器
通过<P>标签元素，改变页面中<p>的颜色
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS基础2</title>
<style>
/* 元素选择器,也叫标签选择器 */
p{
color: red;
}
</style>
</head>
<body>
<p style="color:royalblue">php中文网1</p>
<p>php中文网2</p>
<p>php中文网3</p>
<p>php是世界上最好的编程语言</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2，属性选择器
选择并改变属性值为php的class的内容
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS基础2</title>
<style>
/* 属性选择器 */
/*class*/
.php{
color: rosybrown;
}
/*id*/
#php1 {
color: blue;
}
</style>
</head>
<body>
<p class="php">php中文网2</p>
<p id="php1">php中文网3</p>
<p>php是世界上最好的编程语言</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
上述实例中使用的选择其中优先级： id>class>元素选择器
* 举例演示CSS上下文选择器(全部)
1，后代选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下文选择器/结构选择器</title>
<style>
/*后代选择器*/
section h2 {
color: blue;
}
</style>
</head>
<body>
<section>
<div>
<h2 id="php1">淘宝网</h2>
<h2 id="php2">京东</h2>
<h2 id="php3">拼多多</h2>
</div>
<h2>HTML中文网</h2>
<h2>Python中文网</h2>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2，父子选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下文选择器/结构选择器</title>
<style>
/*父子选择器*/
section > h2 {
color: blue;
}
</style>
</head>
<body>
<section>
<div>
<h2 id="php1">淘宝网</h2>
<h2 id="php2">京东</h2>
<h2 id="php3">拼多多</h2>
</div>
<h2>HTML中文网</h2>
<h2>Python中文网</h2>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3,同级相邻选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下文选择器/结构选择器</title>
<style>
/*同级相邻选择器*/
#php1 + h2 {
background: aqua;
}
</style>
</head>
<body>
<section>
<div>
<h2 id="php1">淘宝网</h2>
<h2 id="php2">京东</h2>
<h2 id="php3">拼多多</h2>
</div>
<h2>HTML中文网</h2>
<h2>Python中文网</h2>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4, 同级所有选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下文选择器/结构选择器</title>
<style>
/*同级所有选择器*/
#php1 ~ *{
background: blueviolet;
}
</style>
</head>
<body>
<section>
<div>
<h2 id="php1">淘宝网</h2>
<h2 id="php2">京东</h2>
<h2 id="php3">拼多多</h2>
</div>
<h2>HTML中文网</h2>
<h2>Python中文网</h2>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 举例演示常用CSS结构伪类选择器(不少于四种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/*非限定类型伪类*/
/*选中所有ul下面的第二个子元素*/
ul > :nth-child(2) {
background: aqua;
}
/*选中第一个ul中的第二个子元素*/
ul:first-child > :nth-child(2) {
background: red;
}
/*最后一个子元素*/
ul:first-child > :last-child {
background: blue;
}
/*选中最后一个子元素类型为p的元素*/
ul:first-child > :last-child > p:nth-child(n+1){
background: greenyellow;
}
/*选中最后一个子元素中 li所有的元素*/
ul:first-child > :last-child li:nth-child(n+1){
background: green;
}
</style>
<!-- <link rel="stylesheet" href="/static/css/style4.css">-->
</head>
<body>
<ul>
<li>
<h3>购物车</h3>
<ul>
<li>MacBook Pro 笔记本一台</li>
<li>iPhone X Max 手机一部</li>
<li>SONY A7M3 相机一部</li>
</ul>
</li>
<li>
<h3>工作计划</h3>
<ul>
<li>准备录制前端开发实战课程</li>
<li>Laravel项目开发全程实录</li>
<li>编写前端开发实例大全电子书</li>
</ul>
</li>
<li>
<h2>重要通知</h2>
<p>今天开始,为了赶项目,全公司开始进入加班模式,具体安排如下:</p>
<ul>
<li>开发部: 19:00 - 24:00</li>
<li>市场部: 19:00 - 23:00</li>
<li>销售部: 19:00 - 22:00</li>
</ul>
<p>凡加班人员, 提供免费晚餐, 滴滴补助, 不愿回家,可报住宿费200/人</p>
</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 举例演示常用CSS表单伪类选择器(不少于三种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单伪类选择器</title>
<style>
input:enabled {
background-color: red;
}
input:disabled {
background-color: bisque;
}
input:required {
background-color: salmon;
}
</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="save" >保存密码:</label>
<input type="checkbox" id="save" name="save" checked readonly>
</p>
<p>
<label for="save_time">保存期限:</label>
<select name="save_time" id="save_time">
<option value="7" selected>7天</option>
<option value="30">30天</option>
</select>
</p>
<p>
<input type="hidden" name="login_time" value="登陆时间戳">
</p>
<p>
<label for="warning">警告:</label>
<input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled>
</p>
<script>
document.querySelector('[type="hidden"]').value = new Date().getTime()
</script>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
