HTML5与CSS3 web前端开发技术习题答案

2025-04-30

2.操作题

(1)创建一个名为“mycss1”的样式文件,该样式定义字体为华文仿宋、幼园和宋体,字号为12pt,颜色为黄色,背景为蓝色,并在一个HTML文件中链接该样式文件。

/*mycss1.css*/ .mystyle {

font-family:宋体; font-size: 12pt; color:yellow;

background-color: blue; }

测试

(2)设计标记的CSS样式,要求如下。 ① 超级链接无下划线;

② 未访问链接(link)为宋体、12pt、黑色; ③ 已访问链接(visited)为黑体、绿色;

④ 鼠标停留在链接上(hover)为黑体、16pt、红色; ⑤ 激活超链接(active)文字为紫色。

第十四章

1.简答题

(1)文本的font属性在应用时需要注意哪些问题?

font属性是个复合属性,可一次性设置各种字体属性(属性之间以空格分隔)。在使用font属性设置字体格式时,字体属性名可以省略。font属性的排列顺序是:font-weight、font-variant、font-style、font-size和font-family。

需要说明的是,font-weight、font-variant、font-style这3个属性的顺序是可以改变的,但font-size、font-family必须按指定的顺序出现,如果顺序不对或缺少一个,那么整条样式定义可能不起作用。

(2)设置图像边框需要使用border-image属性,说明该属性各参数的意义,并在不同的浏览器中调试显示结果。

CSS3增加的border-image属性,该属性指定一个图像文件作为边框,边框的长或宽会随着网页元素承载内容的多少自动调整。使用border-image属性,浏览器在显示图像边框时,自动将用到的图像分割成9部分进行处理,不需要用户再考虑边框与内容的适应问题。

border-image属性的第一个参数需要指明边框图像的地址,接着4个参数是浏览器将边框图像分割时的上右下左四个边距,最后一个参数是边框宽度。例如:

border-image:url(images/borderimage.png) 5 10 15 20/25px; -moz-border-image:url(images/borderimage.png) 5 10 15 20/25px; -webkit-border-image:url(images/borderimage.png) 5 10 15 20/25px;

(3)比较word-wrap属性与word-break属性的区别,并通过示例加以验证。

word-wrap 是CSS3新增加的属性,该属性允许超过容器的长单词换行到下一行,它的取值为normal和break-word,默认值为normal,表示只在允许的断字点换行,break-word表示在长单词或 URL 地址内部进行换行。

word-break 是CSS3新加的属性,用来处理如何自动换行。它的取值为normal、break-all和keep-all。默认值为normal,表示使用浏览器默认的换行规则,break-all表示允许在单词内换行,keep-all表示只能在半角空格或连字符处换行。

(4)本章中介绍的各种CSS属性既有CSS2以前的属性,也有CSS3新增的属性,列举出CSS3新增属性,说明其释义。

word-break ,用来处理如何自动换行。

word-wrap,该属性允许超过容器的长单词换行到下一行。 border-radius,可以设计各种类型的圆角边框。

border-image属性,该属性指定一个图像文件作为边框,边框的长或宽会随着网页元素承载内容的多少自动调整。

max-width和max-height分别用来设置图片宽度最大值和高度最大值。

2.操作题

(1)用CSS设计如图14-24所示的页面,要求如下。 ① 设置背景

background-attachment、background-image、background-repeat、

background-position等属性;

② 设置图片的border、width、height等属性;

③ 为控制图片位置,可将图片置于

标记或
标记中。







第十五章

1.简答题

(1)什么是CSS盒模型概念,如何计算其宽度?

盒模型是CSS控制页面布局的一个非常重要的概念,页面上的所有元素,包括文本、图像、超级链接、div块等,都可以被看作盒子。由盒子将页面中的元素包含在一个矩形区域内,这个矩形区域则称为“盒模型”。

盒模型由内到外依次分为内容(content)、填充(padding)、边框(border)和边界(margin)4部分,如图15-1所示。盒子的实际大小为这几部分之和,盒子宽度为:左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

(2)CSS3新增哪些与盒相关的属性?简述其各自功能。

①宽度和高度,定义内容的大小属性;如果盒子里信息过多,超出width和height属性限定的大小,盒子的高度将自动放大。这时需要使用overflow属性设置处理方式。定义盒模型语法格式如下:

width: auto | length; height: auto | length;

overflow: auto | visible | hidden | scroll; ②边界(margin)是盒模型与其他盒模型之间的距离,使用margin属性定义,其语法格式如下。

margin: auto | length;

③填充(padding)用来设置内容和盒子边框之间的距离,可用padding属性设置,其语法格式如下。

padding: length;

④边框(border)是盒模型中介于填充(padding)和边界(margin)之间的分界线,可用border-width、border-style、border-color属性定义边框的宽度、样式、颜色,也可以直接使用border属性后加3个对应值,用空格隔开进行设置。

(3)说明下列border-style属性值的含义:solid、outset、ridge、dotted。 边框样式用border-style属性描述,其值可取的关键字如下。 ? none:无边框,默认值 ? hidden:隐藏边框

? dashed:点划线构成的虚线边框 ? dotted:点构成的虚线边框 ? solid:实线边框 ? double:双实线边框

? groove:根据color值,显示3D凹槽边框 ? ridge:根据color值,显示3D凸槽边框 ? inset:根据color值,显示3D凹边边框 ? outset:根据color值,显示3D凸边边框

(4)简述绝对定位的设置效果。


Copyright © 2020-2025 70教育网 版权所有
声明 :本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
客服QQ:370150219 邮箱:370150219@qq.com
苏ICP备16052595号-17

× 游客快捷下载通道(下载后可以自由复制和排版)

下载本文档需要支付 7

支付方式:

开通VIP包月会员 特价:29元/月

注:下载文档有可能“只有目录或者内容不全”等情况,请下载之前注意辨别,如果您已付费且无法下载或内容有问题,请联系我们协助你处理。
微信:xuecool-com QQ:370150219