CSS复习题目

一、选择题
1． CSS 是( )的缩写。

A． C o lorful St y le Sheet s
B． Computer Styl e S h e e ts
C． C asca d i n g Style Sheets
D． Crea t i v e Styl e Sheet s
2．引用外部样式表的格式是( )。

A．〈s tyl e src="m y st y l e。

cs s ">
B．〈li nk rel ＝"s ty lesh e et” t y p e ＝"text/c ss ”
hre f =”m y st y le。

c ss">
C．〈sty l es h e e t>m y styl e . c ss＜/stylesheet>
3．引用外部样式表的元素应该放在 ( )。

A． HTML文档的开始的位置
B． HTML文档的结束的位置
C．在 head元素中
D．在 body 元素中
4．内部样式表的元素是( )。

A．〈styl e>
B． <css〉
C． < s cript〉
5．元素中定义样式表的属性名是( )．A． sty l e
B． class
C． s t yles
D．font
6．下列)ﻩ)是定义样式表的正确格式。

A． {b o d y： colo r =b l a c k (b od y }
B． bo d y： colo r =black
C． body {col o r： black}
D． {body； colo r :black}
7．下列)ﻩ)是定义样式表中的注释语句。

A．／＊注释语句＊/
B．／/ 注释语句
C． // 注释语句 //
D．‘ 注释语句
8．如果要在不同的网页中应用相同的样式表定义 ,应该( ) 。

A．直接在HTML的元素中定义样式表
B．在HTML的<head〉标记中定义样式表
C．通过一个外部样式表文件定义样式表
D．以上都可以
9．样式表定义＃title {co lor:red} 表示
( ) 。

A．网页中的标题是红色的
B．网页中某一个 id 为t itle 的元素中的内容是红色的C．网页中元素名为 title 的内容是红色的
D．以上任意一个都可以
10．样式表定义 .ou t er {bac k g r oun d — c olor：yellow} 表示( )．
A．网页中某一个i d 为 outer 的元素的背景色是红色的
B．网页中含有 cl a s s="ou t er" 元素的背景色是红色的
C．网页中元素名为o uter 元素的背景色是红色的D．以上任意一个都可以
11．下列()表示 p 元素中的字体是粗体。

A． p { t ext—si z e:bold}
B． p {fon t —weigh t :bo l d}
C．＜p styl e ="text-si z e:bo l d">
D． < p styl e ="font- s ize： bold">
12．下列( )表示 a 元素中的内容没有下划线。

A． a {text— d ecorat i o n :no u nde rline} B． a {un d er l i ne： none}
C． a {te xt- de co rat i o n： none}
D． a {d e c o ra t ion:no u n derl i ne}
13．下列( )表示上边框线宽1 0px ,下边框线宽5px，左边框线宽 20px ,右边框线宽 1 p x，。

A． bord er—width:1 0 px 1 px 5p x 20px
B． bo r der—w i d t h： 10p x 5 p x 20p x 1 p x C． b or de r - wid t h： 5px 20px 1 0p x 1px
D． b or der—width:10 p x 20 px 5 p x 1 p x
14．下列( )表示左边距。

A． mar gin－lef t
B． ma rg in
C． inden t
D． text- i ndent
15．设置外边距( )是负数.
A．可以
B．不可以
16．下列( )表示列表项符号是小方块．
A． lis t —style—type: sq ua r e
B． typ e : square
C． li s t-type： squa re
D． ty p e : 2
17．“样式表定义中的 d i sp l ay 和 vi s ibi li ty 效果是一样的,都是用于网页指定对象的隐藏和显示”的说法是
( ) 。

A．正确的
B．不正确的
18．如果要将网页中的两个d i v对象制作为重叠效果，( ) .
A．是不可能的
B．利用表格标记＜t able〉
C．利用样式表定义中的绝对位置与相对位置属性D．利用样式表定义中的z - index属性
19 。

CSS 是利用什么 HTML 标记构建网页布局？( )
A 。

〈d i r〉
B. 〈d i v〉
C. 〈di s>
D 。

<di f 〉
20 。

在 CS S 语言中下列哪一项是” 左边框” 的语法?( C )
A. border-le f t -wi dth： <值〉
B 。

bord e r—to p —w idth : 〈值〉
C. bo r der-left： <值>
D . b order—top-width: 〈值〉
2 1。

在 CSS 语言中下列哪一项的适用对象是"所有对象"？( A )
A 。

背景附件
B。

文本排列
C 。

纵向排列
D 。

