第20练 CSS3技术 《移动商务基础》（人大版第二版）山东省（春季高考）一课一练（原卷版+解析版）

编写说明：考虑到中职学生普遍基础知识相对薄弱的情况，我们依据支架式教学理念，精心编制了《移动商务基础》（人大版第二版）一课一练。专辑中每1份练习，都与课堂所授知识点紧密相关，练习题内容围绕课堂所学知识点呈现。目的在于激发学生的学习兴趣，培养他们的学习自觉性，帮助学生掌握课程的基本概念及方法，为后续进一步提升奠定基础。 本卷为《移动商务基础》（人大版第二版）一课一练的第20练，练习内容为CSS3技术。 《移动商务基础》（人大版第二版） 第二章 移动商务技术概况 第四节 移动商务开发的新技术——HTML5和CSS3 第20练 CSS3技术 一、单选题 1. CSS即层叠样式表，在网页制作时采用该技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加（ ）的控制。 A. 粗略 B. 精确 C. 随机 D. 模糊 【答案】B 【解析】CSS（Cascading Style Sheet）即层叠样式表。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。 2. CSS3语言开发是朝着（ ）发展的，以前的规范被分解为一些小的模块。 A. 一体化 B. 标准化 C. 自动化 D. 模块化 【答案】D 【解析】CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以把它分解为一些小的模块，更多新的模块也被加入进来。 3. 下列属于CSS3新增属性的是（ ）。 A. 圆角 B. 表格边框 C. 段落缩进 D. 字符串连接 【答案】A 【解析】CSS3给我们带来了如文字阴影、盒子阴影、圆角、背景渐变、2D变换和动画等常用属性，还有如－webkit－mask、－webkit－text－stroke等webkit内核私有属性。 4. 在移动页面设计中，有时竖屏显示效果不错，但横屏时字体会变大，此时可以通过设置相应属性来（ ）。 A. 加快页面加载速度 B. 增强图片显示效果 C. 禁止浏览器自动调整 D. 自动适配屏幕亮度 【答案】C 【解析】在移动页面设计中，有时竖屏显示效果不错，但是当横屏的时候字体会变大，无论怎样设置字体大小都无效。在webkit内核的浏览器中只需设置相应属性就可以禁止自动调整。 5. 在使用display：－webkit－box时，（ ）用于设置子元素的排列方向，其默认值是inline－axis，即横向排列。 A. －webkit－box－flex B. －webkit－box－direction C. －webkit－box－lines D. －webkit－box－orient 【答案】D 【解析】－webkit－box－orient用于设置子元素的排列方向，其取值为horizontal、vertical、inline－axis、block－axis、inherit等，其中默认值是inline－axis，即横向排列。 6. 当为块级元素定义了边框并设置宽度为100％时，会出现左右边框各一个像素溢出的问题，此时可以添加（ ）来指定该盒子的大小。 A. －webkit－box－align B. －webkit－box－pack C. －webkit－box－sizing：border－box D. －webkit－box－flex 【答案】C 【解析】当指定了一个块级元素，并且为其定义了边框，设置了其宽度为100％，按照盒模型，就会发现该元素的左右边框各一个像素会溢出，导致出现横向滚动条，此时可以为其添加－webkit－box－sizing：border－box来指定该盒子的大小，包括边框的宽度。 7. 在HTML5和CSS3的世界里，很多图片都是多余的，我们可以让CSS3替代不必要的图片和不必要的（ ）代码。 A. 表格 B. 脚本 C. 标题 D. 链接 【答案】B 【解析】在HTML5和CSS3的世界里，很多图片都是多余的，我们可以尽情发挥自己的想象力，让CSS3替代不必要的图片和不必要的JavaScript代码。 二、简答题 8. 简述CSS3新增的常用属性。 【答案】 ①CSS3带来了文字阴影、盒子阴影、圆角、背景渐变、2D变换和动画等常用属性。 ②此外还有－webkit－mask、－webkit－text－stroke等webkit内核私有属性。 ③这些属性都有自己的使用场景，可以根据项目需要灵活运用。 9. 简述CSS3中rem字级单位的优点。 【答案】 ①常用的字级单位有px、pt、百分比、em等，CSS3还新增加了rem。 ②用em和百分比的时候会遇到计算的问题，而且当嵌套的层级太多时就会出现控制文字大小困难，用px则成为固定大小的字体。 ③使用rem则完全不用担心这些问题，因为它的参照对象只有根节点，只需设置根节点的大小，其他所有子节点都参照它来设计。 三、综合分析题 10. 一家手机端购物网站上线后发现两个问题：横屏浏览时，页面文字会突然变大，排版出现错乱；商品图片占用的空间很大，加载速度慢。技术人员分别进行了处理：在样式表中加入了禁止字体自动调整的属性；把一部分装饰性图片改用代码绘制。请回答下列问题： （1）技术人员是如何解决横屏时文字变大问题的？ （2）把装饰性图片改用代码绘制，体现了CSS3的什么作用？ （3）结合材料，说明CSS3在移动网页设计中的价值。 【答案】 （1） ①在样式表中设置了禁止字体自动调整的属性； ②在webkit内核的浏览器中，只要这样设置，字体的大小就由设计者自己控制，不会再随屏幕方向变化。 （2） ①体现了CSS3绘图的作用，很多装饰性的效果都可以用代码实现； ②这样可以替代不必要的图片，减少页面资源占用，提高加载速度。 （3） ①CSS3可以对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制； ②它有助于替代不必要的图片和代码，改善移动端页面的显示效果和加载性能。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $ 编写说明：考虑到中职学生普遍基础知识相对薄弱的情况，我们依据支架式教学理念，精心编制了《移动商务基础》（人大版第二版）一课一练。专辑中每1份练习，都与课堂所授知识点紧密相关，练习题内容围绕课堂所学知识点呈现。目的在于激发学生的学习兴趣，培养他们的学习自觉性，帮助学生掌握课程的基本概念及方法，为后续进一步提升奠定基础。 本卷为《移动商务基础》（人大版第二版）一课一练的第20练，练习内容为CSS3技术。 《移动商务基础》（人大版第二版） 第二章 移动商务技术概况 第四节 移动商务开发的新技术——HTML5和CSS3 第20练 CSS3技术 一、单选题 1. CSS即层叠样式表，在网页制作时采用该技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加（ ）的控制。 A. 粗略 B. 精确 C. 随机 D. 模糊 2. CSS3语言开发是朝着（ ）发展的，以前的规范被分解为一些小的模块。 A. 一体化 B. 标准化 C. 自动化 D. 模块化 3. 下列属于CSS3新增属性的是（ ）。 A. 圆角 B. 表格边框 C. 段落缩进 D. 字符串连接 4. 在移动页面设计中，有时竖屏显示效果不错，但横屏时字体会变大，此时可以通过设置相应属性来（ ）。 A. 加快页面加载速度 B. 增强图片显示效果 C. 禁止浏览器自动调整 D. 自动适配屏幕亮度 5. 在使用display：－webkit－box时，（ ）用于设置子元素的排列方向，其默认值是inline－axis，即横向排列。 A. －webkit－box－flex B. －webkit－box－direction C. －webkit－box－lines D. －webkit－box－orient 6. 当为块级元素定义了边框并设置宽度为100％时，会出现左右边框各一个像素溢出的问题，此时可以添加（ ）来指定该盒子的大小。 A. －webkit－box－align B. －webkit－box－pack C. －webkit－box－sizing：border－box D. －webkit－box－flex 7. 在HTML5和CSS3的世界里，很多图片都是多余的，我们可以让CSS3替代不必要的图片和不必要的（ ）代码。 A. 表格 B. 脚本 C. 标题 D. 链接 二、简答题 8. 简述CSS3新增的常用属性。 9. 简述CSS3中rem字级单位的优点。 三、综合分析题 10. 一家手机端购物网站上线后发现两个问题：横屏浏览时，页面文字会突然变大，排版出现错乱；商品图片占用的空间很大，加载速度慢。技术人员分别进行了处理：在样式表中加入了禁止字体自动调整的属性；把一部分装饰性图片改用代码绘制。请回答下列问题： （1）技术人员是如何解决横屏时文字变大问题的？ （2）把装饰性图片改用代码绘制，体现了CSS3的什么作用？ （3）结合材料，说明CSS3在移动网页设计中的价值。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $