您的位置： 无忧文档所有分类高等教育工学 ch5 页面设计

ch5 页面设计

Web程序设计第三版源代码及课后习题

【例5-2】下面是一个使用CSS对文字显示特性进行控制的HTML文件。

<html><head><title>CSS示例</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css">

h1 {font-family:"隶书", "宋体";color:#ff8800}

.text {font-family: "宋体"; font-size: 14pt; color: red}

</style></head>

<body topmargin=4><h1>这是一个CSS示例！<h1>

<span class="text">这行文字应是红色的。</span></body></html>

【例5-3】先将样式定义存放于文件style.css（CSS样式文件的扩展名为.css），style.css文件中包含的内容为：

h1 {font-family:"隶书","宋体";color:#ff8800}

p {background-color:yellow;color:#000000}

.text {font-family: "宋体"; font-size: 14pt; color: red}

HTML文件css1.htm要引用该样式表，其文件内容为： <html><head><title>链接外部CSS文件示例</title>

<link rel=stylesheet type="text/css" href="style.css" media=screen></head> <body topmargin=4 >

<h1>这是一个链接外部CSS文件的示例！<h1> <span class="text">这行文字应是红色的。</span> <p>这一段的底色应是黄色。</p></body></html>

【例5-4】 设有两个样式表文件s1.css，s2.css和一个HTML文件example_css.htm，内容分别如下：

[文件s1.css]

h2 {font-family:"隶书";color:#ff8800}

p {color:black;background-color:yellow;font-size:12pt;} [文件s2.css]

h3 {font-family:"宋体";color:blue;font-style:italic;} .text {font-family: "宋体"; font-size: 10pt; color: red} [文件example_css.htm]

<html><head><title>CSS综合应用示例</title>

<link rel=stylesheet type="text/css" href="s1.css"> <style type="text/css">

a:visited {color: #0000FF; text-decoration: none}

a:link {font-family: "宋体"; font-size: 9pt; color: #0000FF; text-decoration: none} a:hover {font-family: "宋体"; font-size: 12pt; color: #003333; background-color: #FFCC99; text-decoration: none} @import URL("s2.css");

·1·

第1页

你可能喜欢

  • 实验设计报告
  • 版式设计教案
  • 版式设计课程
  • 版式设计课件
  • 字体设计教案
  • 版式设计教程

ch5 页面设计的相关文档搜索

ch5 页面设计相关文档

最新文档

返回顶部