文本缩进
2 2 .下列选项中不属于 C SS 文本属性的是( D )
A． f o nt-size B． t e x t —tr a n sf or m
C． t e xt—a l ign D.l i n e - h e ight
2 3．在 CSS 中不属于添加在当前页面的形式是( D )
A. 内联式样式表C．层叠式样式表
B.嵌入式样式表
D．链接式样式表
2 4．在 CSS 语言中下列哪一项是”列表样式图象"的语法？( D )
A. w i dth: 〈值＞
B。

hei g h t：〈值〉
C. white-s p a c e：〈值〉
D． l i st－s tyle- i ma g e: <值>
2 5 。

下列哪一项是c ss 正确的语法构成？ ( C ) A． body： c o l o r＝b lack
B 。

{body；color:black}
C 。

body {col or: b l ack； }
D. .{body： color=black(body}
26。

下面哪个 CSS 属性是用来更改背景颜色的?( A )
A 。

b ac kground- co lo r：
B. bgcol o r:
C。

c o lor：
D。

t ext：
27．怎样给所有的<h 1＞标签添加背景颜色？ ( B )
A．。

h1 {b a ckground-co l or:#FFFFFF}
B 。

h 1 {backgro un d—color： #FFFFFF；}
C. h1。

all {ba c k g r o und—co l or:＃FFFFFF } D． #h1 {back grou nd— c olo r :＃FFFFFF}
2 8 。

下列哪个 css 属性可以更改样式表的字体颜色?( D )
A。

t e xt-co l or= B 。

f g color:
C 。

t ext— c olor:
D 。

color:
29。

下列哪个 css 属性可以更改字体大小?( B ) A. t ex t -si z e
B。

f ont-siz e
C。

t ext－ style
D。

font-s tyle
30 。

下列哪段代码能够定义所有 P 标签内文字加粗?( D )
A 。

〈p s t y l e=”t e xt—size:b o l d ">
B。

〈p s tyle=”font— size:bold">
C 。

p { t ext-siz e :bo l d}
D. p {font-weig ht： bo l d}
3 1。

如何去掉文本超级链接的下划线 ? ( D )
A. a { t e x t—dec or a tio n：no u nderl ine}
B 。

a {under l ine:none}
C。

a {decorat i on:n o u nder l ine}
D. a {tex t — d e cora ti on:none}
32。

如何设置英文首字母大写? ( B )
A。

t e xt-tra n sf o rm : u p per c ase
B。

tex t —tr a n s fo r m：ca p i tal iz e
C. 样式表做不到
D 。

te x t-decora t io n :none
33．下列哪个css 属性能够更改文本字体？( A．f：
B。

f o n t =
C 。

font-fam i ly：
D . t e xt—dec oration: n o n e
3 4 .下列哪个cs s属性能够设置文本加粗？(
A 。

f on t-weight:b o l d
B. style:bo l d
C. f o nt：b
D 。

f on t = C ) A )
35。

下列哪个css 属性能够设置盒模型的内补丁为10．20． 3 0。

40 (顺时针方向)? ( A )
A 。

padding: 10p x 20 px 30 px 40 px
B . p add i ng:10 p x 1px
C 。

pa d ding：5 px 2 0 px 10 p x
D. p add ing：10px
CSS 复习题目
36 下列哪个属性能够设置盒模型的左侧外补丁?( C )
A 。

margin:
B 。

indent：
C 。

m a rgin—lef t：
D 。

t ext—i n dent:
3 7 。

定义盒模型外补丁的时候是否可以使用负值? ( A )
A 。

是
B 。

否
38.如何能够定义列表的项目符号为实心矩形?( D ) A。

li s t—ty p e : squ a re
B. typ e : 2
C 。

typ e : s q u are
D 。

list—s tyle—type：square
39．在CS S语言中下列哪些选项是背景图像的属性 ( A BC D )
A 背景重复
B 背景附件
C 纵向排
列
CSS 复习题目D背景位置
40． C SS 中的选择器包括( BCD )
A.超文本标记选择器
B.类选择器C．标签选择器 D.ID 选择器
二、简答题
1、什么是标记选择器并举例说明。

CSS 标记选择器就是声明哪些标记采用哪种C SS 样式。

例如:h1{ c o lor：re d ; f on t—s iz e：25 p x; }
2 、什么是类别选择器并举例说明。

类别选择器的名字可以由用户自定义，用做html 页面某标签的class 属性值。

例如：。

red { col or :re d ; font—size:18 p x }
3、什么是I D 选择器并举例说明。

I D选择器是针对html 页面中某个具有此ID属性的标签设置的CSS 样式。

例如：＃bo l d{ font－we ig ht : b old; }
4、举例说明什么是行内式CS S样式.
行内式是直接对ht ml的标记使用st y le 属性,然后将CSS 代码直接写在其中。

例如:〈p style= ”col or：＃f f 00 0 0；font— s i z e:20px〉正文内容〈/p>
5、举例说明什么是内嵌式C SS 样式.
内嵌样式表就是将C S S写在〈head＞与〈/h e ad>之间,并且用〈sty l e〉和＜／s tyl e〉标记进行声明。

例如:<h e ad> 〈style typ e="text/c s s ＂〉
p{ co l or:#000 0f f }
〈/s t yle> 〈/he ad〉
6、举例说明什么是链接式CSS 样式。

链接式CSS 样式表是通过使用h tm l 链接文件标签l in k 将外部C SS 应用到本页面的样式使用方法．
例如: 〈l i n k h r ef＝"m y C S S .css” type=” t e xt/ c s s ”r e l="s t y le sh e et”>
7、举例说明什么是导入式C S S 样式。

采用im p o rt方式导入的样式表,在html 文件初始化时，会被导入到html 文件内,作为文件的一部分，类似内嵌式的效果。

例如:＠import url ( s h eet 。

css)；
8、什么是交集选择器,并举例说明.
交集选择器是由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。

其中第1个必须是标记选择器，第2 个必须是类别选择器或者ID 选择器。

例如：p．spe cia l { co l or: re d }
9、什么是并集选择器,并举例说明。

并集选择器或者称为“集体声明”，它的结果是同时选中各个基本选择器所选择的范围.
例如:h 1 ，h 2 ,p{ colo r :pu r p le; f o n t -si z e：15 p x }
10 、什么是后代选择器，并举例说明。

后代选择器的写法就是把外层的选择器名字写在前面, 内层的选择器名字写在后面，之间用空格分隔。

例如：p sp a n{ color：r ed }
11、在CS S中一个独立的盒子模型有哪几部分组成？
co n t e n t (内容) 、 b o r d er(边框) 、padding(内边距) 和margin (外边距)
1 2、举例说明什么是块级元素和行内元素？
块级元素总是占据一个矩型区域，并且同级兄弟块依次竖直排列，左右撑满。

例如：<u l >
行内元素不占有独立的区域，并且同级元素之间横向排列, 到最右端自动这行。

例如：<a〉
1 3、解释一下div 标签的作用
<di v > 是一个区块容器标记, 即〈 d i v>与〈/div〉之间相当于一个容器，可以容纳段落、标题、表格、图片等各种h t ml 元素。

1 4、解释一下span 标签的作用
〈span〉标记和<div＞一样,作为容器可以容纳各种h tml 元素，但它是一个行内元素，在它的前后不会换行．
1 5、解释盒子模型的fl oa t属性。

f l oat 属性默认为 none，也就是标准流通常的情况。

如果将 f l oat 属性的值设置为 left 或 right，元素会向其父元素的左侧或右侧靠近, 同时默认情况下,盒子的宽度不再伸展，而是收缩,根据盒子里面的内容的宽度来确定。

16、解释盒子模型的 display 属性。

di s p l ay 属性用于确定盒子的类型。

display 属性设为 inli ne，即为“行内"；设为 b l ock，即为“块级” ;设为 n o ne，即为“无” ,也就是隐藏盒子。

17、圆角框主要有哪几种制作方法 ?
两背景图像法、四图像不固定宽度圆角框、五图像二维滑动门圆角框.
18、使用 CSS 主要有哪几种布局方式?
两列布局、三列布局、多列布局。

19 、CSS 布局方法与表格布局方法相比，有哪些优势？
(1 )页面载入更快;(2)降低网站流量费用； (3)易于修改;
(4)视觉一致(5)更易于被搜索引擎找到。

20、使用 CSS 布局的网页应实现哪些要求?
(1)宽度使用多列布局 ,并保证页头和页脚正确显示；
(2)可以指定列宽度固定 ,其余列宽度自适应；
(3) 在 h tml 中,个列可以任意顺序排列,最终效果都正确显示。

三、案例分析题
1、解释以下 CSS 样式的含义。

table{
bo rde r： 1px #3 33 so l id;
ﻩf o n t： 12px a ria l ;
width： 500p x
}
td，th{
paddin g： 5px；
ﻩb ord e r : 2px sol i d ＃EEE；
ﻩborder—bottom— co l o r： #666;
border—right—colo r： #6 6 6；
}
将表格边框宽度设为 1px ,颜色设为＃3 3 3，边框为实线; 表格中的字体大小设为 1 2 px，字体类型为 arial;表格宽度为 50 0 px.
设置单元格和表头部分的样式:内边距为 5px，边框宽度 2px, 实线,颜色为＃EEE,底部和右侧边框颜色特别设为＃ 666
2、解释以下 C SS样式的含义。

form{
border: 1 p x d o tted ＃AAAAAA；
p addi ng： 3px 6px 3 p x 6 p x；
ma r gin:0px;
font:14px Ari al；
}
se l e ct{
w idth： 8 0 p x;
back gr ound -col or： #AD D8E6；
}
设置表单边框宽度为 1px，点划线,颜色为#AAAAAA，内上、右、下、左边距分别为:3p x 6px 3 p x 6px,外边距为 0 p x, 字体为 14px 大小的 Aria l 字体。

设置选择框宽度为 80px,背景颜色为＃ ADD8E 6
3、解释以下 CSS 样式的含义。

in pu t {
c o lor： #00008B；
}
inpu t。

btn{
b a
c kgroun
d - c o l or:＃ADD8E6;
padding:1p x 2px 1px 2px;
}
设置 input 标签中字体颜色为#00008B；
in p u t标签中 id 属性为b tn的按钮背景颜色设为＃ ADD8 E6 , 内上、右、下、左边距分别设为 1p x、 2 p x 、 1px 、 2 px
4、解释以下 CSS 样式的含义。

. ro und ed {
b a
c k gr o und： u r l (imag e s- n otebo o k /l e ft- t op.g i f) to p le ft no－repe at；
}
.roun d ed h2 {
b a ck g r ou n d： u r l(images—n o tebo o k/ r i ght—top. gif) t o p r igh t n o — r e p eat;
paddin g : 20 px 20px 10p x ;
ma r gin:0;
}
定义类选择器。

r ounded：背景图像为 left —top.gif,从
左上角开始，不平铺
定义后代选择器.r o u n ded h 2：背景图像为 right-top.gi
f ,从右上角开始，不平铺;内上、左右、下边距分别是 20px
20 p x 10px，外边距为 0
5、画出一个 1－((1-2)+1)— 1 的布局结构示意图。

6、画出一个1 - ((1+ ( 3 — 1－2)) — 1 的布局结构示意图。

7、解释以下 CSS 样式的含义。

#header， #pag ef ooter，＃c o n tainer {
margi n :0 a uto;
wi dt h:85%;
}
# c on t ent{
pos i ti o n： ab sol u te;
ﻩwidth: 3 0 0 px；
{ﻩ
设置 i d 属性为 header 、pag e f o o t er 、cont a in e r 的 div层上下外边框为 0,左右外边框为auto，宽度为相对于父元素宽度的 85%
设置i d属性为c o n te n t 的 div 层为绝对定位，宽度为固定宽度 30 0 px
8、解释以下 CSS 样式的含义。

A:li nk { COLO R：＃ 3 3 33cc； T E X T-D E C O RATION： n o ne }
A:v i s i te d { COLOR： # 9 90099; TEXT-DECORAT I ON : none }
A：ac t i v e { COLOR: ＃ f f 0 000; T EXT—DEC O RAT I ON： u nderli n e }
A: hove r {ﻩCOLOR: #3 33 3 c c； TEXT-DECORAT ION : u n derline }
设置超链接样式:
未操作时:颜色为#3333cc,无下划线；
单击过后：颜色为＃990099,无下划线；
单击时:颜色为＃ ff000 0 ,有下划线;
悬停时:颜色为# 3 33 3 cc，有下划线；
9、写出下列要求的 CSS样式表
(1)设置页面背景图像为 l o g in_back 。

g if，并且背景图像垂直平铺。

(2)使用类选择器,设置按钮的样式，按钮背景图像: l ogin_ s ubmit. g i f；字体颜色:#FF F FFFF;字体大小: 1 4px；字体粗细： bold；按钮的边界、边框和填充均为 0px.
b ody {
b a ckgrou n d— i mage: u r l (img/login_back 。

gif);
back gro und— r e pe at：re peat— y ; }。

picButton{
back g round-image: url(img/ l ogin_submit.gif);
c olor:#FFFFFF;
fo n t—siz e : 14px；ﻩ
f ont— w e i
g
h t： bold；
marg i n: 0 p x;
b order：0 p x ;
p a dd i n g: 0px； }
10、写出下列要求的 CSS 样式表
( 1 ) 使用<td〉标签样式，设置字体颜色 :#2A1FFF；字体大小：14 px ．内容与边框之间的距离： 5px。

(2)使用超链接伪类：不带下划线;颜色:＃3 33333；鼠标悬停在超链接上方时 ,显示下划线;颜色：＃FF55 00。

td {
c olor: #2A 1FFF；
ﻩfo n t－ s i z e : 14p x；
padding： 5px;
}
A {
ﻩcol o r：＃333 3 3 3；
te x t—de c ora t i o n:none；
}
A：h o ver
}ﻩ
ﻩcolor:#FF5500;
te xt -de c or a tion: u nd e r l ine;
}。