美文网首页
选择器与周考作业

选择器与周考作业

作者: 岸与海 | 来源:发表于2018-09-10 07:57 被阅读0次

1.元素选择器:plate
2.元素选择器:bento
3.id选择器:#fancy
4.后代选择器:plate>apple
5.复合后代:plate#fancy>pickle
6.类选择器:.small
7.类选择器:orange.small
8.后代 类选择器:bento>apple.small
9.后代选择器:plate,bento
10.所有元素选择器:*
11.后代选择器:plate>
12.兄弟选择器: plate + apple
13.兄弟选择器:bento~ pickle
14.后代选择器:plate>apple
15.后代选择器+第一个后代选择器:plate>orange:first-of-type
16.后代选择器 复合选择器:plate>apple,plate>pickle
17.交集选择器 最后一个后代:#fancy apple,pickle:last
18.子选择器:plate:nth-child(3)
19.子选择器:bento:first-of-type
20.first-of-type:apple:first-of-type
21.偶数-字选择器:plate:nth-child(even)
22.子选择器:plate:nth-child(2n+3)
23.子选择器(唯一选择器):apple:only-of-type
24.字选择器(last-of-type):orange:last-of-type ,apple:last-of-type
25.子选择器(empty):bento:empty
26.否定伪类:apple:not(.small)

周考答案
一.单选题(共20小题,每题1.5分,共30分)
1、下面哪一个标签不能放在head标签内?( C )
A. title标签 B. style标签
C. body标签 D. script标签
2、如果网页中出现乱码,我们一般使用( A )来解决。
A. <meta charset="utf-8" />
B. <style type="text/css"></style>
C. <script></script>
D. <link type="text/css" rel="stylesheet" href="css/index.css">
3、下面选项中,属于HTML正确注释方式是( C )。
A. //注释内容
B. /注释内容/
C.
D.//注释内容//
4、选出你认为最合理的定义标题的方法是( C )。
A. <div>文章标题</div> B. <p><b>文章标题</b></p>
C. <h1>文章标题</h1> D.<strong>文章标题</strong>
5、如果想要实现粗体效果,我们可以使用( A )标签来实现。
A. <strong></strong> B. <em></em>
C. D.
6、下面有关自闭合标签说法不正确的是( B )。
A. 自闭合标签只有开始符号没有结束符号
B. 自闭合标签可以在内部插入文本或图片
C. meta标签是自闭合标签
D. hr标签是自闭合标签
7、在浏览器默认情况下,下面有关块元素和行内元素说法不正确的是( D )。
A. 块元素独占一行
B. 块元素内部可以容纳块元素
C. 块元素内部可以容纳行内元素
D. 行内元素可以容纳块元素
8、下面标签中,哪一个不是块元素?( A )
A. strong B. p C. div D. hr
9、在下面几种列表形式中,哪一种在HTML5中已经被废弃了。( D )
A. 有序列表ol B.无序列表ul
C. 定义列表dl D.目录列表dir
10、下面哪种列表我们在实际开发中是用得最多的?( B )
A. 有序列表ol B.无序列表ul
C. 定义列表dl D.目录列表dir
11、下面有关ul元素说法不正确的是( D )。
A. ul元素的子元素只能是li,不能是其他元素
B. ul元素内部的文本,只能在li元素内部添加,不能在li元素外部添加
C. 绝大多数列表都是使用ul元素来实现,而不是ol元素
D. 我们可以在ul元素中直接插入div元素
12、下面有关HTML语义化不正确的是( A )。
A. 对于大多数标签实现的效果,我们完全可以使用div和span来代替实现
B. 学习HTML目的在于:在需要的地方,用正确的标签
C. 语义化对于搜索引擎优化来说是非常重要的
D. 语义化目的在于提高可读性和可维护性
14、在img标签中,( B )属性的内容是提供给搜索引擎看的。
A. src B.alt C.title D.class
15、下面说法,正确的是( B )。
A.当鼠标移到图片上时,就会显示img标签alt属性中的文字
B. src是img标签必不可少的属性,只有定义它之后图片才可以显示出来
C. 在实际开发中,我们常用的是绝对路径,很少用到相对路径
D. 如果想要显示一张动画图片,可以使用png格式来实现
23、下面说法中,正确的是( C )。
A. 现在已经是CSS3时代了,CSS2没必要再去学
B. 一般使用script标签来引用外部样式表
C. 在实际开发中,一般使用外部样式表的多
D. 内部样式表和行内样式表在实际开发中一点用处都没有
24、每一个样式声明之后,要用( B )表示一个声明的结束。
A. 逗号 B. 分号 C. 句号 D. 顿号
25、下面哪一项是CSS正确的语法结构?( D )
A. body:color=black B. {body;color:black}
C. {body:color=black;} D. body{color:black;}
26、下面有关id和class的说法中,正确的是( D )。
A. id是唯一的,不同页面中不允许出现相同的id
B. id就像你的名字,class就像你的身份证号
C. 同一个页面中,不允许出现两个相同的class
D. 可以为不同的元素设置相同的class来为他们定义相同的css样式
27、下面有关选择器的说法中,不正确的是( A )。
A. 在class选择器中,我们只能对相同的元素定义相同的class属性
B. 后代选择器选择的不仅是子元素,还包括它的其他后代元素(如“孙元素”)
C. 群组选择器可以对几个选择器进行相同的操作
D. 想要为某一个元素定义样式,我们可以使用不同的选择器来实现
28、CSS中可以使用( C )属性来定义字体粗细。
A. font-family B. font-size C. font-weight D. font-style
三、判断题(每题1分,共13分)
1.在HTML中,若实现点击超链接时,弹出一个新的网页窗口,符合要求的写法是<a href="right.html" target="_blank">节目</a> ( √ )
2.由于某些字符在HTML中有特殊含义,因此需要在浏览器中显示这些字符,就必须在HTML中使用字符转译码。其中 表示空格 ( √ )
3.在HTML中,从本页面连接到页面中锚记是marker位置的代码是<a href="hello.htm" position="marker">Hello</a> ( × )
4.<a href="index.html" target="_blank">首页</a>这段代码目标窗口在当前窗口中打开 ( × )
5.将一个网页中所有的h1元素以及p元素的字体颜色设置为红色的CSS代码为h1, p {color:red;} ( √ )
6.使用外部样式表可以使网站更加简洁,风格保持统一,它的文件扩展名为 .cs ( √ )
7.外部样式表内容不需要使用<style>标签,而是使用<link>标签引入外部样式 ( √ )
8.在HTML中,通过a{text-decoration:none}可以实现鼠标悬停在超链接上时,为无下划线的效果 ( √ )
9.div标签是块级元素 ( √ )
10.下面选项中,可以设置页面中某个DIV标签相对页面水平居中的CSS样式是vertical-align:middle ( × )
11.在HTML中,DIV默认样式下是不带滚动条的,若要使<div>标签出现滚动条,需要为该标签定义overflow:scroll样式 ( √ )
12.若某个标签里的内容超过标签的尺寸,则超出的内容自动隐藏的CSS样式是visibility:hidden ( × )
15.html内嵌框架的标签名是iframe ( √ )

  1. 权重等级由高到低依次为!important > 内联样式 > ID选择器 > 类、伪类和属性选择器( √ )
    四、简答题(每题14分,共42分)
    1、请默写HTML基本结构。
