我爱电脑技术论坛's Archiver

麦迪 发表于 2008-1-20 19:44

关于CSS中的类-CLASS

先看一个简单的例子:以下是常见按钮,使用“类”控制字体的按钮是不是漂亮了许多?而没有使用“类”控制的按钮的字体看上去就有点变形?本例使用9pt大小的宋体字控制的。 q-u.dBx8}7F-[
"C X|1eH
  "@1@t!g@K'j7Vfx
    这是“类”的一个用途。
;Q:hH$X2ng:I'@9C %S]N$V9Tdq(yW
    奥秘是这样的:
ib0Ry,[(B(yn
o/Y;E;[t7M{     先定义一个“类---class”:
l`&H2zvDO'D9c-Z8i
Pe{!F"_wZ <style type="text/css">$H1a2p-X0O B(x
<!--
Q9G Fi!C)s j!Zl .pt9 { font-family: "宋体"; font-size: 9pt}
6DDbB4O%r1u} --> QFH i _m
</style>L*mI#Mb6b4`7jjo
TY6tx1e(q:_
    这里“类”的名字叫做“pt9”,前面有一个“.”。"v-B9tS5|!R T
;Dm8e8I3m
    然后在HTML中加上class="pt9"即可,如下:E2b4x`7^ t:t

U+tC3BM4bs6flLWG <form method="post" action="...">
9p[]B ?f&n$f2A <input type="submit" name="Submit" value="使用了类的按钮" class="pt9">
yc+x l)aV </form>
F~3{iM _ #_{NX9T t
    是不是非常简单?Q-mFA*I(M.R
$XS;D5k)teDpr
★☆★再进一步看看-- 一个标签可以定义数个“类”。yn%~+^5?.}p{Q#@3fG
z K9a h&A}
P.green { color: green }
/` oPRy7v P.yellow { color: yellow}
kD.}1F`v P.red { color: red}
X.blb@Y3l9M%e
8WHF(w`[ QYg 在HTML中,这样做(只要引用相应的类就可以了):sj'~ H1EP3b
5pl/c] g'W

8jt}#_-Jj,A-gi <P CLASS="green"> 绿黄色显示的字符 </P>tP;vJI,QD^1]/L1`:b*f
<P CLASS="yellow"> 黄色显示的字符 </P>Set~S8Q0Ut
<P CLASS="red"> 红色显示的字符 </P>
^Z.XDn,YX.T
%BxO;P$@&v0PB;l A 显示的结果如下:K~X2r-NiH+N
MC(ap:ek&p
绿黄色显示的字符
#[,Q(ciu y*QF u&?-I*xY?5th
黄色显示的字符
-xc^IV Hp-p R "q.I*z;~K!z%B&I!Q
红色显示的字符

页: [1]

Powered by 我爱电脑技术论坛 Archiver 6.1.0  © 2001-2007 本SEO插件由网络人站长论坛出品