《CSS样式》习题答案

1一、选择题1．CSS是（C）的缩写。A．ColorfulStyleSheetsB．ComputerStyleSheetsC．CascadingStyleSheetsD．CreativeStyleSheets2．引用外部样式表的格式是（B）。A．stylesrc=mystyle.cssB．linkrel=stylesheettype=text/csshref=mystyle.cssC．stylesheetmystyle.css/stylesheet3．引用外部样式表的元素应该放在（C）。A．HTML文档的开始的位置B．HTML文档的结束的位置C．在head元素中D．在body元素中4．内部样式表的元素是（A）。A．styleB．cssC．script5．元素中定义样式表的属性名是（A）。A．styleB．classC．stylesD．font6．下列（C）是定义样式表的正确格式。A．{body:color=black(body}B．body:color=blackC．body{color:black}D．{body;color:black}7．下列（A）是定义样式表中的注释语句。A．/*注释语句*/B．//注释语句C．//注释语句//D．‘注释语句28．如果要在不同的网页中应用相同的样式表定义，应该（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-color350.页面上有一个按钮btn，同时定义好了一个类样式（按钮图片样式表btnPic），那么使用（B）就可以实现背景图片的改变。A.onMouseOver=className=btnPicB.onMouseOver=this.className=btnPicC.onMouseOver=this.style.className=btnPicD.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代码直接写在其中。例如：pstyle=”color:#ff0000;font-size:20px正文内容/p5、举例说明什么是内嵌式CSS样式。内嵌样式表就是将CSS写在head与/head之间，并且用style和/style标记进行声明。例如：headstyletype=”text/css”p{color:#0000ff}/style/head46、举例说明什么是链接式CSS样式。链接式CSS样式表是通过使用html链接文件标签link将外部CSS应用到本页面的样式使用方法。例如：linkhref=”myCSS.css”type=”text/css”rel=”stylesheet”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、举例说明什么是块级元素和行内元素？块级元素总是占据一个矩型区域，并且同级兄弟块依次竖直排列，左右撑满。例如：ul行内元素不占有独立的区域，并且同级元素之间横向排列，到最右端自动这行。例如：a513、解释一下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中，个列可以任意顺序排列，最终效果都正确显示。三、案例分析题61、解释以下CSS样式的含义。table{border:1px#333solid;font:12pxarial;width:500px}td,th{padding:5px;border:2pxsolid#EEE;border-bottom-color:#666;border-right-color:#666;}将表格边框宽度设为1px，颜色设为#333，边框为实线；表格中的字体大小设为12px,字体类型为arial；表格宽度为500px。设置单元格和表头部分的样式：内边距为5px，边框宽度2px，实线，颜色为#EEE，底部和右侧边框颜色特别设为#6662、解释以下CSS样式的含义。form{border:1pxdotted#AAAAAA;padding:3px6px3px6px;margin:0px;font:14pxArial;}select{width:80px;background-color:#ADD8E6;}设置表单边框宽度为1px，点划线，颜色为#AAAAAA，内上、右、下、左边距分别为：3px6px3px6px，外边距为0px，字体为14px大小的Arial字体。设置选择框宽度为80px，背景颜色为#ADD8E63、解释以下CSS样式的含义。input{7color:#00008B;}input.btn{background-color:#ADD8E6;padding:1px2px1px2px;}设置input标签中字体颜色为#00008B；input标签中id属性为btn的按钮背景颜色设为#ADD8E6，内上、右、下、左边距分别设为1px、2px、1px、2px4、解释以下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，外边距为05、画出一个1-（（1-2）+1）-1的布局结构示意图。6、画出一个1-（（1+（3-1-2））-1的布局结构示意图。87、解释以下CSS样式的含义。#header,#pagefooter,#container{margin:0auto;width:85%;}#content{position:absolute;width:300px;}设置id属性为header、pagefooter、container的div层上下外边框为0，左右外边框为auto，宽度为相对于父元素宽度的85%设置id属性为content的div层为绝对定位，宽度为固定宽度300px8、解释以下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;}9.picButton{background-image:url(img/login_submit.gif);color:#FFFFFF;