元素按显示方式分为哪几种, 并举例, 正确描述它们
块级框对应的是块级元素, 行内框对应的是行内元素
一切元素都是框
任何元素都会在页面上占据一定的空间, 页面是以框的形式来显示它们
行内框的宽高, 由它内部的内容决定
块级框的宽高, 是由它内部的子元素决定
一般来说, 块级框内,可以嵌套行内框, 反过来就不允许(可用display改变)
CSS是什么? 它的主要作用是什么?
CSS: 层叠样式表(Cascading Style Sheets)
CSS是用来设置页面中的元素样式和布局的
什么是CSS选择器,它的样式声明是哪二部分组成?
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到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和id属性,所以css针对这二个属性创建了二个快捷方式*/
/*类选择器, 对应标签中的class属性
第二,三行文本前景色更新为红色, 表示类选择器优先级高于元素选择器
*/
.red {
background-color: yellow;
}
/*
ID选择器, 对应标签中的id属性
第三行文本前景色更新为蓝色, 表示ID选择器优先器高于类选择器
*/
#blue {
background-color: lightgray;
}
/*
群级选择器:
多个选择器之间用逗号分隔, 用于将样式应用到一组元素上
将有class="red"的元素和<h2>元素选中,并将背景色设置为黄色
第三行.red背景未改变,是因为它还有一个id属性, 而该属性优先级高于类属性
*/
.red, h2 {
background-color: lightcyan;
}
/*通配符选择器*/
/*将body中所有元素内的文本字体放大一倍, rem是指相对于html根元素的字体大小*/
body * {
font-size: 2rem;
}
</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>
/*后代选择器*/
section h2 {
color: green;
}
/*父子选择器*/
/*div中的三个h2标签并非是section的直接子元素,所以未匹配*/
section > h2 {
color: red;
}
/*同级相邻选择器*/
#item + * {
background-color: lightblue;
}
/*同级所有选择器*/
/*只会选择中与#item同级的, 不会选中div外部元素*/
#item ~ * {
background-color: lightpink;
}
</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结构伪类选择器(不少于四种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/*非限定类型*/
/*选中页面所有的ul下面的子第二个子元素*/
ul > :nth-child(2) {
background-color: lightblue;
}
/*如果只想选中第一个ul中的第二个子元素*/
/*会匹配到工作计划*/
ul:first-child > :nth-child(2) {
background-color: lightgreen;
}
/*选中最后一个: 重要通知*/
ul:first-child > :last-child {
background-color: lightpink;
}
/*选中最后一个子元素中,类型为<p>的元素*/
/*参数是表达式时, n从0开始, n+1, 表示的索引是: 1,2,3,4...*/
ul:first-child > :last-child > p:nth-child(n+1) {
background-color: yellow;
}
/*选中最后一个子元素中,类型为<li>的后代元素*/
/*开发部, 市场部, 销售部会更新背景色*/
ul:first-child > :last-child li:nth-child(n+1) {
background-color: lightgray;
}
/*************************************************/
/*使用限定类型伪类来改写上面案例*/
/*仅以改写最后二个为例, 其它的改写方式相同*/
/*选中最后一个子元素中,类型为<p>的元素*/
ul:first-of-type > :last-of-type > p:nth-of-type(n+1) {
background-color: cyan;
}
/*选中最后一个子元素中,类型为<li>的后代元素*/
/*开发部, 市场部, 销售部会更新背景色*/
ul:first-child > :last-child li:nth-child(n+1) {
background-color: lightsalmon;
}
</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>准备录制前端开发实战课程</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表单元素*/
/*下拉列表虽有效,但不是input,所以未选中*/
/*警告信息是禁用项, 所以未选中*/
/*保存密码项实际上选中的, 通过检查元素可以查询*/
input:enabled {
background-color: blanchedalmond;
}
/*选择禁用元素*/
input:disabled {
background-color: blueviolet;
}
/*选择所有必选项*/
input:required {
background-color: yellow;
}
</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>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：通过学习css知道了如何装饰页面并通过css选择器控制页面当中的元素，属性，以及通过多种方式操作标签设置样式。
