最近评论
正在载入评论列表...
3.5 自我测试
1．如果在行内定义<p>元素样式文本为蓝色、斜体，文档头部定义<p>元素样式信息为红色、下划线，那么最终浏览器显示<p>元素文本将是怎样的颜色和字体？
2．创建一个外联样式表文件sample.css，利用<link>元素将样式表文件和HTML文件进行关联。
3．在题2创建的外联样式表中加入<p>元素样式定义颜色为黄色、行距为1.5em，试问最终运行结果<p>元素如何显示？
1．由于行内样式定义拥有最高的优先级别，因此它将覆盖与之冲突的文档头部样式定义。所以最终浏览器显示<p>元素文本为蓝色、斜体和下划线。示例3.19演示了本题的效果。
示例3.19
<html>
<head>
<title>CSS Demo</title>
<style>
p { text-decoration: underline; color: red; }
</style>
</head>
<body>
<p style="color: blue; font-style: italic;">1．如果在行内定义<p>元素样式文本为蓝色、斜体，文档头部定义<p>元素样式信息为红色、下划线，那么最终浏览器显示<p>元素文本将是怎样的颜色和字体？
</body>
</html>
2．创建外联CSS样式表文件的方法详见第1章的叙述，需要注意文件名后缀必须为“.css”。HTML文件的代码如示例3.20所示。
示例3.20
<html>
<head>
<title>CSS Demo</title>
<link href="sample.css" rel="stylesheet" type="text/css">
<style>
p { text-decoration: underline; color: red; }
</style>
</head>
<body>
<p style="color: blue; font-style: italic;">1．如果在行内定义<p>元素样式文本为蓝色、斜体，文档头部定义<p>元素样式信息为红色、下划线，那么最终浏览器显示<p>元素文本将是怎样的颜色和字体？
</body>
</html>
3．由于外联样式表拥有最低的优先级，因此一旦产生样式冲突则外联样式属性不会产生作用。所以它的黄色文本不会生效，文字仍然为蓝色，而1.5em行距会产生效果。
图书导读
