CSS 在线期末考试题（含详细答案）

CSS在线期末考试题（含详细答案）考试说明：1.本试卷满分100分，考试时长60分钟；2.题型包含选择题、判断题、简答题、实操题，答题规范书写代码，大小写、符号严格区分；3.所有代码均遵循W3C标准，兼容主流浏览器。一、单项选择题（每题3分，共20题，合计60分）1.CSS的全称是（）A.ComputerStyleSheetsB.CascadingStyleSheetsC.CreativeStyleSheetsD.ColorfulStyleSheets2.以下哪个标签是用于引入外部CSS样式表的（）A.<style>B.<link>C.<script>D.<css>3.CSS样式中，设置文字颜色的属性是（）A.text-colorB.font-colorC.colorD.font-style4.以下选择器中，优先级最高的是（）A.类选择器B.标签选择器C.ID选择器D.通配符选择器5.设置字体加粗的正确属性值是（）A.font-weight:boldB.font-style:boldC.text-weight:boldD.font-size:bold6.CSS中设置元素背景颜色的属性是（）A.bg-colorB.background-colorC.color-backgroundD.back-color7.以下哪个属性可以让文本水平居中对齐（）A.text-align:centerB.align:centerC.text-centerD.font-align:center8.给盒子设置1像素黑色实线边框，正确的代码是（）A.border:1pxsolid#000;B.border:1pxdashed#000;C.border:1pxdotted#000;D.border:solid1pxblack;9.CSS中，margin的作用是（）A.设置盒子内边距B.设置盒子外边距C.设置盒子边框D.设置盒子宽高10.想要清除元素默认内外边距，常用的通配符样式是（）A.*{margin:0;padding:0;}B.all{margin:0;padding:0;}C.body{margin:0;padding:0;}D.html{margin:0;padding:0;}11.设置元素隐藏但保留占位空间的属性是（）A.display:none;B.visibility:hidden;C.opacity:0;D.overflow:hidden;12.CSS3中实现元素圆角的属性是（）A.border-radiusB.border-circleC.radiusD.corner-radius13.以下哪个属性可以改变鼠标悬浮样式（）A.cursorB.mouseC.hoverD.pointer14.浮动布局中，用来清除浮动的属性是（）A.float:clear;B.clear:both;C.overflow:clear;D.display:clear;15.不属于CSS引入方式的是（）A.行内样式B.内部样式C.外部样式D.全局样式16.设置文本下划线的属性是（）A.text-decoration:underline;B.text-indent:underline;C.font-decoration:underline;D.text-style:underline;17.盒子模型的标准组成部分不包括（）A.内容区（content）B.阴影（shadow）C.内边距（padding）D.边框（border）18.CSS中，:hover伪类的作用是（）A.元素点击后样式B.元素鼠标悬浮样式C.元素获取焦点样式D.元素默认样式19.能够让块级元素水平居中的正确代码是（）A.margin:0auto;B.text-align:center;C.float:center;D.position:center;20.CSS3中实现盒子阴影的属性是（）A.box-shadowB.text-shadowC.shadow-boxD.box-style二、判断题（每题2分，共10题，合计20分）1.行内元素可以直接设置宽高属性。（）2.ID选择器在页面中只能使用一次，类选择器可以重复使用。（）3.padding属性会增大盒子的实际占用尺寸。（）4.display:none隐藏元素后，元素仍然占用页面空间。（）5.CSS样式优先级：行内样式>ID选择器>类选择器>标签选择器。（）6.text-indent可以用来设置文本首行缩进。（）7.浮动元素会脱离标准文档流。（）8.border-radius:50%可以将正方形元素变成圆形。（）9.通配符选择器的优先级最高。（）10.内部样式表的权重高于外部样式表。（）三、简答题（每题5分，共2题，合计10分）1.简述CSS三种引入方式的优缺点及使用场景。2.简述标准盒子模型和IE怪异盒子模型的区别。四、实操题（10分）根据需求编写完整CSS样式：创建一个盒子，要求如下：1.盒子宽度300px，高度200px；2.背景颜色为浅蓝色，黑色1px实线边框；3.圆角10px，盒子轻微阴影；4.盒子内外居中显示，内部文字水平居中、垂直居中、字号16px、加粗、黑色；5.鼠标悬浮时盒子背景色变为深蓝色，文字变为白色，过渡效果0.3秒。参考答案及详细解析一、单项选择题答案及解析1.B解析：CSS正式名称为层叠样式表（CascadingStyleSheets），用于控制网页样式布局。2.B解析：<link>标签用于引入外部独立CSS文件；<style>用于写内部样式，<script>用于引入JS文件。3.C解析：CSS统一使用color属性设置文本字体颜色，无text-color、font-color属性。4.C解析：选择器优先级排序：ID选择器>类选择器>标签选择器>通配符选择器。5.A解析：font-weight控制字体粗细，bold为加粗；font-style用于设置斜体。6.B解析：background-color是设置元素背景颜色的标准属性，无其他简写别名。7.A解析：text-align:center是文本水平居中的标准属性值，适用于块级元素内文本、行内元素。8.A解析：border属性顺序可简写为宽度、样式、颜色；solid为实线，dashed为虚线，dotted为点状线。9.B解析：margin是元素外边距（元素与其他元素的距离），padding是内边距（内容与边框的距离）。10.A解析：通配符*可以匹配页面所有元素，统一清除所有标签默认的内外边距，是前端常用初始化样式。11.B解析：visibility:hidden隐藏元素，保留页面占位；display:none彻底隐藏，不占位置；opacity:0透明但可点击。12.A解析：border-radius是CSS3专属圆角属性，支持单个角和整体圆角设置。13.A解析：cursor属性用于设置鼠标悬浮在元素上的指针样式，如pointer、default、move等。14.B解析：clear:both是清除左右两侧浮动的标准代码，解决浮动布局高度塌陷问题。15.D解析：CSS三种引入方式：行内样式、内部样式、外部样式，无全局样式说法。16.A解析：text-decoration用于设置文本装饰线，underline为下划线，none为取消下划线。17.B解析：标准盒子模型由content、padding、border、margin四部分组成，阴影为额外装饰效果。18.B解析：:hover是鼠标悬浮伪类，:active是点击样式，:focus是获取焦点样式。19.A解析：margin:0auto用于块级元素自身水平居中；text-align:center用于居中内部文本和行内元素。20.A解析：box-shadow为盒子阴影，text-shadow为文本阴影。二、判断题答案及解析1.错误解析：行内元素默认无法设置宽高，需转换为块级或行内块元素（display:block/inline-block）。2.正确解析：ID具有唯一性，类选择器可多次复用，是前端规范写法。3.正确解析：标准盒子模型中，padding和border都会增加盒子整体占用尺寸。4.错误解析：display:none隐藏元素，不占用页面空间；visibility:hidden保留空间。5.正确解析：基础优先级顺序：行内样式（最高）>ID>类>标签>通配符。6.正确解析：text-indent常用于段落首行缩进，常用值为2em（两个汉字宽度）。7.正确解析：元素设置float后脱离标准文档流，会导致父级元素高度塌陷，需清除浮动。8.正确解析：正方形元素设置border-radius:50%可实现正圆形，长方形则为椭圆形。9.错误解析：通配符选择器优先级最低，仅高于浏览器默认样式。10.正确解析：同等条件下，内部样式权重高于外部样式，就近原则生效。三、简答题参考答案1.CSS三种引入方式优缺点及使用场景（1）行内样式：直接在标签style属性中写样式。优点是生效快、优先级最高；缺点是代码冗余、不利于维护、结构样式不分离。适用场景：临时修改单个元素样式、快速测试效果。（2）内部样式：在HTML页面<style>标签内编写CSS。优点是无需引入外部文件、加载速度快、样式集中管理；缺点是仅作用于当前页面，无法多页面复用。适用场景：单页面专属样式、小型简单网页。（3）外部样式：通过<link>引入独立.css文件。优点是结构样式完全分离、代码可复用、便于统一维护、减小页面体积；缺点是需要额外请求文件，有轻微加载延迟。适用场景：多页面网站、大型项目、正式项目开发。2.标准盒子模型与IE怪异盒子模型的区别（1）标准盒子模型（W3C盒子）：元素设置的width、height仅代表内容区尺寸，盒子整体宽度=width+左右padding+左右border+左右margin，padding和border会撑开盒子，改变整体尺寸。（2）IE怪异盒子模型：元素设置的width、height包含内容区、padding、border，盒子整体宽度=设置的width+左右margin，padding和border不会撑开盒子，整体尺寸固定。（3）开发中可通过box-sizing:border-box将标准盒子切换为怪异盒子模式，适配布局需求。四、实操题参考答案（完整可运行代码）PlainText

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>CSS实操题案例</title>

<style>

/*初始化默认样式*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

.box{

/*宽高设置*/

width:300px;

height:200px;

/*背景与边框*/

background-color:#def3ff;

border:1pxsolid#000;

/*圆角与阴影*/

border-radius:10px;

box-shadow:2px2px8pxrgba(0,0,0,0.2);

/*水平居中*/

margin:50pxauto;

/*文字样式*/

font-size:16px;

font-weight:bold;

color:#000;

text-align:center;

line-height:200px;/*行高等于高度实现垂直居中*/

/*过渡效果*/

transition:all0.3sease;

}

/*鼠标悬浮样式*/

.box:hover{

background-color:#1976d2;

color:#ff