div+css练习题一

div+csscss技巧2015年6月15日

一、选择题

1．CSS是（ C ）的缩写。

A． Colorful Style Sheets

B． Computer Style Sheets

C． Cascading Style Sheets

D． Creative Style Sheets

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．以上任意一个都可以

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中，个列可以任意顺序排列，最终效果都正确显示。

三、案例分析题

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

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-DECORATION: none }

A:active { COLOR: #ff0000; TEXT-DECORATION: underline }

A:hover { COLOR: #3333cc; TEXT-DECORATION: underline }

设置超链接样式：

未操作时：颜色为#3333cc，无下划线；

单击过后：颜色为#990099，无下划线；

单击时：颜色为# ff0000，有下划线；

悬停时：颜色为# 3333cc，有下划线；