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等属性;
③ 为控制图片位置,可将图片置于