10月30日 作业
* 元素按显示方式分为哪几种, 并举例, 正确描述它们
实例
1.1 按内容是否可替换 1.1.1 置换元素 元素内容来自文档外部, 可以替换成不同的资源 该类元素都过特定属性实现资源的置换 由于这类元素不由文档直接提供,所以大小尺寸未知 此时,遵循最小化原则,尽可能最小的空间来显示它们 所以, 这类元素通常都是以行内元素身份出现(并非总是如此) 你可能已经猜到, 置换元素大多用自闭合标签/空标签来描述 实例: <img>, <input>都是这类元素 <img src="...">: 以src属性指向引用的外部图片资源 <input type="...">: type不同,替换成不同的类型 1.1.2 非置换元素 元素内容由文档直接提供, HTML中绝大多数元素,都属于此类 非置换元素的内容通常放在二个标签之间, 所以大多采用双标签 非置换元素, 有块元素与有行内元素, 只是提供者不同罢了 实例: <h1><p><span><div><table><ul+li><a>... 1.2 按元素是否独占一行 1.2.1 块级元素 遵循: 最大化原则 总是独占一行显示, 自动充满父级元素的内容区 块级元素二边不允许有任何其它元素,也就是它总是自带换行的 块级元素在没有内容撑开的情况下, 需要设置宽高,否则无法感知存在 例如: <div>, <ul+li>, <table>,<p>, <h1-h6>... 1.2.1 行内元素 遵循: 最小化原则 总是在一行文本元素的内部生成, 它的宽高由所在行决定,不可以设置 例如: <span>,<input>, <em>,<strong>,<a>... 2. 元素的显示方式 一切元素都是框 任何元素都会在页面上占据一定的空间, 页面是以框的形式来显示它们 块级框对应的是块级元素, 行内框对应的是行内元素 行内框的宽高, 由它内部的内容决定, 块级框的宽高, 是由它内部的子元素决定 一般来说, 块级框内,可以嵌套行内框, 反过来就不允许(可用display改变)
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS是什么? 它的主要作用是什么?
答：css是层叠样式表，如同给人穿衣服一样，也可以比做衣服，可以给元素穿上不同的衣服，显示不同的属性。作用是用于布局和现实。
* 举例演示CSS简单选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单选择器以及优先级</title>
<style>
/*元素选择器*/
p {
color: black;
}
/**
属性选择器
属性由属性名和值二部分组成,对应的语法也有二种
*/
p[class] {
color: lightgreen;
}
p[class="red"] {
color: bule;
}
p[id="blue"] {
color: blue;
}
/*几乎所有的元素都可以添加class和id属性,所以css针对这二个属性创建了二个快捷方式*/
/*类选择器, 对应标签中的class属性
第二,三行文本前景色更新为红色, 表示类选择器优先级高于元素选择器
*/
.red {
background-color: black;
}
/*
ID选择器, 对应标签中的id属性
第三行文本前景色更新为蓝色, 表示ID选择器优先器高于类选择器
*/
#blue {
background-color: lightgreen;
}
/*
群级选择器:
多个选择器之间用逗号分隔, 用于将样式应用到一组元素上
将有class="red"的元素和<h2>元素选中,并将背景色设置为黄色
第三行.red背景未改变,是因为它还有一个id属性, 而该属性优先级高于类属性
*/
.red, h2 {
background-color: lightcyan;
}
/*通配符选择器*/
/*将body中所有元素内的文本字体放大一倍, rem是指相对于html根元素的字体大小*/
body * {
font-size: 2rem;
}
</style>
</head>
<body>
<p>吃了4碗面 付了1001264元!店主傻眼</p>
<p class="red">中国赢得漂亮:联合国关键位置打败美</p>
<p class="red" id="blue">身价万亿女总裁 为何却让14亿人揪心</p>
<p>美新航母二号舰下水 首舰仍无法作战</p>
<h2>今晚吃鸡，是鸡腿，不是游戏!</h2>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 举例演示CSS上下文选择器(全部)
实例
<!--a.css/里面填写css样式
/*后代选择器*/section h2 { color: green;}
/*父子选择器*//*div中的三个h2标签并非是section的直接子元素,所以未匹配*/section > h2 { color: red;}
/*同级相邻选择器*/#item + * { background-color: lightblue;}
/*同级所有选择器*//*只会选择中与#item同级的, 不会选中div外部元素*/#item ~ * { background-color: lightpink;}
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下文选择器</title>
<link rel="stylesheet" href="/css/a.css">
</head>
<body>
<section>
<div>
<h2 id="item">你赢了</h2>
<h2>你输了</h2>
<h2>很遗憾平局</h2>
</div>
<h2>奇迹啊！</h2>
<h2>你真棒！</h2>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 举例演示常用CSS结构伪类选择器(不少于四种)
实例
<!--
伪类选择器
伪类, 顾名思义, 仍然是"class"级别的选择器, 优先级小于id,大于标签
为了与传统的类选择器相区别, 伪类采用冒号:, 而不是点.
伪类之前常用在链接标签上<a>,非常简单大家可自行度度, 不再多说
我们重点放在伪类最重要的应用场景:
结构伪类: 根据子元素的位置特征进行选择
表单伪类: 根据表单控制状态特征进行选择
7.1 结构伪类
结构性伪类通常用于后代选择器中, 在父元素上调用,选择子元素集合中匹配的元素
非限定类型
所谓非限定类型, 是指只关注子元素的位置, 忽略子元素类型(当然也可以指定类型)
:nth-child(n)是最主要的非限定类型,其它四个只是它的某种行为快捷方式罢了
:nth-child(n): 匹配父元素中指定索引的子元素
:first-child: 匹配父元素中的第一个子元素
:last-child: 匹配父元素中的最后一个子元素
:nth-last-child(n): 匹配从父元素中倒数选择子元素
:only-child: 匹配父元素中的唯一子元素
限定类型
所谓限定类型, 是指既关注子元素的位置, 也关注子元素类型(当然也可以忽略类型)
selector:nth-of-type(n)是最主要的限定类型,其它四个只是它的快捷方式
selector:nth-of-type(n): 匹配父元素中指定索引的子元素
selector:first-of-type: 匹配父元素中的第一个子元素
selector:last-of-type: 匹配父元素中的最后一个子元素
selector:nth-last-of-type(n): 匹配从父元素中倒数选择子元素
selector:only-of-type: 匹配父元素中的唯一子元素
非限定到限定的转换规则, 将child 用 of-type替换即可
常规语法: [selector]::nth-of-type(n)
非限定与限定之间的转换
非限定,如:nth-child(n)前面加上选择器, 则自动转换为限定类型
限定类型, 如selector::nth-of-type(n),省略前面选择器, 则转为非限定类型
因为二者并无本质区别, 且可互相转换, 具体使用哪个都不会影响结果,效率也相同
这二种伪类选择器, 只是关注点不同罢了, 大家不必想得太复杂, 理解设计初衷就好
个人推荐首选限定类型选择器, 语义化更强烈
结构伪类的参数
伪类中的参数n有二种类型, 它对应的初值并不相同
当n为字面量,则从1开始, 如(1,2,3...)
当n为表达式时, 如(2n, 2n+1, 2n-1...), 则从0开始,如果计算结果为0或负数,不会匹配
当n为负值是, 表示从反方向开始计算,如(-3), 即倒数三个
为奇偶索引,创建了二个快捷参数: (odd)奇数, (even)偶数
表单伪类
:enabled: 选择每个启用的 <input> 元素
:disabled: 选择每个禁用的 <input> 元素
:checked: 选择每个被选中的 <input> 元素
:required: 包含required属性的元素
:optional: 不包含required属性的元素
:valid: 验证通过的表单元素
:invalid: 验证不通过的表单 : :read-only: 选择只读表单元素
-->
实例/*后代选择器*/
section h2 {
color: green;
}
/*父子选择器*/
/*div中的三个h2标签并非是section的直接子元素,所以未匹配*/
section > h2 {
color: red;
}
/*同级相邻选择器*/
#item + * {
background-color: lightblue;
}
/*同级所有选择器*/
/*只会选择中与#item同级的, 不会选中div外部元素*/
#item ~ * {
background-color: lightpink;
}
运行实例 »点击 "运行实例" 按钮查看在线实例运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>结构伪类选择器</title> <link rel="stylesheet" href="/css/c.css"> </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> <h2>人员任命书</h2> <p>为了迎合公司发展，现将以下人员任命:</p> <ul> <li>张三：市场部经理职位</li> <li>张四：市场部区域总监职位</li> <li>张五：取消市场部经理职位</li> </ul> <p>凡以上人员适用试用期为3个月，到期后进行就职演讲，通过后将转为正式岗位。</p> </li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
* 举例演示常用CSS表单伪类选择器(不少于三种)
实例
<!-- required 为必选标签；disabled禁用元素--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单伪类选择器</title> <link rel="stylesheet" href="static/css/style5.css"> </head> <body> <h2>用户登录</h2> <form action="" method="post"> <p> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required placeholder="e1@q.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">COOKIE周期:</label> <select name="save_time" id="save_time"> <option value="12" selected>12H</option> <option value="24">24H</option> </select> </p> <p> <input type="hidden" name="login_time" value="登陆时间戳"> </p> <p> <label for="warning">警告:</label> <input type="text" id="warning" value="24小时只能登录1次" style="border:none" disabled> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
