CSS基础试题

最新推荐文章于 2024-04-14 16:19:15 发布

张润东

最新推荐文章于 2024-04-14 16:19:15 发布

阅读量4.9w

点赞数 23

分类专栏：题库 Web

本文链接：https://blog.youkuaiyun.com/mzd8341/article/details/76405464

版权

Web 同时被 2 个专栏收录

32 篇文章

订阅专栏

题库

25 篇文章

订阅专栏

一、单选题

1.CSS是利用（ B ）XHTML标签构建网页布局。

A. <dir> B.<div> C.<dis> D.<dif>

2.在CSS语言中下列哪一项是“左边框”的语法（ C ）

A.border-left-width:<值> B.border-top-width：<值>

C. border-left:<值> D. border-top-width:<值>

3.在下列CSS语言中（ A ）适用对象是“所有对象”。

A.背景附件 B.文本排列 C.纵向排列 D.文本缩进

4.下列（ D ）不属于CSS文本属性。

A.font-size B.text-transform C.text-align D.line-height
5.下列哪一项是CSS正确的语法构成（ C ）

A.body:color=black B.{body;color:black} C.body{color:black} D.{body:color=black}

6.下面哪个CSS属性是用来改变背景颜色的（ A ）

A.background-color: B.bgcolor: C.color: D.text:

7.怎样给所有的<h1>标签添加背景颜色（ B ）

