CSS基础期末考试试题

CSS基础期末考试试题考试时长：60分钟满分：100分注意事项：1.请认真审题，独立完成答题；2.代码书写规范、缩进工整，语法无误方可得分；3.实操题需保证代码可正常运行、效果符合题目要求。一、单项选择题（每题3分，共30分）1.以下不属于CSS样式引入方式的是（）A.行内样式  B.内部样式  C.全局样式  D.外部样式2.在CSS中，设置字体颜色的正确属性是（）A.font-color  B.text-color  C.color  D.font-style3.下列选择器中，优先级最高的是（）A.类选择器  B.ID选择器  C.标签选择器  D.通配符选择器4.CSS属性中，padding的作用是（）A.设置元素外边距  B.设置元素内边距  C.设置元素边框  D.设置元素宽高5.想要让块状元素水平居中，标准的CSS写法是（）A.text-align:center;  B.margin:0auto;  C.float:center;  D.position:center;6.以下哪个属性可以清除浮动带来的布局塌陷问题（）A.clear  B.overflow:hidden;  C.float:none;  D.display:block;7.设置元素圆角边框的CSS属性是（）A.border-shadow  B.border-radius  C.border-style  D.border-round8.下列关于display属性说法错误的是（）A.block为块状元素，独占一行  B.inline为行内元素，不独占一行C.inline-block兼具行内和块状特性  D.none会让元素隐藏且占用页面空间9.CSS中，设置文本水平居中的属性是（）A.vertical-align:middle  B.text-align:center  C.align-items:center  D.justify-content:center10.想要改变鼠标悬浮在元素上时的样式，需要使用哪个伪类（）A.:active  B.:hover  C.:link  D.:visited二、填空题（每空2分，共20分）1.CSS的全称是________________________，主要用于控制网页的布局和样式。2.外部样式表的文件后缀是________，通过HTML的________标签引入页面。3.设置元素背景颜色的属性是________，设置背景图片的属性是________。4.定位属性position的默认值是________，固定定位的值是________。5.字体加粗的CSS属性值是font-weight:________，字体倾斜的属性是________。6.盒子模型的四大组成部分：内容、内边距、________、外边距。三、简答题（每题5分，共20分）1.简述CSS三种样式引入方式的优缺点及适用场景。2.简述标准盒子模型和IE怪异盒子模型的区别。3.简述浮动（float）的作用，以及浮动布局会产生哪些常见问题。4.简单说明ID选择器和类选择器的区别与使用规范。四、代码实操题（共30分）根据需求编写完整HTML+CSS代码，实现以下页面效果，代码规范、功能完整即可得分。需求说明：1.页面创建一个卡片容器，宽度300px，自适应高度；2.卡片背景为白色，设置10px圆角、浅灰色阴影；3.卡片内包含一行标题文字：“CSS基础练习卡片”，文字居中、字号18px、加粗、黑色，上下20px内边距；4.卡片整体在页面水平居中，页面整体背景为#f5f5f5；5.鼠标悬浮在卡片上时，阴影加深、卡片轻微上浮（可通过transform实现）。参考答案及评分标准一、单项选择题（30分）1.C 2.C 3.B 4.B 5.B 6.B 7.B 8.D 9.B 10.B二、填空题（20分）1.层叠样式表（CascadingStyleSheets）2..css；link3.background-color；background-image4.static；fixed5.bold（或700）；font-style6.边框（border）三、简答题（20分）1.三种样式引入方式优缺点及场景行内样式：直接写在标签属性中，优先级最高，书写简单、针对性强；缺点是代码冗余、不利于维护，仅适用于临时修改单个元素样式。内部样式：写在页面style标签中，仅对当前页面生效；优点是加载速度快、无需引入外部文件，缺点是无法复用，适用于单页面专属样式。外部样式：独立css文件引入，多页面可复用；优点是代码简洁、便于统一维护、结构样式分离，缺点是需要额外请求文件，适用于多页面网站项目。2.标准盒子与怪异盒子区别标准盒子模型（W3C）：元素实际宽度=width（内容宽度）+padding+border+margin，width仅控制内容区域大小。怪异盒子模型（IE）：元素实际宽度=width（包含内容、padding、border）+margin，设置的width为整体可视区域宽度。可通过box-sizing属性切换。3.浮动的作用及常见问题作用：让块状元素脱离标准文档流，实现元素横向排列，是传统网页布局常用方式。常见问题：父级元素高度塌陷、浮动元素后续标准流元素位置错乱、页面布局错位重叠。4.ID选择器与类选择器区别ID选择器以#定义，页面中唯一使用，仅能作用于一个元素，优先级高，常用于唯一模块、标签定位；类选择器以.定义，可重复使用，多个元素可共用同一个类名，优先级低于ID，常用于批量设置元素样式，是开发中最常用的选择器。四、实操题评分标准（30分）1.页面结构完整，HTML骨架齐全（5分）2.卡片宽高、背景色、圆角、阴影样式正确（8分）3.标题文字样式、居中、内边距效果符合要求（7分）4.页面背景、卡片水平居中实现正确（5分）5.鼠标悬浮动效（阴影加深、上浮）正常生效（5分）实操参考代码html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>CSS练习卡片</title>

<style>

body{

background-color:#f5f5f5;

}

.card{

width:300px;

margin:50pxauto0;

background:#fff;

border-radius:10px;

box-shadow:02px8px#eee;

transition:all0.3sease;

}

.card:hover{

box-shadow:05px15px#ddd;

transform:translateY(-5px);

}

.card-title{

text-align:center;

font-size:18px;

font-weight:bold;

color