一、 元素按显示方式分为哪几种, 并举例, 正确描述它们
1、元素按显示方式分为行内元素和块元素；
2、行内元素的宽高, 由它内部的内容决定；
3、块级元素的宽高, 是由它内部的子元素决定；
4、一般来说, 块级元素内,可以嵌套行内元素, 反过来就不允许(可用display改变)。
二、CSS是什么? 它的主要作用是什么?
CSS: 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS是用来设置页面中的元素样式和布局的。
三、 什么是CSS选择器,它的样式声明是哪二部分组成?
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。css样式声明是由属性和值组成；列如：font-size：16px；font-size是属性，16px是值。
四、 举例演示CSS简单选择器(全部)
1、元素选择器: div {...}
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
p{
background-color:red ;
}
</style>
</head>
<body>
<p>你好，PHP中文网！</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、属性选择器: tag[property...]
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
p[class]{
font-size: 18px;
background-color: #d9edf7;
}
p[class="red"]{
color: red;
}
p[id="blue"]{
font-weight: 600;
color: blue;
}
</style>
</head>
<body>
<P class="item">上海国展中心“内外兼修” 迎接进博会</P>
<P class="red">美国防长这套把戏被耿爽揭穿后 外媒紧跟着补刀</P>
<P class="red">NBA-勇士官宣库里骨折 勇士惨败</P>
<P id="blue">乔欣整容式眼妆 杨幂被发型毁了</P>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3、类/class选择器: .active {...}
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类/class选择器</title>
<style>
.red{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p class="red">哈啰，欢迎来到PHP中文网！~~</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4、ID选择器: #main {...}
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
#pitem{
font-weight: bold;
color: red;
background-color: #d9edf7;
}
</style>
</head>
<body>
<P id="pitem">上海国展中心“内外兼修” 迎接进博会</P>
<p>2019十大经济年度人物评选启动</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
5、群组选择器: p, .active, div {...}
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style>
#pitem,h3,div{
font-size: 20px;
color: #2d6a88;
background-color: aliceblue;
}
</style>
</head>
<body>
<P id="pitem">上海国展中心“内外兼修” 迎接进博会</P>
<h3>WTA年终总决赛：贝尔腾斯力克世界第一巴蒂</h3>
<div>丰田全新SUV比卡罗拉还小1级 宝马全新8系四门版已到店</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
6、通配符选择器: *, 表示全部元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通配符选择器</title>
<style>
html{
font-size: 12px;
}
body *{
font-size: 2rem;
color: red;
}
</style>
</head>
<body>
<P id="pitem">上海国展中心“内外兼修” 迎接进博会</P>
<p>2019十大经济年度人物评选启动</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五、 举例演示CSS上下文选择器(全部)
1、后代选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
/*后代选择器*/
section h2{
color: green;
}
</style>
</head>
<body>
<section>
<div>
<h2>小皮控制面板</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: red;
}
</style>
</head>
<body>
<section>
<div>
<h2>PHP中文网</h2>
<h2>phpstudy V8</h2>
<h2>小皮控制面板</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>
#item+*{
background: #2d6a88;/*必须同级，必须相邻*/
}
</style>
</head>
<body>
<section>
<div>
<h2 id="item">PHP中文网</h2>
<h2>phpstudy V8</h2>
<h2>小皮控制面板</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>
#item~*{
background-color: brown;/*所有同级*/
}
</style>
</head>
<body>
<section>
<div>
<h2 id="item">PHP中文网</h2>
<h2>phpstudy V8</h2>
<h2>小皮控制面板</h2>
</div>
<h2>HTML中文网</h2>
<h2>python 中文网</h2>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
六、举例演示常用CSS结构伪类选择器(不少于四种)
1、选择所有的UL中的第二个子元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择所有的UL中的第二个子元素</title>
<style>
/*选择所有的UL中的第二个子元素*/
ul>:nth-child(2){
background-color: lightblue;
}
</style>
</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>MacBook Pro 笔记本一台</li>
<li>iPhone x Max 手机一台</li>
<li>SONY A7M3 相机以部</li>
</ul>
</li>
<li>
<h3>购物车</h3>
<ul>
<li>MacBook Pro 笔记本一台</li>
<li>iPhone x Max 手机一台</li>
<li>SONY A7M3 相机以部</li>
</ul>
</li>
<li>
<h3>重要通知</h3>
<p>扩大后回家哦阿姐都劝我</p>
<ul>
<li>MacBook Pro 笔记本一台</li>
<li>iPhone x Max 手机一台</li>
<li>SONY A7M3 相机以部</li>
</ul>
<p>它可能是最温顺的迈凯伦 谁说停产了!日产全新"Z"曝光</p>
</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、选择第一个的UL中的第二个子元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择第一个的UL中的第二个子元素</title>
<style>
/*选择第一个的UL中的第二个子元素*/
ul:first-child>:nth-child(2){
background-color: red;
}
</style>
</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>MacBook Pro 笔记本一台</li>
<li>iPhone x Max 手机一台</li>
<li>SONY A7M3 相机以部</li>
</ul>
</li>
<li>
<h3>购物车</h3>
<ul>
<li>MacBook Pro 笔记本一台</li>
<li>iPhone x Max 手机一台</li>
<li>SONY A7M3 相机以部</li>
</ul>
</li>
<li>
<h3>重要通知</h3>
<p>扩大后回家哦阿姐都劝我</p>
<ul>
<li>MacBook Pro 笔记本一台</li>
<li>iPhone x Max 手机一台</li>
<li>SONY A7M3 相机以部</li>
</ul>
<p>它可能是最温顺的迈凯伦 谁说停产了!日产全新"Z"曝光</p>
</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3、选择第一个的UL中的最后一个子元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择第一个的UL中的最后一个子元素</title>
<style>
/*选择第一个的UL中的最后一个子元素*/
ul:first-child>:last-child{
background-color: #3a87ad;
}
</style>
</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>MacBook Pro 笔记本一台</li>
<li>iPhone x Max 手机一台</li>
<li>SONY A7M3 相机以部</li>
</ul>
</li>
<li>
<h3>购物车</h3>
<ul>
<li>MacBook Pro 笔记本一台</li>
<li>iPhone x Max 手机一台</li>
<li>SONY A7M3 相机以部</li>
</ul>
</li>
<li>
<h3>重要通知</h3>
<p>扩大后回家哦阿姐都劝我</p>
<ul>
<li>MacBook Pro 笔记本一台</li>
<li>iPhone x Max 手机一台</li>
<li>SONY A7M3 相机以部</li>
</ul>
<p>它可能是最温顺的迈凯伦 谁说停产了!日产全新"Z"曝光</p>
</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4、选择最后一个子元素中类型为p的元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择最后一个子元素中类型为p的元素</title>
<style>
/*选择最后一个子元素中类型为p的元素*/
ul:first-child>:last-child>p:nth-child(n+1){
background-color: yellow;
}
</style>
</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>MacBook Pro 笔记本一台</li>
<li>iPhone x Max 手机一台</li>
<li>SONY A7M3 相机以部</li>
</ul>
</li>
<li>
<h3>购物车</h3>
<ul>
<li>MacBook Pro 笔记本一台</li>
<li>iPhone x Max 手机一台</li>
<li>SONY A7M3 相机以部</li>
</ul>
</li>
<li>
<h3>重要通知</h3>
<p>扩大后回家哦阿姐都劝我</p>
<ul>
<li>MacBook Pro 笔记本一台</li>
<li>iPhone x Max 手机一台</li>
<li>SONY A7M3 相机以部</li>
</ul>
<p>它可能是最温顺的迈凯伦 谁说停产了!日产全新"Z"曝光</p>
</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
七、举例演示常用CSS表单伪类选择器(不少于三种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单伪类选择器</title>
<style>
/*选择每个启用的 input元素*/
input:enabled{
background-color: yellow;
}
/*选择每个禁用的input元素*/
input:disabled{
background-color: pink;
}
/*选择每个被选中的input元素*/
input:checked{
background-color: blue;
}
/*包含required属性的元素*/
input:required{
background-color: red;
}
</style>
</head>
<body>
<h2>用户登录</h2>
<form action="admin.php" method="post">
<p>
<label for="ph"one">手机:</label>
<input type="text" id="phone" name="phone" required>
</p>
<p>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="example@email.com" required >
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="密码长度为6位~18字符" required>
</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>运行实例 »
点击 "运行实例" 按钮查看在线实例