A. .h1 { background-color:#ffffff }

B. h1 { background-color; }

C. h1.all { background-color:#ffffff }

D. #h1 { background-color:#ffffff }

8.下列哪个CSS属性可以更改样式表的字体颜色（ D ）

A.text-color= B.fgcolor: C.text-color: D.color:

9.下列哪个CSS属性可以更改字体大小（ B ）

A.text-size B.font-size C.text-style D.font-style

10.下列哪段代码能够定义所有P标签内文字加粗（ D ）

A.<p style=”text-size:blod”> B.< p style=”font-size:blod”>

C.p{ text-size:bold; } D.p{ font-weight:bold; }

11.下面哪个方法可以去掉文本超链接的下划线（ D ）

A. a{ text-decoration:no underline; } B. a{ underline:none; }

C. a{ decoration:no underline; } D. a{ text-decoration:none; }

12.下列哪个CSS属性能够更改文本字体（ C ）

A.f; B.font= C.font-family: D.text-decoration:none;

13.下列哪个CSS属性能够设置文本加粗（ A ）

A.font-weight:bold B.style:bold C.font:b D.font=

14.下列哪个CSS属性能够设置盒子模型的填充为10、20、30、40、（顺时针方向）( A )

A.padding:10px 20px 30px 40px B. padding:40px 30px 20px 10px

C.padding:10px 40px 30px 20px D. padding:20px 10px 40px 30px

15.下列哪个属性能够设置盒子模型的左侧边界（ C ）

A.margin: B.indent: C.margin-left: D.text-indent:

16.（ D ）能够定义列表的项目符号为实心矩形。

A.list-type:square B.type:2 C.type:square D.list-style-type:square

17.关于WEB标准以下说法错误的是（ B）

A.Web标准是一个复杂的概念集合，它由一系列标准组成

B.这些标准全部都由W3C起草与发布

C.Web标准可以分为3个方面

D.Web标准里的表现标准语言主要包括CSS

18.以下是<!doctype>元素作用的是（ A ）

A.该元素用来定义文档类型 B.该元素用来声明命名空间

C.该元素用来向搜索引擎声明网站关键字 D.该元素用来向搜索引擎声明网站作者

19.关于float描述错误的是（ B）

A.float:left B.float:center C.float:right D.float:none

20.外部样式表文件不可以由以下哪个方法导入（ C ）

A. link B.import C. style D.附加样式表

21.标签<p>的对齐属性是（B）

A. style B.align C.angle D.padding

22.以下哪个选项是设置底边框的（ A ）

A.border-bottom B.border-top C.border-left D.border-right

23.以下关于CLASS和ID的说法错误的是（ D ）

A.class的定义方法是：.类名{样式}；

B.id的应用方法：<指定标签 id=”id名”>

C.class的应用方法：<指定标签 class=“类名”>

D.id和class只是在写法上有区别，在应用和意义上没有区别

24.以下哪个选项是对对象进行定位的（ C ）

A.padding B.margin C.position D.display

25.关于块状元素说法正确的是（ C ）

A.块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，常用的块状元素包括div \ h1-h6\ p\ ul

B.默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下块状元素会按顺序自上而下排列。

C.块状元素都不可以定义自己的宽度和高度

D.块状元素一般都作为其他元素的容器，它可以容纳其他内联元素和其他块状元素，我们可以把这种容器比喻为一个盒子。

26.关于DIV以下描述正确的是（ A ）

A.div是类似于一行一列表格的虚线框

B.div由行列形成的单元格构成，可执行合并拆分等操作

C.由div布局的页面结构域表现不能分离

D.div不要求我们严格CSS支持

27.关于CSS以下说法错误的是（ D ）

A.每个CSS样式都必须由两部分组成：选择器和声明

B.选择器表示要定义样式的对象，可以是元素本身，也可是一类元素或制定名称的元素

C.属性是指定选择器所具有的属性，它是CSS的核心，css共有150多个属性

D.定义属性值：属性值是指数值加单位，如20px

28.关于CSS定义的说法错误的是（ C ）

A.类样式的定义方法是点+样式名字

B.用户定义的类的定义方法是#+样式名字

C.声明定义时属性和属性之间用空格分隔

D. HTML标签. 样式名字：是指只有该指定的标签才能引用它。

29.关于样式表的优先级说法不正确的是（ D ）

A.直接定义在标记上的CSS样式级别最高

B.内部样式表次之

C.外部样式表级别最低

D.当样式中属性重复时，先设的属性起作用

30.使用link元素调用CSS的语法中，以下哪个属性是用来指定CSS文件的路径的（ C ）

A. url B.src C.href D.以上都不对

31.在CSS中，注释代码是（ B ）

A.<!--> B./**/ C.// D.||

32.在HTML文档中，引用外部样式表的正确位置是（ B ）

A.文档的末尾 B.<head> C.文档的顶部 D.<body>部分

33.下列哪种方式是用类选择器定义样式的（B）

A. p{color: red} B. . one{color: red} C. #two{color: red} D. p,h1{color: red}

34.阅读下面HTML代码，两个DIV之间的空白距离是（ C ）。

.header { margin-bottom: 10px; border:1px solid #f00; }

.container { margin-top: 15px; border:1px solid #f00; }

</style>

......

......

A．0px B．10px C．15px D．25px

35.下列样式定义字体为宋体、字体颜色为红色、斜体、大小20px、粗细800号，正确的定义是：（A）

A.p {font-family:宋体;font-size:20px;font-weight:800;color:red; font-style:italic; }

B.p {font-family:20px; font-size:宋体; font-weight:800; color: red; font-style:italic; }

C.p {font-family:20px; font-size:800; font-weight:宋体; color:red; font-style:italic; }

D.p{font-family:800; font-size:20px; font-weight:red; color:italic; font-style:宋体;}

36.下列样式定义字体间距为0.5倍间距、水平左对齐、垂直顶端对齐、有下划线正确的定义是：（A）

A.p{text-decoration:underline; letter-spacing: 0.5em; vertical-align: top; text-align: left;}

B.p{text-decoration:0.5em; letter-spacing: underline; vertical-align: top; text-align: left;}

C.p{text-decoration: left; letter-spacing: top; vertical-align: 0.5em; text-align: underline;}

D.p{text-decoration:underline; letter-spacing: 0.5em; vertical-align: left; text-align: top;}

37.根据以下的HTML代码：h1{ color:”limegreen”;font-family:”arial” }可以知道（ C ）

A.此段代码是一个类选择器

B.选择器的名称是color

C.{ }部门是对H1这个选择器的样式说明

D.limegreen和font-family都是值

38.创建一个样式表，可以设置当前页面中ID为compact元素的内容的字体为斜体。下列能实现该功能的代码是（ D）。

A.<style type="text/css">compact{font-style:italic;}</style>

B.<style type="text/css">@compact{font-style:italic;}</style>

C.<style type="text/css">.compact{text-style:italic;}</style>

D.<style type="text/css">#compact{font-style:italic;}</style>

39.在CSS中，为页面中的某个DIV标签设置样式div{width:200px;padding:0 20px; border:5px;}，则该标签的实际宽度为（ D ）

A.200px B.220px C.240px D.250px

40. 阅读下面HTML代码，段落标签<p>内文本最终显示的颜色是（）。

body { color:#333; }

#text{ color:#f00; }

.content { color:#00f; }

.gray { color:#666; }

</style>

......

<p id="text" class="content gray">我我本将心向明月，奈何明月照沟渠。</p>

......

A．#f00 B．#00f C．#666 D．#333

41. 阅读下面CSS代码，下面选项中与该代码段效果等同的是（ A ）。

.box { margin:10px 5px; margin-right:10px; margin-top:5px; }

A．.box { margin:5px 10px 10px 5px; }

B．.box { margin:5px 10px 0px 0px; }

C．.box { margin:5px 10px; }

D．.box { margin:10px 5px 10px 5px; }

42. 在HTML页面中，调用外部样式表的方法是（ B ）。

A．<style rel="stylesheet" type="text/css" href="外部样式表地址" />

B．<link rel="stylesheet" type="text/css" href="外部样式表地址" />

C．<style rel="stylesheet" type="text/css" link="外部样式表地址" />

D．<link rel="stylesheet" type="text/css" style="外部样式表地址" />

43. 阅读下面的HTML及CSS代码，图片距最外面的DIV外边缘的距离是（ D ）。

...

#outbox { border:10px solid #ff0000; width:400px; }

#inbox { border:20px solid #ff0000; margin:10px; padding:10px; }

</style>

...

</div>

...

A．10px B．30px C．40px D．50px

44.下面选项中是合法的类样式的是（ A ）。

A．.Word B．#Word C．.2A D．#A2

45. 关CSS样式表描述不正确的是（ C ）

A.CSS样式表规则由选择器和声明组成

B.选择器包括标签选择器、类别选择器和ID选择器

C.HTML中部分标签可以作为CSS标签选择器

D.用@import url（“样式表名”）完成外部样式表的导入

46. 如下所示的这段CSS样式代码，定义的样式效果是（ D ）。

a:active {color: #000000;}

A.默认链接是#000000颜色 B.访问过链接是#000000颜色

C.鼠标上滚链接是#000000颜色 D.活动链接是#000000颜色

47. 下列对盒子模型描述不正确的是（ B ）

A.一个盒子由边界、边框、填充和内容区域4个部分组成

B.盒子的填充、边框、边界和内容区域都分为上、下、右、左四个方向

C.CSS定义盒子的width和height时，实际上定义的是内容区域content的width和height。

D.盒子的宽度是内容宽度加上padding、border和margin。

48. 以下关于CSS+DIV布局中关于盒子模型说法错误的是（ B ）

A.一个盒子由4个独立的部分组成：Margin、Border、Padding、Border

B. 填充、边框和边界和内容区域都分为上、下、左、右四个方向，既可以分别定义，也可以统一定义。

C.盒子的实际宽度=左边界+左边框+左填充+内容宽度（width）+右填充+右边框+右边界

D.盒子的实际高度=上边界+上边框+上填充+内容高度（height）+下填充+下边框+下边界。

二、多选题

1.在CSS语言下列哪些选项是背景图像的属性（ ABCD）

A.背景重复 B.背景附件 C.纵向排列 D.背景位置

2.CSS中的选择器包括（ BCD ）

A.超文本标记选择器 B.类选择器 C.标签选择器 D.ID选择器

3.CSS文本属性中，文本对齐属性的取值有（ BCDE）

A. auto B.justify C.center D.right E.left

4.CSS中的BOX的padding属性包括的属性有（ BCDE ）

A.填充 B.上填充 C.底填充 D.左填充 E.右填充

5.CSS中，盒模型的属性包括（ BCD ）

A.font B.margin C.padding D.visible E.border

6.下面关于CSS的说法正确的有（ ABC ）

A.CSS可以控制网页背景图片

B.margin属性的属性值可以是百分比

C.整个BODY可以作为一个BOX

D.对于中文可以使用word-spacing属性对字间距进行调整

E.margin属性不能同时设置四个边的边距

7.关于CSS的说法正确的有（ ABC ）

A. CSS可以控制网页背景颜色

B. position可以实现盒子模型精确定位

C.字体大小的单位可以使cm

D.一个BOX只能通过float进行定位

E.Z-index的取值不能是负数

8.关于内容、结构和表现说法正确的是（ ABD ）

A.内容是页面传达信息的基础

B.表现使得内容的传达变得更加明晰和方便

C.结构就是对内容的交互及操作效果

D.内容就是网页实际要传达的信息，包括文本、图片、音乐、视频、数据、文档等。

9.关于CSS基本语法说法正确的是（ AC ）

A.属性必须要包含在{ }号之中

B.属性和属性值之间用等号链接

C.在有多个属性时，用“；”进行区分

D.如果一个属性有几个值，则每个属性值之间用分号分隔开

10.关于样式表的优先级说法正确的是（ ABC ）

A.直接定义在标记上的CSS样式级别最高

B.内部样式表次之

C.外部样式表级别最低

D.当样式中属性值重复时，先设的属性起作用

11.关于CSS样式表功能，以下说法正确的是（ ABC ）

A.灵活控制网页中文字大小、字体、颜色、间距风格及位置

B.可以精确的控制网页中各元素的位置

C.可以与脚本语言相结合

D.以上说法都不对

12.关于边框，以下写法正确的是（ ABCD ）

A.border-top-width B.border-style C.border-width D.border-color

13. 以下关于CLASS和ID的说法正确的是（ ABC ）

A.class的定义方法是：.类名{样式}；

B.id的应用方法：<指定标签 id=”id名”>

C.class的应用方法：<指定标签 class=“类名”>

D.id和class只是在写法上有区别，在应用和意义上没有区别

14.关于WEB标准以下说法正确的是（ ACD ）

A.Web标准是一个复杂的概念集合，它由一系列标准组成

B.这些标准全部都由W3C起草与发布

C.Web标准可以分为3个方面

D.Web标准里的表现标准语言主要包括CSS

15.以下哪个属性值属于Float这个属性（ ACD ）

A.left B.center C.right D.none

16.在html文件中应用abc.css文件中的样式的方法有（AB）

A.<link href="abc.css" type="text/css" rel="stylesheet">

B.<style type="text/css">@import url(abc.css);</style>

C.<style type="text/css">@import (abc.css);</style>

D.<style type="text/css">import url (abc.css);</style>

17.下面有关样式表的说法正确的是（ AD ）。

A.通过样式表，用户可以使用自己的设置来覆盖浏览器的常规设置

B.样式表不能重用

C.每个样式表只能链接到一个文档

D.样式表可以用来设置字体、颜色等

18.为了给页面所有<h1>标题创建样式规则，指定将所有的<h1>标题显示为蓝色，字体显示为Arial。下列操作正确的是（ AC ）。

A. <style type="text/css">

h1{color: "blue"} h1{font-family: "Arial"}

</style>

B. <style type="text/css">

h1{color: "blue"; fontFace: "Arial"}

</style>

C. <style type="text/css">

h1{color: "blue"; font-family: "Arial"}

</style>

D. <style type="text/css">

h1{color: "blue";} h1{fontFace: "Arial"}

</style>

19. 下面选项中（ AC ）可以设置网页中某个标签的左边界为5px。

A.margin:0 5px; B.margin:5px 0 0 0;

C.margin:0 0 0 5px; D.padding-left:5px;

20.下面关于外部样式表的说法错误的是（BC）。

A．文件扩展名为.css

B．外部样式表内容以<style>标签开始，</style>标签结束

C．CSS属性值不可以包含汉字

D．使用外部样式表可以使网站更加简洁，风格保持统一

三、判断题

1．在CSS中，border:1px 2px 3px 4px表示设置某个HTML元素的上边框为1px、右边框为2px、下边框为3px、左边框为4px。（错误）

2．在CSS中，padding和margin的值都可以为负数。（错误）

3．在CSS中，使用//或用来书写一行注释。（错误）

4．由于Table布局相比DIV布局缺点较多，因此在网页制作时应当完全放弃使用Table布局。（错误）

5．在W3C规范中，每一个标签都应当闭合，使用<br></br>可以实现和段落标签<p></p>同样的效果。（错误）

6.一个div可以插入多个背景图片（错误）

7.背景颜色的写法background:#ccc等同于background-color:#ccc(正确)

8.结构表现标准语言包括XHTML和XML以及HTML。（错误）

9.任何标签都可以通过加style属性来直接定义它的样式。（正确）

10.同padding属性与margin属性类似，border属性也有单侧属性，即也可以单独定义某一个方向上的属性。（正确）

11.margin不可以单独定义某一个方向的值。（错误）

12. Border是CSS的一个属性，用它可以给能确定范围的HTML标记，如td、div添加边框。只能定义边框的样式（style）、宽度(width)。（错误）

13.CSS选择器中用户定义的类和用户定义的ID在使用上只有定义方式不同。（错误）

14.对于自定义样式，其名称必须以点（.）开始（正确）

15. <div>标签简单而言是一个区块容器标签。（正确）

16. position允许用户精确定义元素框出现的相对位置。（正确）

四、简答题

1. 简述div排版与传统的table排版。

答：（1） table内的单元格会随着表格的大小自动调整。

（2）table排版的页面也难再升级，但div排版可以随意调整。

（3）利用table排版的页面在下载时必须等整个表格的内容都下载完毕之后才会一次性显示出来，而利用div块的CSS排版的页面在下载时可以分别下载，提高了页面的下载速度。

（4）div+CSS排版方式使得数据与CSS文件完全分离，美工在修改页面时，只需要修改CSS文件就可以了，大量减少了维护量。

2. 什么是CSS？

答： CSS（Cascading Style Sheet）即层叠样式表，它用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。它以HTML语言为基础，提供了丰富的格式化功能，字体、颜色、背景等，更好地进行页面美工设计。

3.CSS的基本语法结构及规范？

答：CSS语法结构：选择器{ 属性：“属性值”；属性：“属性值”；属性：“属性值”；……}

规范：（1）属性必须要包含在{ }号之内

（2）属性和属性值之间用“：”分隔

（3）当有多个属性时，用“；”进行区分

（4）在书写属性时属性之间使用空格、换行等，并不影响属性的显示。

（5）如果一个属性有几个值，则每个属性值之间用空格分隔开。

4.举例说明CSS的三种使用方法？

答（1）内部样式表

<head>

h1 {color: red}

h3 {color: blue}

</style>

</head>

（2）行内样式

<body>

</body>

（3）连接外部样式表

5. 简述CSS ID选择器。

答：ID选择器：可以为标有特定ID的HTML 元素指定特定的样式。设定在ID上的css格式为：

#id名{ 属性：“属性值”；属性：“属性值”；属性：“属性值”；……}

引用的方法：< HTML标签 ID＝"ID名">。

6. 简述CSS 类选择器。

答：类选择器：以点号开始，为标有class的HTML元素指定特定的样式。直接定义class

.类名{ 属性：“属性值”；属性：“属性值”；属性：“属性值”；……}

引用的方法： < HTML标签 CLASS="类名">

7. 简述CSS链接伪类。

答：链接伪类：a:link 设置链接本来的颜色

a:visited 设置链接访问过后的颜色

a:hover 设置链接在鼠标悬停时的颜色

a:active 设置链接被激活的颜色

8.简述选择器的优先权

答：（1）内联样式表的权值最高；（2） ID 选择器的权值为

（3）Class 类选择器的权值为（4）HTML 标签选择器的权值为

9. 简述CSS的特点。

答：（1）可以将格式和结构分离。

（2）可以以前所未有的能力控制页面布局。

（3）可以制作体积更小、下载更快的网页。

（4）可以将许多网页同时更新，比以前更快更容易。

（5）浏览器的界面更友好。

10. CSS的实现方式有几种？那种CSS实现方式优势更突出？相对其他实现方式而言其优点有哪些？

答：共有3种实现方式。CSS实现方式按优先级依次是内嵌样式、内部样式表、外部样式表。使用外部样式表时，相对其他2种实现方式而言其优点有：（1）样式代码可以复用。一个外部CSS文件，可以被多个网页共用（2）便于修改。（3）提高了网页显示的速度。

五、设计分析题

1.将以下CSS代码进行缩写，注意要符合缩写的规范。

a)代码一：

border-width:1px;

border-color:#000;

border-style:solid;

代码二：

margin-left:20px;

margin-right:20px;

margin-bottom:5px;

margin-top:20px;

代码三：

color:#336699;

color:#ffcc00;

2. CSS内部样式表要编写在页面之中，即将CSS写在（）之间，并且用（）标签进行声明。请完整的完成一段CSS内部样式表的编写。要求网页主体<body>：

（1）字体大小是12px

（2）字体样式正常

（3）字体带下划线

（4）字体颜色是#ff3300。

3. 分析下列代码并画出实现的效果图。

<html><head><title>无标题文档</title>

#left { background-color:#999; border:2px solid #333;

width:300px; height:300px; float:left; }

（1）解释上面代码含义：

#right1 { background-color:#999; border:2px solid #333;

width:300px; height:300px; margin-left:50px; float:left ; }

（2）解释上面代码含义：

#right2 { background-color:#999; border:2px solid #333;

width:300px; height:300px; position:absolute ; left:700px; }

</style>

（3）解释上面代码的含义：

</head>

<body>

（4）解释上面<body>标签里代码的含义：

</body></html>

4. 编写CSS+DIV代码完成三列固定宽度的网页结构布局，效果图及属性参数如下。

（1）效果图.

（2）左列背景色为#ffc33c，边框属性为2px、solid、#333；

（3）右列1背景色为#ff33cc，边框属性为2px、solid、#333；

（4）右列2背景色为#ff33cc，边框属性为2px、solid、#333；

（5）第二个盒子和第三个盒子的距离是50px；第三个盒子页面左边距是700px；

（4）三个盒子的宽度和高度都是300px。

5. 创建一个名为.char1的层叠样式，并将这个样式定义在新建的dformat.css的层叠样式表文件中。其参数设置字体为黑体，大小为24像素，样式为斜体，颜色为#FF3300，修饰为下划线。

6. 编写CSS+DIV代码完成下面网页结构布局，效果图及属性参数如下。

（1）效果图

（2）body的全部对象的对齐方式居中。

（3）盒子container的属性：width:800px；边框1px 实线颜色#000；填充10px。

（4）盒子banner的属性：text-align居中；下边界：5px；边框：1px 实线颜色#000；填充：10px；background-color：#ffcc33。

（5）盒子content的属性：text-align居中；width:570px；height：300px；边框1px 实线颜色#000；填充10px。

（6）盒子link的属性：text-align居中；边框1px 实线颜色#000。

（7）盒子footer的属性：text-align居中；边框1px 实线颜色#000；填充10px。

7. 编写CSS+DIV代码完成一列固定宽度的网页结构布局，其中盒子的background-color：#999；边框：1px 实线颜色是#333；宽度和高度都是300px。

8. 编写CSS+DIV代码完成一列自适应宽度的网页结构布局，其中盒子的background-color：#999；边框：1px 实线颜色是#333；宽度60%，高度都是300px。

9. 编写CSS+DIV代码完成一列固定宽度居中的网页结构布局，其中盒子的background-color：#999；边框：1px 实线颜色是#333；宽度和高度都是300px。

10. 编写CSS+DIV代码完成两列固定宽度的网页结构布局，效果图及属性参数如下。

（1）效果图

（2）两个盒子的background-color：#999；边框：1px 实线颜色是#333；宽度和高度都是300px。

11. <head><title>无标题文档</title>

p{ padding :20px 60px; border:thin solid #f90; }

</style>

</head>

<body><p>这是一个新样式 </p></body></html>

请解释上面的代码的含义。