网页前端设计-作业二(CSS)

发布于:2023-01-12 ⋅ 阅读:(1465) ⋅ 点赞:(1)

参考教材:HTML5网页前端设计(第2版 )  作者:周文洁

1 . 普通 (4分)元素可以向哪些方向进行浮动?如何清除浮动效果?

在CSS中float属性可以用于令元素向左或向右浮动。常用clear:both来清除之前元素的浮动效果。

2 . 普通 (4分)CSS背景图像的平铺方式有哪几种?

repeat-x(水平方向平铺),repeat-y(垂直方向平铺),repeat(水平和垂直方向都平铺)以及no-repeat(不平铺,只显示原图)。

3 . 普通 (4分)CSS样式表有哪几种类型?它们的层叠优先级关系是?

外部样式表、内部样式表和内联样式表。优先级由低到高分别为:外部样式表-->内部样式表-->内联样式表。

4 . 普通 (4分)常用的CSS选择器有哪些?

元素选择器、id选择器、类选择器、属性选择器。

5 . 普通 (4分)SS颜色值有哪几种表达方式?

常见有如下几种表达方式: 使用RGB颜色的方式:例如rgb(0,0,0)表示黑色、rgb(255,255,255)表示白色等; RGB的十六进制表示法:例如<000000表示黑色、<FFFFFF表示白色等; 直接使用英文单词名称:例如red表示红色、blue表示蓝色等。

6 . 容易 (4分)如何使用CSS的text-decoration属性为文本添加下划线?请填空。(区分大小写) text-decoration: ___;

underline

7 . 容易 (4分)CSS的注释以“___"开头,以“___"结尾,支持单行和多行注释。

/*、*/

8 . 容易 (4分)使用CSS中的 ___属性可以为列表选项添加自定义图标编号效果。(区分大小写)

list-style-image

9 . 容易 (4分)在CSS中设置border-collapse的属性值为___时表格可以实现单线条框效果(区分大小写)

collapse

10 . 容易 (4分)在CSS样式中关于时间单位的换算关系是:___毫秒(ms)=1秒(s)。

1000 [或者] 一千

11 . 容易 (3分)在CSS样式中使用 ___属性可以设置元素的背景颜色。(区分大小写)

background-color

12 . 容易 (3分)在CSS样式中关于角度单位的换算关系是: 180deg(度°)= ___rad(弧度)。(区分大小写)

π [或者] Math.PI

360度 = 2π弧度。公式:弧度 = 角度/180 * π

13 . 普通 (3分)在CSS样式中padding用于设置元素的内边距,margin用于设置元素的外边距。

正确

14 . 困难 (3分)用于定位背景图像的属性background-position: left top还可以写成background-position:100% 0%表达同样的含义。

错误

background-position: left top表示左上角,正确的同类写法应该是background-position: 0% 0%。background-position: 100% 0%指的是右上角了,对应的其实是background-position: right top。

15 . 普通 (3分)在RGB颜色表示法中,rgb(0,0,0)表示的是白色。

错误

rgb(0,0,0)表示的黑色,rgb(255,255,255)才是白色。

16 . 容易 (3分)在CSS样式中text-align可以用于对齐文本,如果希望文本内容居中显示则text-align的属性值是middle。

错误

text-align:center表示文本居中显示。

17 . 普通 (3分)在CSS样式中,margin:20px 30px表示左右外边距为20px、上下外边距为30px。

错误

当margin的属性值有2个值时,第一个表示上下外边距,第二个表示左右外边距。

18 . 普通 (3分)浏览器默认的字体大小是16px,因此在用户未作更改的情况下,1em=16px。

正确

19 . 普通 (3分)在CSS样式中list-style-type取值为circle可以实现列表选项前面的标志样式为实心圆点。

错误

circle对应的是空心圆;disc才是实心圆,且它也是默认值可以省略不写。

20 . 普通 (3分)为表格中<caption>标签设置样式caption-side:down;可以实现表格标题出现在底部。

错误

应该是caption-side:bottom;表示表格标题出现在底部。down是干扰项,没有这个属性值。

21 . 困难 (3分)希望实现上下边框均为虚线、左右边框均为实线效果,以下哪种写法不正确?( )。

A. border-style: dashed solid;

B. border-style: dashed solid dashed solid;

C. border-style: dashed solid dashed;

D. border-style: dashed solid solid;

