css样式规则
原创
©著作权归作者所有:来自51CTO博客作者心兰相随的原创作品,请联系作者获取转载授权,否则将追究法律责任
1 《七步诗》
一、案例描述
- 考核知识点
CSS样式规则
- 练习目标
- 熟练掌握CSS样式规则。
- 灵活运用CSS行内式的引用方法。
- 需求分析
使用CSS对网页进行修饰时,首先需要了解CSS样式规则及引入CSS样式表的方法,本案例按照CSS样式规则的格式并使用CSS行内式的方法输出一首《七步诗》。
- 案例分析
效果如图3-1所示。
- 《七步诗》效果
- 具体实现步骤如下:
- 使用CSS行内式为页面元素引入样式。
- 按照CSS样式规则为标题设置成微软雅黑、蓝色、26px字体。
按照CSS样式规则为段落设置成微软雅黑、红色、28px字体。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>七步诗</title>
</head>
<body>
<h3 style="font-family: '微软雅黑';color: #00f;font-size: 26px;">七步诗</h3>
<font style="color: red;font-family: '微软雅黑';font-size: 28px">
煮豆燃豆萁,<br/>豆在釜中泣。<br/>
本是同根生,<br/>相煎何太急。<br/>
</font>
</body>
</html>