一、选择题1.CSS是( C )的缩写。
A.C olorful S tyle S heetsB.C omputer S tyle S heetsC.C ascading S tyle S heetsD.C reative S tyle S heets2.引用外部样式表的格式是( B )。
A.<style src="mystyle.css">B.<link rel="stylesheet" type="text/css" href="mystyle.css"> C.<stylesheet>mystyle.css</stylesheet>3.引用外部样式表的元素应该放在( C )。
A.H TML文档的开始的位置B.H TML文档的结束的位置C.在head元素中D.在body元素中4.内部样式表的元素是( A )。
A.<style>B.<css>C.<script>5.元素中定义样式表的属性名是( A )。
A.s tyleB.c lassC.s tylesD.f ont6.下列( C )是定义样式表的正确格式。
A.{body:color=black(body}B.b ody:color=blackC.b ody {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. onFocusB. onMouseUpC. onMousrOverD. onMousMOve48.下列属性哪一个能够实现层的隐藏?( C )A. display:falseB. display:hiddenC. display:noneD. display:" "49.下列选项中,不属于文本属性的是( D )。
A. font-sizeB. font-styleC. text-alignD. font-color50.页面上有一个按钮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,底部和右侧边框颜色特别设为#6662、解释以下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,背景颜色为#ADD8E63、解释以下CSS样式的含义。
input{color:#00008B;}input.btn{background-color:#ADD8E6;padding:1px 2px 1px 2px;}设置input标签中字体颜色为#00008B;input标签中id属性为btn的按钮背景颜色设为#ADD8E6,内上、右、下、左边距分别设为1px、2px、1px、2px4、解释以下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,外边距为05、画出一个1-((1-2)+1)-1的布局结构示意图。