元素显示方式分为哪几种，举例并正确描述它们 分为 置换元素、非置换元素、块级元素、行内元素1. 一切元素都是框；2. 任何元素都会在页面上占据一定空间，页面是以框的形式来显示它们；3. 块级框对象是块级元素，行内框对于的是行内元素；4. 行内框的宽高，由它内部的内容决定5. 块级元素的宽高，由它内部的子元素决定6. 一般来说，块级框内，可以嵌套行内框，反过来不允许(可用display改变） CSS是什么？它的主要作用是什么？css是层叠样式表作用：用来设置HTML元素在文档中的布局与显示方式 什么是CSS选择器，它的样式声明是哪两部分组成的？CSS样式声明=属性+属性值
作业代码
简单选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单选择器</title>
<link rel="stylesheet" href="static/style1.css">
<style>
p {
color: blue;
}
div {
color:lightgreen;
}
p[class]{
color: aqua;
}
p[class="new"]{
color: antiquewhite;
}
p[id="1"]{
background-color: lightgreen;
}
body * {
font-size: 2rem;
}
</style>
</head>
<body>
<p id="1">商务部新闻发言人:双方牵头人将于本周五再次通话</p>
<p>白宫说仍期待11月与中方敲定第一阶段贸易协议</p>
<p>前三季度检察机关批准逮捕侵害未成年人权益犯罪37514人</p>
<p class="imp">专访工信部王志勤：中国5G套餐资费低于国际主流运营商</p>
<p class="new">这有一份11月新规清单，快来查收！</p>
<div>卫健委:流感疫苗总体供应量充足 批签发量已超过2000万剂次</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
上下文选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下文选择器</title>
<style>
div h2 {
color: blue;
}
div>h2{
background-color: lightgreen;
}
div+h2{
color: aquamarine;
}
div~*{
background-color: royalblue;
}
</style>
</head>
<body>
<section>
<div>
<h2>习近平的“国家治理公开课</h2>
<h2>这个经验，历久弥新</h2>
<h2>医疗资源下沉为贫困群众筑牢“健康长城”</h2>
</div>
<h2>上海国展中心“内外兼修” 迎接进博会</h2>
<h2>《习近平谈治国理政》葡文巴西版首发式举行</h2>
<h2>人民日报钟声：相约进博会 书写新篇章</h2>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
伪类选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非限定类型的伪类选择器</title>
<style>
ul > :nth-child(2){
color:red
} /*所有ul标签下的第二个子元素 */
ul:first-child > :nth-child(2){
background-color: lightgreen;
}/* 第一个ul标签下的第二个子元素*/
ul:first-child > :last-child{
background-color: #007efc;
} /*第一个UL标签下的最后一个子元素*/
ul:first-of-type > :last-of-type{
color: darkgoldenrod;
}
ul:first-child > :last-child > p:nth-child(n+1){
background-color: lightseagreen;;
}
</style>
</head>
<body>
<ul>
<li>
<h3>娱乐新闻</h3>
<ul>
<li>李小璐和PGONE视频流出，GAI发文图片背景亮了，马苏回应称脸真疼</li>
<li>杨幂承认耽误了刘恺威，要不是怀上小糯米她嫁的就是他，你不配</li>
<li>《鹰眼》电视剧，将揭示复仇者初始成员，克林特·巴顿的背景故事</li>
<li>杨颖又闯大祸？犯错后连忙发文致歉，网友却不买账：滚出娱乐圈</li>
</ul>
</li>
<li>
<h3>社会新闻</h3>
<ul>
<li id="1">商务部新闻发言人:双方牵头人将于本周五再次通话</li>
<li>白宫说仍期待11月与中方敲定第一阶段贸易协议</li>
<li>前三季度检察机关批准逮捕侵害未成年人权益犯罪37514人</li>
<li class="imp">专访工信部王志勤：中国5G套餐资费低于国际主流运营商</li>
<li class="new">这有一份11月新规清单，快来查收！</li>
<li>卫健委:流感疫苗总体供应量充足 批签发量已超过2000万剂次</li>
</ul>
</li>
<li>
<h2>体育新闻</h2>
<ul>
<li>白泰森与“嘴炮”康纳强强联合，共同亮相2020综合..</li>
<li>贝尔太抢手！不止申花 英超三豪门等他搭救 回老东家..</li>
<li>国足新名单惊喜！曝恒大前锋有望重返国家队，给艾克森..</li>
</ul>
<p>今天是10月31日</p>
</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
表单选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单伪类选择器</title>
<style>
input:enabled {
background-color: lightgreen;
}
input:disabled {
background-color:blue;
}
input:required {
background-color: lawngreen;
}
</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>运行实例 »
点击 "运行实例" 按钮查看在线实例