Font标签

来源:互联网 发布:石油计量表软件 编辑:程序博客网 时间:2024/06/06 16:33

font.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
h2 {
 font-family: "隶书",Arial, "黑体",  "宋体";
}
p {
 font-family: "黑体", "华文彩云","方正喵呜体";
}
#zh1 {
 font-size: 24px;
 font-style: normal;
 font-weight: bold;
 text-decoration: underline;
}
#d1 {
 background-color: #3FF;
 height: 300px;
 width: 550px;
 background-image: url(logo.JPG);
 background-repeat: no-repeat;
 background-position: right bottom;
 display: none;
}
body {
 background-image: url(logo.JPG);
 background-repeat: no-repeat;
 background-attachment:fixed;
}
.y1 {
 text-transform: capitalize;
 line-height: 30px;
 background-color: #0C9;
 word-spacing: 20px;
}
.y2 {
 text-transform: uppercase;
 line-height: 60px;
 background-color: #966;
 letter-spacing: 5px;
}
.y3 {
 text-transform: lowercase;
 line-height: 30px;
 background-color: #369;
 vertical-align: top;
}
.v1 {
 vertical-align: sub;
}
.y4 {
 font-variant: small-caps;
 line-height: 5em;
 background-color: #F96;
 text-indent: 60;
 white-space: nowrap;
 display: block;
}
#zh2 {
 font-size: 2em;
 font-style: italic;
 font-weight: normal;
 text-decoration: overline;
}
#zh3 {
 font-size: x-large;
 font-style: oblique;
 font-weight: 900;
 text-decoration: line-through;
}
-->
</style>
</head>

<body>
<h2>设置字体</h2>
<p>设置字体</p>
<hr />
<p style="color:rgb(255,000,000)">rgb红色</p>
<p style="color:green">颜色字体 绿色</p>
<p style="color:#0000FF">十六进制 蓝色&nbsp;</p>
<hr />
<p id="zh1">使用像素设置字体</p>
<p id="zh2">使用比例参数em</p>
<p id="zh3">使用X-large关键字</p>
<hr />
<p class="y1">this is css teach this is css teach this is css teach this is css teach this is css teach this is css teach</p>
<p class="y2">this is css teach this is css teach this is css teach this is css teach this is css teach this is css teach</p>
<p class="y3">This is css Teach This is css <img src="logo.JPG" height="85" />Teach This is css Teach <span class="v1">This is css Teach</span> This is css Teach This is css Teach</p>
<p class="y4">this is css teach this is css teach this is css teach this is css teach this is css teach this is css teach</p>
<hr />
<div id="d1"></div>

</body>
</html>

------------------

悬浮图片logo.jpg

0 0