《CSS样式》复习题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
一、选择题
1．CSS是（ C ）的缩写。
A．C olorful S tyle S heets
B．C omputer S tyle S heets
C．C ascading S tyle S heets
D．C reative S tyle S heets
2．引用外部样式表的格式是（ B ）。
A．<style src="mystyle.css">
B．<link rel="stylesheet" type="text/css" href="mystyle.css"> C．<stylesheet>mystyle.css</stylesheet>
3．引用外部样式表的元素应该放在（ C ）。
A．HTML文档的开始的位置
B．HTML文档的结束的位置
C．在head元素中
D．在body元素中
4．内部样式表的元素是（ A ）。
A．<style>
B．<css>
C．<script>
5．元素中定义样式表的属性名是（ A ）。
A．style
B．class
C．styles
D．font
6．下列（ C ）是定义样式表的正确格式。
A．{body:color=black(body}
B．body:color=black
C．body {color: black}
D．{body;color:black}
7．下列（ A ）是定义样式表中的注释语句。
A．/* 注释语句*/
B．// 注释语句
C．// 注释语句//
D．‘ 注释语句
8．如果要在不同的网页中应用相同的样式表定义，应该（ C ）。
A．直接在HTML的元素中定义样式表
B．在HTML的<head>标记中定义样式表
C．通过一个外部样式表文件定义样式表
D．以上都可以
9．样式表定义#title {color:red} 表示（ B ）。
A．网页中的标题是红色的
B．网页中某一个id为title的元素中的内容是红色的
C．网页中元素名为title的内容是红色的
D．以上任意一个都可以
10．样式表定义.outer {background-color:yellow} 表示（ B ）。
A．网页中某一个id为outer的元素的背景色是红色的
B．网页中含有class=”outer”元素的背景色是红色的
C．网页中元素名为outer元素的背景色是红色的
D．以上任意一个都可以
11．下列（ B ）表示p元素中的字体是粗体。
A．p {text-size:bold}
B．p {font-weight:bold}
C．<p style="text-size:bold">
D．<p style="font-size:bold">
12．下列（ C ）表示a元素中的内容没有下划线。
A． a {text-decoration:no underline}
B． a {underline:none}
C． a {text-decoration:none}
D． a {decoration:no underline}
13．下列（ A ）表示上边框线宽10px，下边框线宽5px，左边框线宽20px，右边框线宽1px，。
A．border-width:10px 1px 5px 20px
B．border-width:10px 5px 20px 1px
C．border-width:5px 20px 10px 1px
D．border-width:10px 20px 5px 1px
14．下列（ A ）表示左边距。
A．margin-left
B．margin
C．indent
D．text-indent
15．设置外边距（ A ）是负数。
A．可以
B．不可以
16．下列（ A ）表示列表项符号是小方块。
A．list-style-type: square
B．type: square
C．list-type: square
D．type: 2
17．“样式表定义中的display和visibility效果是一样的，都是用于网页指定对象的隐藏和显示”的说法是（ B ）。
A．正确的
B．不正确的
18．如果要将网页中的两个div对象制作为重叠效果，（ D ）。
A．是不可能的
B．利用表格标记<table>
C．利用样式表定义中的绝对位置与相对位置属性
D．利用样式表定义中的z-index属性
19.CSS是利用什么XHTML标记构建网页布局？（ B ）
A. <dir>
B. <div>
C. <dis>
D. <dif>
20.在CSS语言中下列哪一项是"左边框"的语法？（ C ）
A. border-left-width: <值>
B. border-top-width: <值>
C. border-left: <值>
D. border-top-width: <值>
21.在CSS语言中下列哪一项的适用对象是"所有对象"？（ A ）
A. 背景附件
B. 文本排列
C. 纵向排列
D. 文本缩进
22.下列选项中不属于CSS 文本属性的是（ D ）
A．font-size B．text-transform
C．text-align D．line-height
23.在CSS 中不属于添加在当前页面的形式是（ D ）
A．内联式样式表B．嵌入式样式表
C．层叠式样式表D．链接式样式表
24.在CSS语言中下列哪一项是"列表样式图象"的语法？（D）
A. width: <值>
B. height: <值>
C. white-space: <值>
D. list-style-image: <值>
25.下列哪一项是css正确的语法构成？（ C ）
A. body:color=black
B. {body;color:black}
C. body {color: black;}
D. .{body:color=black(body}
26.下面哪个CSS属性是用来更改背景颜色的？（ A ）
A. background-color:
B. bgcolor:
C. color:
D. text:
27.怎样给所有的<h1>标签添加背景颜色?（ B ）
A. .h1 {background-color:#FFFFFF}
B. h1 {background-color:#FFFFFF;}
C. h1.all {background-color:#FFFFFF}
D. #h1 {background-color:#FFFFFF}
28.下列哪个css属性可以更改样式表的字体颜色？（ D ）
A. text-color=
B. fgcolor:
C. text-color:
D. color:
29.下列哪个css属性可以更改字体大小？（ B ）
A. text-size
B. font-size
C. text-style
D. font-style
30.下列哪段代码能够定义所有P标签内文字加粗？（ D ）
A. <p style="text-size:bold">
B. <p style="font-size:bold">
C. p {text-size:bold}
D. p {font-weight:bold}
31.如何去掉文本超级链接的下划线？（ D ）
A. a {text-decoration:no underline}
B. a {underline:none}
C. a {decoration:no underline}
D. a {text-decoration:none}
32.如何设置英文首字母大写？（ B ）
A. text-transform:uppercase
B. text-transform:capitalize
C. 样式表做不到
D. text-decoration:none
33.下列哪个css属性能够更改文本字体？（ C ）
A. f:
B. font=
C. font-family:
D. text-decoration:none
34.下列哪个css属性能够设置文本加粗？（ A ）
A. font-weight:bold
B. style:bold
C. font:b
D. font=
35.下列哪个css属性能够设置盒模型的内补丁为10.20.30.40（顺时针方向）？（ A ）
A. padding:10px 20px 30px 40px
B. padding:10px 1px
C. padding:5px 20px 10px
D. padding:10px
36下列哪个属性能够设置盒模型的左侧外补丁？（ C ）
A. margin:
B. indent:
C. margin-left:
D. text-indent:
37.定义盒模型外补丁的时候是否可以使用负值? （ A ）
A. 是
B. 否
38.如何能够定义列表的项目符号为实心矩形？（ D ）
A. list-type: square
B. type: 2
C. type: square
D. list-style-type: square
39.在CSS语言中下列哪些选项是背景图像的属性（ABCD ）
A背景重复B背景附件C纵向排列D背景位置
40.CSS 中的选择器包括（BCD ）
A．超文本标记选择器B．类选择器
C．标签选择器D．ID 选择器
41.CSS文本属性中，文本对齐属性的取值有（BCDE）
A．auto B．justify C．center D．right E．left
42.CSS中BOX的padding属性包括的属性有（BCDE）
A．填充B．上填充C．底填充D．左填充E．右填充
43.CSS中，盒模型的属性包括（BCE）
A. font
B. margin
C. padding
D. visible
E. border
44.下面关于CSS的说法正确的有（ABC ）
A. CSS可以控制网页背景图片
B. margin属性的属性值可以是百分比
C. 整个BODY可以作为一个BOX
D. 对于中文可以使用word-spacing属性对字间距进行调整
E. margin属性不能同时设置四个边的边距
45.下面关于CSS的说法正确的有（ABC ）
A. CSS可以控制网页背景图片
B. margin属性的属性值可以是百分比
C. 字体大小的单位可以是em
D.1em等于18像素
46.边框的样式可以包含的值包括：（ABC ）
A.粗细
B.颜色
C.样式
D.长短
47.光标移动文本框上方时，文本框边框的颜色就改变，这是因为激发了下列的（ C ）事件。
A. onFocus
B. onMouseUp
C. onMousrOver
D. onMousMOve
48.下列属性哪一个能够实现层的隐藏？（ C ）
A. display:false
B. display:hidden
C. display:none
D. display:" "
49.下列选项中，不属于文本属性的是（ D ）。
A. font-size
B. font-style
C. text-align
D. font-color
50.页面上有一个按钮btn，同时定义好了一个类样式（按钮图片样式表btnPic），那么使用（ B ）就可以实现背景图片的改变。
A. onMouseOver="className=btnPic"
B. onMouseOver="this.className=btnPic"
C. onMouseOver="this.style.className=btnPic"
D. this.btn.style.className="btnPic"
二、简答题
1、什么是标记选择器并举例说明。
CSS标记选择器就是声明哪些标记采用哪种CSS样式。
例如：h1{ color:red; font-size:25px; }
2、什么是类别选择器并举例说明。
类别选择器的名字可以由用户自定义，用做html页面某标签的class属性值。
例如：.red{ color:red; font-size:18px }
3、什么是ID选择器并举例说明。
ID选择器是针对html页面中某个具有此ID属性的标签设置的CSS样式。
例如：#bold{ font-weight:bold; }
4、举例说明什么是行内式CSS样式。
行内式是直接对html的标记使用style属性，然后将CSS代码直接写在其中。
例如：<p style=”color:#ff0000; font-size:20px>正文内容</p>
5、举例说明什么是内嵌式CSS样式。
内嵌样式表就是将CSS写在<head> 与</head>之间，并且用<style>和</style>标记进行声明。
例如：<head><style type=”text/css”>
p{ color:#0000ff }
</style></head>
6、举例说明什么是链接式CSS样式。
链接式CSS样式表是通过使用html链接文件标签link将外部CSS应用到本页面的样式使用方法。
例如：<link href=”myCSS.css” type=”text/css” rel=”stylesheet”>
7、举例说明什么是导入式CSS样式。
采用import方式导入的样式表，在html文件初始化时，会被导入到html文件内，作为文件的一部分，类似内嵌式的效果。
例如：@import url(sheet.css);
8、什么是交集选择器，并举例说明。
交集选择器是由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。
其中第1个必须是标记选择器，第2个必须是类别选择器或者ID选择器。
例如：p.special{ color:red }
9、什么是并集选择器，并举例说明。
并集选择器或者称为“集体声明”，它的结果是同时选中各个基本选择器所选择的范围。
例如：h1,h2,p{ color:purple; font-size:15px }
10、什么是后代选择器，并举例说明。
后代选择器的写法就是把外层的选择器名字写在前面，内层的选择器名字写在后面，之间用空格分隔。
例如：p span{ color:red }
11、在CSS中一个独立的盒子模型有哪几部分组成？
content（内容）、border（边框）、padding（内边距）和margin（外边距）
12、举例说明什么是块级元素和行内元素？
块级元素总是占据一个矩型区域，并且同级兄弟块依次竖直排列，左右撑满。
例如：<ul> 行内元素不占有独立的区域，并且同级元素之间横向排列，到最右端自动这行。
例如：<a>
13、解释一下div标签的作用
<div> 是一个区块容器标记，即<div>与</div>之间相当于一个容器，可以容纳段落、标题、表格、图片等各种html元素。
14、解释一下span标签的作用
<span>标记和<div>一样，作为容器可以容纳各种html元素，但它是一个行内元素，在它的前后不会换行。
15、解释盒子模型的float属性。
float属性默认为none，也就是标准流通常的情况。
如果将float属性的值设置为left或right，元素会向其父元素的左侧或右侧靠近，同时默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定。
16、解释盒子模型的display属性。
display属性用于确定盒子的类型。
display属性设为inline，即为“行内”；设为block，即为“块级”；设为none，即为“无”，也就是隐藏盒子。
17、圆角框主要有哪几种制作方法？
两背景图像法、四图像不固定宽度圆角框、五图像二维滑动门圆角框。
18、使用CSS主要有哪几种布局方式？
两列布局、三列布局、多列布局。
19、CSS布局方法与表格布局方法相比，有哪些优势？
（1）页面载入更快；（2）降低网站流量费用；（3）易于修改；
（4）视觉一致（5）更易于被搜索引擎找到。
20、使用CSS布局的网页应实现哪些要求？
（1）宽度使用多列布局，并保证页头和页脚正确显示；
（2）可以指定列宽度固定，其余列宽度自适应；
（3）在html中，个列可以任意顺序排列，最终效果都正确显示。
三、案例分析题
1、解释以下CSS样式的含义。
table{
border: 1px #333 solid;
font: 12px arial;
width: 500px
}
td,th{
padding: 5px;
border: 2px solid #EEE;
border-bottom-color: #666;
border-right-color: #666;
}
将表格边框宽度设为1px，颜色设为#333，边框为实线；表格中的字体大小设为12px,字体类型为arial；表格宽度为500px。
设置单元格和表头部分的样式：内边距为5px，边框宽度2px，实线，颜色为#EEE，底部和右侧边框颜色特别设为#666
2、解释以下CSS样式的含义。
form{
border:1px dotted #AAAAAA;
padding:3px 6px 3px 6px;
margin:0px;
font:14px Arial;
}
select{
width:80px;
background-color:#ADD8E6;
}
设置表单边框宽度为1px，点划线，颜色为#AAAAAA，内上、右、下、左边距分别为：3px 6px 3px 6px，外边距为0px，字体为14px大小的Arial字体。
设置选择框宽度为80px，背景颜色为#ADD8E6
3、解释以下CSS样式的含义。
input{
color:#00008B;
}
input.btn{
background-color:#ADD8E6;
padding:1px 2px 1px 2px;
}
设置input标签中字体颜色为#00008B；
input标签中id属性为btn的按钮背景颜色设为#ADD8E6，内上、右、下、左边距分别设为1px、2px、1px、2px
4、解释以下CSS样式的含义。
.rounded {
background: url(images-notebook/left-top.gif) top left no-repeat;
}
.rounded h2 {
background: url(images-notebook/right-top.gif) top right no-repeat;
padding:20px 20px 10px;
margin:0;
}
定义类选择器.rounded：背景图像为left-top.gif，从左上角开始，不平铺
定义后代选择器.rounded h2：背景图像为right-top.gif，从右上角开始，不平铺；内上、左右、下边距分别是20px 20px 10px，外边距为0
5、画出一个1-（（1-2）+1）-1的布局结构示意图。
6、画出一个1-（（1+（3-1-2））-1的布局结构示意图。
7、解释以下CSS样式的含义。
#header,#pagefooter,#container{
margin:0 auto;
width:85%;
}
#content{
position:absolute;
width: 300px;
}
设置id属性为header、pagefooter、container的div层上下外边框为0，左右外边框为auto，宽度为相对于父元素宽度的85%
设置id属性为content的div层为绝对定位，宽度为固定宽度300px
8、解释以下CSS样式的含义。
A:link { COLOR: #3333cc; TEXT-DECORATION: none }
A:visited { COLOR: #990099; TEXT-DECORA TION: none }
A:active { COLOR: #ff0000; TEXT-DECORA TION: underline }
A:hover { COLOR: #3333cc; TEXT-DECORA TION: underline }
设置超链接样式：
未操作时：颜色为#3333cc，无下划线；
单击过后：颜色为#990099，无下划线；
单击时：颜色为# ff0000，有下划线；
悬停时：颜色为# 3333cc，有下划线；
9、写出下列要求的CSS样式表
（1）设置页面背景图像为login_back.gif，并且背景图像垂直平铺。
（2）使用类选择器，设置按钮的样式，按钮背景图像：login_submit.gif；字体颜色：#FFFFFFF；字体大小：14px；字体粗细：bold；按钮的边界、边框和填充均为0px。
body{
background-image:url(img/login_back.gif);
background-repeat:repeat-y; }
.picButton{
background-image:url(img/login_submit.gif);
color:#FFFFFF;
font-size: 14px;
font-weight:bold;
margin: 0px;
border:0px;
padding: 0px; }
10、写出下列要求的CSS样式表
（1）使用<td>标签样式，设置字体颜色：#2A1FFF；字体大小：14px。
内容与边框之间的距离：5px。
（2）使用超链接伪类：不带下划线；颜色：#333333；鼠标悬停在超链接上方时，显示下划线；颜色：#FF5500。
td {
color: #2A1FFF;
font-size: 14px;
padding:5px;
}
A{
color:#333333;
text-decoration:none;
}
A:hover
{
color:#FF5500;
text-decoration:underline;
}。