专题十二 css样式的基本操作《网页设计》 45分钟专题训练（山东省）

· 山东省春季高考《网页制作》45分钟专题训练专辑，共16份试卷。试卷命题与高考紧密相关，精选具有代表性和典型性的高考常考题。旨在帮助学生系统地复习和巩固计算机类理论知识，熟悉高考题型和命题规律，提高解题能力和应试技巧，为高考取得优异成绩打下坚实的基础，本训练卷适用于即将参加计算机类高考的学生。与本专辑配套的还有山东省春季高考《图形图像处理》《计算机组装与维护》《数字摄影摄像》《实用美术基础》45分钟专题训练专辑，欢迎同学和老师们下载使用。 《网页制作》 专题十二 css样式的基本操作 时间：45分钟 总分：100分 班级___________ 姓名__________ 学号__________ 成绩________ 一、选择题（共25个题，每题2分，共50分） 1.在CSS中，用于设置网页元素背景颜色的属性是（ ） A. color B. background C. background-color D. bg-color 【答案】C 【解析】color用于设置文本颜色，A错误；background是复合属性，可同时设置背景颜色、图片等，B错误；background-color专门用于设置背景颜色，C正确；bg-color不是CSS标准属性，D错误 2. 下列关于CSS的描述，错误的是（ ） A. CSS用于定义网页的样式外观 B. CSS可以实现内容与样式的分离 C. CSS只能嵌入在HTML文件中使用 D. CSS全称是层叠样式表 【答案】C 【解析】CSS有内联、内部、外部三种使用方式，并非只能嵌入HTML文件，C错误；A、B、D均为CSS的正确描述 3. 在Dreamweaver CC中，创建CSS样式时，“类”选择器的命名规则是（ ） A. 以数字开头 B. 以“#”开头 C. 以“.”开头 D. 以字母开头且可包含数字和连字符 【答案】C 【解析】类选择器以“.”开头，C正确；ID选择器以“#”开头，B错误；选择器不能以数字开头，A错误；D是选择器命名的补充规则，并非类选择器的核心标识规则 4. 用于设置文本字体大小的CSS属性是（ ） A. font-family B. font-size C. font-weight D. font-style 【答案】B 【解析】font-family设置字体类型，A错误；font-size设置字体大小，B正确；font-weight设置字体粗细，C错误；font-style设置字体样式（如斜体），D错误 5. 下列单位中，不属于CSS字体大小常用单位的是（ ） A. px B. em C. kg D. rem 【答案】C 【解析】px（像素）、em（相对当前字体大小）、rem（相对根元素字体大小）均为CSS字体大小常用单位；kg是质量单位，与CSS无关，C错误 6. 在CSS中，设置文本水平居中对齐的属性值是（ ） A. center B. middle C. left D. right 【答案】A 【解析】text-align属性用于设置文本水平对齐方式，center为水平居中，A正确；middle常用于垂直对齐，B错误；left（左对齐）、right（右对齐）不符合需求，C、D错误 7. 下列关于内联样式的说法，正确的是（ ） A. 内联样式通过<style>标签定义 B. 内联样式优先级最低 C. 内联样式直接写在HTML元素的style属性中 D. 内联样式可同时作用于多个元素 【答案】C 【解析】内联样式直接写在HTML元素的style属性中，C正确；内部样式通过<style>标签定义，A错误；内联样式优先级最高，B错误；内联样式仅作用于当前元素，D错误 8. 用于设置元素边框宽度的CSS属性是（ ） A. border-style B. border-width C. border-color D. border-radius 【答案】B 【解析】border-style设置边框样式，A错误；border-width设置边框宽度，B正确；border-color设置边框颜色，C错误；border-radius设置边框圆角，D错误 9. 在CSS中，若要将文本设置为斜体，应使用的属性值是（ ） A. bold B. italic C. oblique D. normal 【答案】B 【解析】italic是font-style属性的斜体值，B正确；bold是字体加粗值，A错误；oblique虽也表示斜体，但italic更常用且符合教材表述，C错误；normal是默认样式，D错误 10. 下列CSS选择器中，属于标签选择器的是（ ） A. .title B. #box C. p D. a:hover 【答案】C 【解析】标签选择器直接使用HTML标签名，C（p标签选择器）正确；.title是类选择器，A错误；#box是ID选择器，B错误；a:hover是伪类选择器，D错误 11. 在Dreamweaver CC的“CSS设计器”面板中，不能完成的操作是（ ） A. 创建CSS样式 B. 编辑已有CSS规则 C. 删除CSS样式 D. 直接编写HTML代码 【答案】D 【解析】CSS设计器面板可完成创建、编辑、删除CSS样式等操作，A、B、C正确；直接编写HTML代码需在代码视图或“代码”面板中进行，CSS设计器面板不支持，D错误 12. 用于设置元素内边距（内边距）的CSS属性是（ ） A. margin B. padding C. border D. content 【答案】B 【解析】margin设置外边距，A错误；padding设置内边距，B正确；border设置边框，C错误；content用于伪元素，D错误 13. 下列CSS代码中，能正确设置元素边框为红色实线的是（ ） A. border: red solid; B. border: solid red; C. border: 1px solid red; D. border: red 1px dashed; 【答案】C 【解析】border复合属性的语法为“border: 宽度 样式 颜色;”，三者顺序可调整，但宽度和样式是必选值，C符合语法且完整，A、B缺少宽度值，D选项dashed为虚线。 14. 在CSS中，设置文本行高的属性是（ ） A. line-height B. text-height C. letter-spacing D. word-spacing 【答案】A 【解析】line-height设置文本行高，A正确；text-height不是标准属性，B错误；letter-spacing设置字符间距，C错误；word-spacing设置单词间距，D错误（ 15. 下列关于外部样式表的说法，错误的是（ ） A. 外部样式表以.css为扩展名 B. 外部样式表需通过<link>标签引入HTML文件 C. 一个外部样式表只能作用于一个HTML文件 D. 外部样式表便于网站样式的统一管理 【答案】C 【解析】一个外部样式表可通过<link>标签引入多个HTML文件，实现样式统一管理，C错误 16. 在CSS中，若要隐藏一个元素，应设置的display属性值是（ ） A. hidden B. none C. invisible D. block 【答案】B 【解析】display: none可隐藏元素且不保留其占位空间，B正确；hidden是HTML属性，非CSS display属性值，A错误；invisible不是标准属性，C错误；display: block用于将元素显示为块级元素，D错误 17. 用于设置文本颜色的CSS属性是（ ） A. text-color B. font-color C. color D. text-style 【答案】C 【解析】color是CSS中用于设置文本颜色的唯一标准属性，A、B、D均为非标准属性，C正确 18. 在Dreamweaver CC中，“标签选择器”的作用是（ ） A. 为特定类别的元素定义样式 B. 为页面中所有同名标签定义统一样式 C. 为指定ID的元素定义样式 D. 为鼠标悬停的元素定义样式 【答案】B 【解析】标签选择器的作用是为页面中所有同名HTML标签定义统一样式，B正确；类选择器为特定类别元素定义样式，A错误；ID选择器为指定ID的唯一元素定义样式，C错误；伪类选择器为元素特殊状态（如悬停）定义样式，D错误 19. 下列CSS属性中，用于设置元素背景图片的是（ ） A. background-image B. background-pic C. image-background D. pic-background 【答案】A 【解析】background-image是CSS中用于设置元素背景图片的属性，语法为background-image: url("图片路径");，A正确；B、C、D均为非标准属性 20. 在CSS中，border-style属性的默认值是（ ） A. solid B. dashed C. dotted D. none 【答案】D 【解析】border-style属性的默认值为none，即默认无边框，D正确；solid（实线）、dashed（虚线）、dotted（点线）均为需要手动设置的样式值 21. 下列关于CSS优先级的说法，正确的是（ ） A. 内联样式优先级低于内部样式表 B. 标签选择器优先级高于类选择器 C. ID选择器优先级高于类选择器 D. 内部样式表优先级高于外部样式表 【答案】C 【解析】CSS优先级从高到低为：内联样式 > ID选择器 > 类选择器 > 标签选择器，C正确；A、B、D均不符合优先级规则 22. 用于设置元素外边距（外边距）的CSS属性是（ ） A. padding B. margin C. border D. outline 【答案】B 【解析】padding设置内边距，A错误；margin设置外边距，B正确；border设置边框，C错误；outline设置轮廓，与外边距无关，D错误 23. 在CSS中，若要将文本设置为粗体，应使用的font-weight属性值是（ ） A. italic B. bold C. normal D. bolder 【答案】B 【解析】font-weight属性中，bold表示粗体，B正确；italic是字体斜体值，A错误；normal是默认粗细，C错误；bolder表示更粗，但题目仅要求“粗体”，bold更符合需求 24. 下列CSS代码中，能正确设置段落文本首行缩进2个字符的是（ ） A. p { text-indent: 2px; } B. p { text-indent: 2em; } C. p { text-indent: 2rem; } D. p { text-indent: 2pt; } 【答案】B 【解析】em是相对单位，1em等于当前元素的字体大小，文本首行缩进2个字符常用text-indent: 2em;，B正确；px是绝对单位，2px缩进过小，A错误；rem相对根元素字体大小，C错误；pt用于印刷行业，网页中不常用，D错误 25. 在Dreamweaver CC中，创建内部样式表时，样式代码应放在（ ） A. <body>标签内 B. <head>标签内的<style>标签中 C. <meta>标签后 D. HTML文件的末尾 【答案】B 【解析】内部样式表需写在<head>标签内的<style>标签中，B正确；<body>标签内不适合放置样式代码，A错误；<meta>标签后不是强制要求，C错误；HTML文件末尾放置样式会导致样式加载延迟，D错误 二、简答题（共4小题，每题5分，共20分） 1.简述打开CSS设计器面板的方法 【答案】见解析 【解析】 通过顶部菜单栏选择“窗口”选项，在下拉菜单中找到“CSS设计器”并点击，或使用快捷键Shift+F11直接调出面板。面板分为“源”“选择器”“属性”三个区域，分别用于管理样式来源、编辑选择器及调整样式属性。 2. 简述编辑CSS样式的方法 【答案】见解析 【解析】 ①在“CSS设计器”面板的“选择器”区域点击目标选择器，若需新建选择器可点击“+”按钮并输入名称；②在“属性”区域通过下拉菜单或输入框调整样式属性，例如修改字体颜色时选择“color”属性并输入颜色值；对于复合属性如“border”，可展开子属性分别设置宽度、样式和颜色；若需添加新属性，在“属性”区域空白处点击或通过“添加属性”按钮输入属性名； ③编辑过程中可实时在文档窗口查看效果，确认无误后保存文件即可完成样式更新。 3. 简述应用CSS样式的方法 【答案】见解析 【解析】应用CSS样式的方法主要分为以下三种场景： ①类选择器：在“CSS设计器”面板的“源”区域选择样式表文件，在“选择器”区域找到目标类选择器（如.title），选中HTML文档中需要应用样式的元素，在属性面板的“类”下拉菜单中选择该类名，或直接在HTML代码中添加class="类名"属性。 ②ID选择器：在“选择器”区域点击ID选择器（如#header），确保HTML元素中存在唯一ID属性（如<div id="header">），样式会自动关联到该元素，适用于需要精准定位的独立组件。 ③标签选择器：在“选择器”区域选择标签选择器（如p），所有未被其他样式覆盖的同名标签将自动继承该样式，适用于统一设置段落、标题等基础元素的默认样式。 4. 简述删除CSS样式的方法 【答案】见解析 【解析】 ①内部样式表中的样式，在“CSS设计器”面板的“源”区域选中当前文档，在“选择器”区域找到目标选择器（如.text-style），右键点击选择“删除选择器”或按Delete键，或直接在<style>标签内删除对应的CSS规则代码； ②外部样式表中的样式，需先在“源”区域点击“附加样式表”按钮解除HTML文件与外部.css文件的关联，或打开外部样式表文件手动删除规则，保存后刷新页面即可移除样式效果； ③元素的内联样式，直接清除HTML标签中的style属性值即可。删除操作前建议通过“实时视图”检查样式是否被其他规则覆盖，避免误删后影响页面布局。 3、 案例分析题（共3小题，每题10分，共30分） 1.李华正在装饰个人网站，请帮忙完成下列要求。 （1）CSS样式的类型有哪些？ 【答案】见解析 【解析】 CSS样式的类型主要包括以下三种： ①内联样式，直接在HTML元素的style属性中定义，例如<div style="color: red;">，这种方式优先级最高但不利于维护，适合临时测试或覆盖其他样式； ②内部样式表，通过<style>标签嵌入在HTML文档的<head>区域，例如<style> p { color: blue; } </style>，这种方式仅作用于当前页面，适合单页面样式管理； ③外部样式表，将样式代码保存在独立的.css文件中，通过<link>标签引入HTML文档，例如<link rel="stylesheet" href="styles.css">，这种方式便于多页面共享样式，实现全局统一管理且维护效率最高。 （2）创建一个CSS样式xk，设置行间距为30像素，并应用到子网页“世界”。 【答案】见解析 【解析】 ①在CSS设计器面板的“源”区域选择当前样式表文件，点击“选择器”区域的“+”按钮新建选择器并命名为“xk”； ②“属性”区域找到“line-height”属性，输入数值“30px”完成行间距设置； ③保存样式表后，打开子网页“世界”的HTML文件，在“CSS设计器”面板的“源”区域附加该样式表，在“选择器”区域选中“xk”，通过属性面板的“类”下拉菜单为其添加“xk”类名。 2. 利用CSS样式创建超链接，要求鼠标指向超文本时字体呈黄色，单击时颜色为红色。 【答案】见解析 【解析】①单击属性面板“页面属性”按钮，选择链接（CSS）选项卡。 ②设置变换图像链接为黄色，活动链接为红色。单击确定完成设置。 3.在Dreamweaver中，如何实现每次插入水平线都是一条红色的细虚线。 【答案】见解析 【解析】 ①按shift+F11打开CSS 设计器面板，单击“新建CSS规则”按钮，弹出“新建CSS规则”对话框。 ②设置选择器类型为“标签”，在名称文本框选择hr，选择定义规则的位置为“仅对该文档”，单击“确定”按钮。 ③在“分类”列表框选择“类型”，设置top边框style为dashed，width为thin，color为红色，单击“确定”按钮。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $ · 山东省春季高考《网页制作》45分钟专题训练专辑，共16份试卷。试卷命题与高考紧密相关，精选具有代表性和典型性的高考常考题。旨在帮助学生系统地复习和巩固计算机类理论知识，熟悉高考题型和命题规律，提高解题能力和应试技巧，为高考取得优异成绩打下坚实的基础，本训练卷适用于即将参加计算机类高考的学生。与本专辑配套的还有山东省春季高考《图形图像处理》《计算机组装与维护》《数字摄影摄像》《实用美术基础》45分钟专题训练专辑，欢迎同学和老师们下载使用。 《网页制作》 专题十二 css样式的基本操作 时间：45分钟 总分：100分 班级___________ 姓名__________ 学号__________ 成绩________ 一、选择题（共25个题，每题2分，共50分） 1.在CSS中，用于设置网页元素背景颜色的属性是（ ） A.color B.background C.background-color D.bg-color 2.下列关于CSS的描述，错误的是（ ） A.CSS用于定义网页的样式外观 B.CSS可以实现内容与样式的分离 C.CSS只能嵌入在HTML文件中使用 D.CSS全称是层叠样式表 3.在Dreamweaver CC中，创建CSS样式时，“类”选择器的命名规则是（ ） A.以数字开头 B.以“#”开头 C.以“.”开头 D.以字母开头且可包含数字和连字符 4.用于设置文本字体大小的CSS属性是（ ） A.font-family B.font-size C.font-weight D.font-style 5.下列单位中，不属于CSS字体大小常用单位的是（ ） A.px B.em C.kg D.rem 6.在CSS中，设置文本水平居中对齐的属性值是（ ） A.center B.middle C.left D.right 7.下列关于内联样式的说法，正确的是（ ） A.内联样式通过<style>标签定义 B.内联样式优先级最低 C.内联样式直接写在HTML元素的style属性中 D.内联样式可同时作用于多个元素 8.用于设置元素边框宽度的CSS属性是（ ） A.border-style B.border-width C.border-color D.border-radius 9.在CSS中，若要将文本设置为斜体，应使用的属性值是（ ） A.bold B.italic C.oblique D.normal 10.下列CSS选择器中，属于标签选择器的是（ ） A..title B.#box C.p D.a:hover 11.在Dreamweaver CC的“CSS设计器”面板中，不能完成的操作是（ ） A.创建CSS样式 B.编辑已有CSS规则 C.删除CSS样式 D.直接编写HTML代码 12.用于设置元素内边距（内边距）的CSS属性是（ ） A.margin B.padding C.border D.content 13.下列CSS代码中，能正确设置元素边框为红色实线的是（ ） A.border: red solid; B.border: solid red; C.border: 1px solid red; D.border: red 1px dashed; 14.在CSS中，设置文本行高的属性是（ ） A.line-height B.text-height C.letter-spacing D.word-spacing 15.下列关于外部样式表的说法，错误的是（ ） A.外部样式表以.css为扩展名 B.外部样式表需通过<link>标签引入HTML文件 C.一个外部样式表只能作用于一个HTML文件 D.外部样式表便于网站样式的统一管理 16.在CSS中，若要隐藏一个元素，应设置的display属性值是（ ） A.hidden B.none C.invisible D.block 17.用于设置文本颜色的CSS属性是（ ） A.text-color B.font-color C.color D.text-style 18.在Dreamweaver CC中，“标签选择器”的作用是（ ） A.为特定类别的元素定义样式 B.为页面中所有同名标签定义统一样式 C.为指定ID的元素定义样式 D.为鼠标悬停的元素定义样式 19.下列CSS属性中，用于设置元素背景图片的是（ ） A.background-image B.background-pic C.image-background D.pic-background 20.在CSS中，border-style属性的默认值是（ ） A.solid B.dashed C.dotted D.none 21.下列关于CSS优先级的说法，正确的是（ ） A.内联样式优先级低于内部样式表 B.标签选择器优先级高于类选择器 C.ID选择器优先级高于类选择器 D.内部样式表优先级高于外部样式表 22.用于设置元素外边距（外边距）的CSS属性是（ ） A.padding B.margin C.border D.outline 23.在CSS中，若要将文本设置为粗体，应使用的font-weight属性值是（ ） A.italic B.bold C.normal D.bolder 24.下列CSS代码中，能正确设置段落文本首行缩进2个字符的是（ ） A.p { text-indent: 2px; } B.p { text-indent: 2em; } C.p { text-indent: 2rem; } D.p { text-indent: 2pt; } 25.在Dreamweaver CC中，创建内部样式表时，样式代码应放在（ ） A.<body>标签内 B.<head>标签内的<style>标签中 C.<meta>标签后 D.HTML文件的末尾 二、简答题（共4小题，每题5分，共20分） 1.简述打开CSS设计器面板的方法 2. 简述编辑CSS样式的方法 3. 简述应用CSS样式的方法 4. 简述删除CSS样式的方法 3、 案例分析题（共3小题，每题10分，共30分） 1.李华正在装饰个人网站，请帮忙完成下列要求。 （1）CSS样式的类型有哪些？ （2）创建一个CSS样式xk，设置行间距为30像素，并应用到子网页“世界”。 2. 利用CSS样式创建超链接，要求鼠标指向超文本时字体呈黄色，单击时颜色为红色。 3.在Dreamweaver中，如何实现每次插入水平线都是一条红色的细虚线。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $