本文详细介绍了CSS中各种文本样式的定义与应用，包括字体大小、颜色、阴影、背景色等基本属性设置，以及如何使用滤镜实现如发光、阴影等特效。通过具体的实例展示这些样式如何被应用到实际网页设计中。
HTML <style>中一些常用的定义格式
<STYLE>
p { line-height: 180%; font-family:微软雅黑; TEXT-INDENT: 2em }
.s1 { font-family:微软雅黑;}
.s2 {color:silver}
.s3 {font-size:24px} size3(12pt磅), size4(14pt磅)
.s4 {font-size:150%}
.s5 {background-color: black; color=white}
h2 {font-size:2.5em;} /* 40px/16(em)=2.5em */
</STYLE>
<body bgcolor="#000000" >
<p>The font-family value of the text is the browser default font.</p>
<p class = "s1">The fon-family value of the text is "Arial"。</p>
<p class = "s2">The fon-family value of the text is "Tahoma"。</</p>
<p class = "s3">The fon-family value of the text is "Courer"。</</p>
<p class = "s4">The fon-family value of the text is "Verdana"。</</p>
<p class = "s5">The fon-family value of the text is "Book Antiqua"。</</p>
</body>
样式一： body
{ margin: 0px;
padding: 0px;
margin-top:12px;
margin-left:1px;
width:auto;
width:94px;
height:36px;
float:left;
line-height: 18px;
line-height: 1.5em;
font-family: "Times New Roman", Times, serif;
font-family:"微软雅黑","黑体","宋体";
font-size: 14px;
font-size:100%;
color:#4e4e4e;
background: #f2e7ca
background-color:#E7EAEB;
display:block;
text-decoration:none; }
css规定字体样式大全
字号：<font style="text-decoration:line-through">刪除線</font>刪除線
<font style="background-color:#ffddff">加上背景色</font>加上背景色
<font style="filter:fliph;height:10pt;">左右翻转效果</font>左右翻转效果
<font style="filter:flipv height:10pt;">上下翻转效果</font>上下翻转效果
<font style="font-size:9pt; filter:glow(color=#4a7ac9,strength=2); color:#ffffff; height:9pt">发光文字效果</font>发光文字效果
<font style="font-size:9pt; filter:glow(color=#ff0000,strength=2); color:#ffffff; height:9pt">发光文字效果</font>发光文字效果
<font style="font-size:9pt; filter:glow(color=#ff0080,strength=2); color:#ffffff; height:9pt">发光文字效果</font>发光文字效果
<font style="font-size:9pt; filter:glow(color=#ff8000,strength=2); color:#ffffff; height:9pt">发光文字效果</font>发光文字效果
<font style="font-size:9pt; filter:glow(color=#008080,strength=2); color:#ffffff; height:9pt">发光文字效果</font>发光文字效果
<font style="font-size:9pt; filter:glow(color=#0000ff,strength=2); color:#ffffff; height:9pt">发光文字效果</font>发光文字效果
<font style="font-size:9pt; filter:glow(color=#8000ff,strength=2); color:#ffffff; height:9pt">发光文字效果</font>发光文字效果
<font style="font-size:9pt; filter:glow(color=#000000,strength=2); color:#ffffff; height:9pt">发光文字效果</font>发光文字效果
<font style="font-size:12pt; filter:shadow(color=#4a7ac9,direction=135); height:19pt" face=verdana color=#ffffff>投射阴影文字效果</font>投射阴影文字效果
<font style="font-size:12pt; filter:shadow(color=#ff0000,direction=135); height:19pt" face=verdana color=#ffffff>投射阴影文字效果</font>投射阴影文字效果
<font style="font-size:12pt; filter:shadow(color=#ff0080,direction=135); height:19pt" face=verdana color=#ffffff>投射阴影文字效果</font>投射阴影文字效果
<font style="font-size:12pt; filter:shadow(color=#ff8000,direction=135); height:19pt" face=verdana color=#ffffff>投射阴影文字效果</font>投射阴影文字效果
<font style="font-size:12pt; filter:shadow(color=#008080,direction=135); height:19pt" face=verdana color=#ffffff>投射阴影文字效果</font>投射阴影文字效果
<font style="font-size:12pt; filter:shadow(color=#0000ff,direction=135); height:19pt" face=verdana color=#ffffff>投射阴影文字效果</font>投射阴影文字效果
<font style="font-size:12pt; filter:shadow(color=#8000ff,direction=135); height:19pt" face=verdana color=#ffffff>投射阴影文字效果</font>投射阴影文字效果
<font style="font-size:12pt; filter:shadow(color=#000000,direction=135); height:19pt" face=verdana color=#ffffff>投射阴影文字效果</font>投射阴影文字效果
<font style="filter:dropshadow(color=#cccccc,offx=3,offy=3); height=1px">阴影文字效果</font>阴影文字效果
<div style="width:80px; height:19px; background-color:#cccccc">
<font style="filter:dropshadow(color=#ffffff,offx=1,offy=1); height:15pt" color=#000000> 雕刻文字效果</font></div>雕刻文字效果
<div style="font-size:14pt; filter:wave(freq=17,strength=3,lightstrength=1,phase=0); width:125px; line-height:15pt; font-family:verdana; height:20px" align=left> <font color=#ff8000><strong><b>扭曲文字效果</b></strong></font></div>扭曲文字效果
扫一扫
6916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