当border-style的取值只有1个值时表示4条边一样的效果;2个值表示上下边框和左右边框效果;3个值表示上边框、左右边框和下边框效果;4个值表示上、右、下、左边框效果。因此border-style: dashed solid solid;错误,它表示的是上边框虚线、左右边框实线,下边框实线。

22 . 容易 (3分)如果为<table>表格元素设置了样式table-layout:fixed;以下哪种说法是不正确的?( )。

A. 单元格的列宽会随着内容的多少自动调整。

B. 单元格的列宽是根据表格的总宽度平均分配的。

C. 即使文本内容较多也只能溢出单元格,而不会改变单元格宽度。

D. 如果表格宽度设置为100%,则单元格宽度会随着浏览器实际可以显示的宽度变化。

table-layout:fixed;是固定列宽不变的,而table-layout:automated;是根据内容的多少自动调节的。

23 . 容易 (3分)假设有父元素<div>宽高均为1200px,里面有4个子元素<p>宽高均为400px,并且对子元素设置了float:left;以下最不可能发生的是?( )。

A. 4个子元素都向左浮动。

B. 4个子元素都在同一行显示,溢出了父元素的宽度。

C. 最后1个子元素同一行放不下了,向下移动到第二行继续向左浮动。

D. 4个子元素仍然是宽高均为400px,没有发生尺寸的改变。

float:left表示向左浮动,如果一行显示不下则多余的元素会向下移动直到有空间再继续向左浮动。浮动只会改变排版布局效果,并不会影响原来的元素尺寸。

24 . 容易 (3分)关于样式类型list-style-type的取值,以下哪种说法是错误的?( )。

A. 属性值为decimal会显示阿拉伯数字,且从1开始计数。

B. 属性值为square会显示实心方块。

C. 属性值为decimal-leading-zero会显示阿拉伯数字,且从0开始计数。

D. 属性值为none则无标记符号。

属性值为decimal-leading-zero会显示0开头的阿拉伯数字,但是仍然从1开始计数,例如01,02,03…。

25 . 容易 (3分)关于超链接<a>的样式描述,以下哪种是不正确的?( )。

A. a:visited表示已经访问过的超链接。

B. a:hover表示鼠标悬浮在上面的超链接。

C. a:active表示正在被点击的超链接。

D. a:link表示当前没有被鼠标悬浮的超链接

a:link指的是未被访问过的超链接,当前没有鼠标悬浮不代表没有被访问过。

26 . 容易 (3分)关于字体的样式风格,以下哪种说法是不正确的?( )。

A. font-variant: small-caps;用于设置字体中英文字母均为小写字母。

B. font-family: "宋体";用于设置字体的系列为宋体字。

C. font-size:16px;用于设置字体尺寸大小为16像素。

D. font-weight: bold;用于设置字体加粗。

font-variant: small-caps;指的是设置字体中的原本的小写字母改成大写字母,但是比正常字号要小一号。

27 . 容易 (3分)以下哪个属性不能用于设置元素的单边内边距?( )。

A. padding-upper

B. padding-left

C. padding-right

D. padding-bottom

顶部内边距应该是padding-top

28 . 容易 (3分)假设有2个尺寸相同的普通块级元素A和B由上而下垂直布局,它们的外边距分别设置为20px和15px,且假设不存在浮动、行内框、绝对定位等特殊情况,关于外边距合并以下说法正确的是?( )。

A. A的下边距与B的上边距合并后的高度是15px。

B. A的下边距与B的上边距合并后的高度是5px。

C. A的下边距与B的上边距合并后的高度是35px。

D. A的下边距与B的上边距合并后的高度是20px。

外边距合并主要发生在垂直情况下普通块级元素的上下外边距发生的重叠合并现象,且会取其中较大值。

29 . 容易 (3分)如何将背景颜色设置为透明效果?( )。

A. background-color: transparent;

B. background-color: rgb(0, 0, 0);

C. background-color: <000;

D. background-color: <000000;

transparent表示透明色效果,而rgb(0,0,0)、<000以及<000000均表示黑色。额外知识点:实际上不用声明的话默认背景颜色也是透明效果。

30 . 容易 (3分)已知外部css文件中有:p{color:red},<style>与</style>中有:p{color:green} , 而<body>与</body>中有:<p style="color:yellow">测试</p> 请问此时段落元素<p>的字体颜色是?( )

A. 黄色

B. 绿色

C. 红色

D. 黑色

优先级顺序:内联样式表>内部样式表>外部样式表

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到