<!DOCTYPE html>
<html lang=’en’>
<head>
<title></title>
<meta charset = ‘utf-8’>
</head>
<body>
<h1></h1>
</body>
</html>

2、下面有一段代码,如果我们想要选中所有的div和p,请用至少2种不同的选择器方式来实现,并且选出最简单的一种

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div></div>
    <p></p>
    <p></p>
    <strong></strong>
    <span></span>
</body>
</html>
  1. div,p{}
  2. <div class=”a”></div>
    <p class=”a”></p>
    <p class=”a”></p>
    .a{}
    第一种简单

3、为下面这段文字定义字体样式,要求字体类型指定多种、大小为14px、粗细为粗体、颜色为蓝色。
“有规划的人生叫蓝图,没规划的人生叫拼图。”

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>hali</title>
    <style type="text/css">
    p1{color:blue;
    font:bold italic 14px '宋体,华文彩云,楷体'}

    p2{color: blue;
    font:bold italic 14px '楷体'}

    p3{color: blue;
    font:bold italic 14px '仿宋'}
    </style>
</head>
<body>
    <br>
    <p1>"有规划的人生叫蓝图,没规划的人生叫拼图."</p>
    <p2>"有规划的人生叫蓝图,没规划的人生叫拼图."</p>
    <p3>"有规划的人生叫蓝图,没规划的人生叫拼图."</p>
    <br>
</body>
</html>

五、论述题(每题15分,共15分)
请罗列出盒子模型的计算公式,盒子的宽度等于什么,盒子的高度等于什么?

盒子的计算方式:
width,height内容的宽高
整个盒子的大小:

盒子的宽:内容的宽:width+padding2+border2+margin2
盒子的高:内容的高:height+padding
2+border2+margin2

相关文章

  • 选择器与周考作业

    1.元素选择器:plate2.元素选择器:bento3.id选择器:#fancy4.后代选择器:plate>app...

  • 129

    20170925,第五周周一。 语文周末作业完成情况。 数学周考情况 英语...

  • 前端(02 HTML知识)

    作业答案: plate 元素选择器 bento 元素选择器 #fancy id选择器 plate apple 后代...

  • 作业 (游戏,博客)

    作业答案: plate 元素选择器 bento 元素选择器 #fancy id选择器 plate apple 后代...

  • jQuery之选择器

    基本选择器 层级选择器 简单伪类选择器 与内容相关的伪类选择器 与元素状态相关的伪类选择器 匹配子元素的伪类选择器...

  • CSS 选择器

    CSS选择器的概念 标签选择器 类选择器 ID选择器 类选择器与ID选择器的区别 子代选择器 后代选择器 子选择器...

  • css diner游戏

    作业答案: 1.plate 元素选择器2.bento 元素选择器3.#fancy id选择器4.plate app...

  • HTML练习题2

    作业答案:1.plate 元素选择器2.bento 元素选择器3.#fancy id选择器4.plate appl...

  • 封装函数作业回顾

    作业: 分析:all div 加 class="red" 判断 后 获取 选择器or节点选择器---返回hash...

  • CSS 几种选择器

    通配符选择器(*) 该选择器可以与任何元素匹配 后代选择器(空格) :选择器1 选择器2 { } 备注:后代选择...

网友评论

      本文标题:选择器与周考作业

      本文链接:https://www.haomeiwen.com/subject/ghujgftx.html