CSS复习题目.docx
- 文档编号:12278355
- 上传时间:2023-06-05
- 格式:DOCX
- 页数:16
- 大小:30.92KB
CSS复习题目.docx
《CSS复习题目.docx》由会员分享,可在线阅读,更多相关《CSS复习题目.docx(16页珍藏版)》请在冰点文库上搜索。
CSS复习题目
一、选择题
1.CSS是()的缩写。
A.ColorfulStyleSheets
B.ComputerStyleSheets
C.CascadingStyleSheets
D.CreativeStyleSheets
2.引用外部样式表的格式是()。
A.
B.
C.
3.引用外部样式表的元素应该放在()。
A.HTML文档的开始的位置
B.HTML文档的结束的位置
C.在head元素中
D.在body元素中
4.内部样式表的元素是()。
A.
B.
C.
5.元素中定义样式表的属性名是()。
A.style
B.class
C.styles
D.font
6.下列()是定义样式表的正确格式。
A.{body:
color=black(body}
B.body:
color=black
C.body{color:
black}
D.{body;color:
black}
7.下列()是定义样式表中的注释语句。
A./*注释语句*/
B.//注释语句
C.//注释语句//
D.‘注释语句
8.如果要在不同的网页中应用相同的样式表定义,应该()。
A.直接在HTML的元素中定义样式表
B.在HTML的
标记中定义样式表C.通过一个外部样式表文件定义样式表
D.以上都可以
9.样式表定义#title{color:
red}表示()。
A.网页中的标题是红色的
B.网页中某一个id为title的元素中的内容是红色的
C.网页中元素名为title的内容是红色的
D.以上任意一个都可以
10.样式表定义.outer{background-color:
yellow}表示()。
A.网页中某一个id为outer的元素的背景色是红色的
B.网页中含有class=”outer”元素的背景色是红色的
C.网页中元素名为outer元素的背景色是红色的
D.以上任意一个都可以
11.下列()表示p元素中的字体是粗体。
A.p{text-size:
bold}
B.p{font-weight:
bold}
C. bold"> D. bold"> 12.下列()表示a元素中的内容没有下划线。 A.a{text-decoration: nounderline} B.a{underline: none} C.a{text-decoration: none} D.a{decoration: nounderline} 13.下列()表示上边框线宽10px,下边框线宽5px,左边框线宽20px,右边框线宽1px,。 A.border-width: 10px1px5px20px B.border-width: 10px5px20px1px C.border-width: 5px20px10px1px D.border-width: 10px20px5px1px 14.下列()表示左边距。 A.margin-left B.margin C.indent D.text-indent 15.设置外边距()是负数。 A.可以 B.不可以 16.下列()表示列表项符号是小方块。 A.list-style-type: square B.type: square C.list-type: square D.type: 2 17.“样式表定义中的display和visibility效果是一样的,都是用于网页指定对象的隐藏和显示”的说法是()。 A.正确的 B.不正确的 18.如果要将网页中的两个div对象制作为重叠效果,()。 A.是不可能的 B.利用表格标记 C.利用样式表定义中的绝对位置与相对位置属性 D.利用样式表定义中的z-index属性 19.CSS是利用什么HTML标记构建网页布局? ( ) A. B. C. D. 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-sizeB.text-transform C.text-alignD.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.怎样给所有的 (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. bold"> B. bold"> C.p{text-size: bold} D.p{font-weight: bold} 31.如何去掉文本超级链接的下划线? (D) A.a{text-decoration: nounderline} B.a{underline: none} C.a{decoration: nounderline} 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: 10px20px30px40px B.padding: 10px1px C.padding: 5px20px10px 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选择器 二、简答题 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代码直接写在其中。 例如: #ff0000;font-size: 20px>正文内容 5、举例说明什么是内嵌式CSS样式。 内嵌样式表就是将CSS写在 例如: p{color: #0000ff} 6、举例说明什么是链接式CSS样式。 链接式CSS样式表是通过使用html链接文件标签link将外部CSS应用到本页面的样式使用方法。 例如: 7、举例说明什么是导入式CSS样式。 采用import方式导入的样式表,在html文件初始化时,会被导入到html文件内,作为文件的一部分,类似内嵌式的效果。 例如: @importurl(sheet.css); 8、什么是交集选择器,并举例说明。 交集选择器是由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。 其中第1个必须是标记选择器,第2个必须是类别选择器或者ID选择器。 例如: p.special{color: red} 9、什么是并集选择器,并举例说明。 并集选择器或者称为“集体声明”,它的结果是同时选中各个基本选择器所选择的范围。 例如: h1,h2,p{color: purple;font-size: 15px} 10、什么是后代选择器,并举例说明。 后代选择器的写法就是把外层的选择器名字写在前面,内层的选择器名字写在后面,之间用空格分隔。 例如: pspan{color: red} 11、在CSS中一个独立的盒子模型有哪几部分组成? content(内容)、border(边框)、padding(内边距)和margin(外边距) 12、举例说明什么是块级元素和行内元素? 块级元素总是占据一个矩型区域,并且同级兄弟块依次竖直排列,左右撑满。 例如: 行内元素不占有独立的区域,并且同级元素之间横向排列,到最右端自动这行。 例如: 13、解释一下div标签的作用 14、解释一下span标签的作用 标记和 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#333solid; font: 12pxarial; width: 500px } td,th{ padding: 5px; border: 1pxsolid#EEE; border-bottom-color: #666; border-right-color: #666; } 将表格边框宽度设为1px,颜色设为#333,边框为实线;表格中的字体大小设为12px,字体类型为arial;表格宽度为500px。 设置单元格和表头部分的样式: 内边距为5px,边框宽度2px,实线,颜色为#EEE,底部和右侧边框颜色特别设为#666 2、解释以下CSS样式的含义。 form{ border: 1pxdotted#AAAAAA; padding: 3px6px3px6px; margin: 0px; font: 14pxArial; } select{ width: 80px; background-color: #ADD8E6; } 设置表单边框宽度为1px,点划线,颜色为#AAAAAA,内上、右、下、左边距分别为: 3px6px3px6px,外边距为0px,字体为14px大小的Arial字体。 设置选择框宽度为80px,背景颜色为#ADD8E6 3、解释以下CSS样式的含义。 input{ color: #00008B; } input.btn{ background-color: #ADD8E6; padding: 1px2px1px2px; } 设置input标签中字体颜色为#00008B; input标签中id属性为btn的按钮背景颜色设为#ADD8E6,内上、右、下、左边距分别设为1px、2px、1px、2px 4、解释以下CSS样式的含义。 .rounded{ background: url(images-notebook/left-top.gif)topleftno-repeat; } .roundedh2{ background: url(images-notebook/right-top.gif)toprightno-repeat; padding: 20px20px10px; margin: 0; } 定义类选择器.rounded: 背景图像为left-top.gif,从左上角开始,不平铺 定义后代选择器.roundedh2: 背景图像为right-top.gif,从右上角开始,不平铺;内上、左右、下边距分别是20px20px10px,外边距为0 5、画出一个1-((1-2)+1)-1的布局结构示意图。 6、画出一个1-((1+(3-1-2))-1的布局结构示意图。 7、解释以下CSS样式的含义。 #header,#pagefooter,#container{ margin: 0auto; 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-DECORATION: none} A: active{COLOR: #ff0000;TEXT-DECORATION: underline} A: hover{COLOR: #3333cc;TEXT-DECORATION: 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)使用 #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; } 如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。标签添加背景颜色?
标签样式,设置字体颜色: