📄 文字属性.html
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> 我真惨，被用来演示CSS!</title>
<meta http-equiv = "Content-Type"
content = "text/html;charset = gb2312" />
<style type = "text/css" >
<!-- p.song { font-family: "宋体";}
p.hei { font-family: "黑体";}
p.eng { font-family: "Arial";}
p.f12 { font-size: 12px;}
p.f16 { font-size: 16px;}
p.f20 { font-size: 20px;}
p.ita { font-style: italic;}
p.b{ font-weight: bold;}
p.b1{ font-weight: bold; font-style: italic;}
p.lv { color: green;}
p.hong { color: red;}
p.zhong { text-align: center;}
p.zuo { text-align: left;}
p.shang { text-decoration: overline;}
p.xia { text-decoration: underline;}
p.zhongh {text-decoration: line-through;}
a.none { text-decoration: none;}
body { background-color:white;}
/*body{ background-image:url(http://hiphotos.baidu.com/shajulong/pic/item/856b9afbbc1c6f71024f560f.jpg);}*/
/*body{ background-image:url(http://hiphotos.baidu.com/shajulong/pic/item/856b9afbbc1c6f71024f560f.jpg);
background-repeat:no-repeat;}*/
/*body{ background-image:url(http://hiphotos.baidu.com/shajulong/pic/item/856b9afbbc1c6f71024f560f.jpg);
background-repeat:repeat-x;}*/
/*body{ background-image:url(http://hiphotos.baidu.com/shajulong/pic/item/856b9afbbc1c6f71024f560f.jpg);
background-position:center; background-repeat: no-repeat;}*/
body{ background-image:url(http://hiphotos.baidu.com/shajulong/pic/item/856b9afbbc1c6f71024f560f.jpg);
background-attachment:fixed;background-repeat:no-repeat;}
.w1 { list-style-type: circle;}
.w2 { list-style-type: square;}
.w3 { list-style-type: disc;}
.y1{list-style-type:decimal;}
.y2{list-style-type:upper-roman;}
.y3{list-style-type:lower-roman;}
.xing{list-style-image:url(http://img.ganxiu.com/data/i2007/4eda67e2e869e040.jpg);}
/*块级div*/
/*.box {
background-color:#EEFAFF;
width:30%;
float:left;
}
.boxhead {
font-size:14px;
font-weight:bold;
background-color:#AEC6FD;
text-align:center;
width:100%;
color:#FFFFFF;
}
*/
/* 盒子*/
.box {
background-color:#EEFAFF;
width:30%;
float:left;
border:1px solid #000000;
}
.boxhead {
font-size:14px;
font-weight:bold;
background-color:#AEC6FD;
border-bottom:1px dashed #000000
text-align:center;
width:100%;
color:#FFFFFF;
padding:5px;
}
/*相对定位*/
.dingwei {
position :relative;
left:50px;
}
/*绝对定位*/
p{font-size:24px;
font-weight:bold;}
.dingwei1{ position:absolute;
top:35px;
left:35px;
color:#FF0000}
.dingwei2{ position:absolute;
left:50px;
top:50px;
color:#0000FF;}
#nvbar a:link{
color:#FF0000;
text-decoration:none;
}
#nvbar a:visited{
color:#333333;
}
#nvbar a:hover{
text-decoration:none;
color:#FFFFFF;
background-color:#0000FF;
}
#nvbar a:active{
text-decoration:none;
color:#FFFFFF;
}
.rightbox a:link {
color: #003366;
text-decoration: none;
}
.rightbox {border:thin #0000CC solid;
margin:10px;
padding:20px;}
.rightbox a:visited {
text-decoration: underline ;
color: #000000;
}
.rightbox a:hover {
color: #FFFFFF;
background-color:#000099;
}
-->
</style>
<body>
<p class = "song">我的字体是宋体</p>
<p class = "hei">我的字体是黑体</p>
<p class = "eng">My font family is Arial.</p>
<p class = "f12">我的像素是12</p>
<p class = "f16">我的像素是16</p>
<p class = "f20">我的像素是20</p>
<p class = "ita">我的像素是16</p>
<p class = "b1" >我的像素是20</p>
<p class = "lv">我的字体是宋体</p>
<p class = "zuo"><span class = "lv">我的字体是黑体</span></p>
<p class = "shang">上划线</p>
<p class = "xia">下划线</p>
<p class = "zhongh">中划线</p>
<p><a href = "http://www.xiaonei.com/" class = "none">我是一个连接，但没下划线</a></p>
<ul class = "w1">
<li>无序列表项目1</li>
<li>无序列表项目2</li>
<li>无序列表项目3</li>
</ul>
<ul class = "w2" >
<li>无序列表项目1</li>
<li>无序列表项目2</li>
<li>无序列表项目3</li>
</ul>
<ul class = "w3">
<li>无序列表项目1</li>
<li>无序列表项目2</li>
<li>无序列表项目3</li>
</ul>
<ol class = "y1">
<li>有序列表项目1</li>
<li>有序列表项目2</li>
<li>有序列表项目3</li>
</ol>
<ol class = "y2">
<li>有序列表项目1</li>
<li>有序列表项目2</li>
<li>有序列表项目3</li>
</ol>
<ol class = "y3">
<li>有序列表项目1</li>
<li>有序列表项目2</li>
<li>有序列表项目3</li>
</ol>
<ul class = "xing">
<li>无列表项目1</li>
<li>无序列表项目2</li>
<li>无序列表项目3</li>
</ul>
<div class = "box">
<div class = "boxhead">我在div内，类为boxhead.</div>
<p><span style = "color:red">我在div内,也在span内。</span></p>
<p>我在div内</p>
<p>我在div内</p>
<p>我在div内</p>
</div><br />
<p>我不是人！</p>
<p class = "dingwei">我本来是人的，不过由于relative的存在我变成了神，可以自由飞向右面50米距离</p>
<p class = "dingwei1">CSS</p>
<p class = "dingwei2">绝对定位</p>
<a id = "nvbar" href = "http://www.xiaonei.com">校内网</a>
<div id = "nvbar"><a href = "http://www.xiaonei.com/">校内网</a></div>
<div id="nvbar">
<p><a href="http://cainiao8.com/">菜鸟吧</a></p>
<p><a href="http://bbs.blueidea.com/">经典论坛</a></p>
</div>
<div class="rightbox">
<p><a href="http://bbs.chinaz.com/index.asp">中国站长站</a></p>
<p><a href="http://www.im286.com/index.php">落伍者</a></p>
</div>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -