我爱电脑技术论坛's Archiver

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

使用不同的CSS写法-CSS进阶

CSS的写法可以用以下的几种方法实现:
` F#Z1fOL x1rZ$FL     (1)使用Embed(嵌入样式单)排版样式:
-Fp5sW7Xe K,d$X!L LU"H6Zz0n1d
    即将CSS代码直接插入每个页面的HTML的<head>区,就象上一节看到的。使用<style>...</style>标签。例如:4q&sf8J*{
"CNG Ku S8K
<style type="text/css">
^5dA@5PmK~ <!--%aC$o1^(a+C
h2 { font-family: "宋体"; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC}
*e yV6vKY8O5wo h1 { font-family: "Arial"; font-size: 12pt; color: #66FF66}
_0?5_.Oi7k j2h7F0joa -->
A_6HHy-p'S{8F </style>
C] x:N4B+XC iOK8w6iQ1jx4?J
    (2)使用“link(外部样式单)排版样式”::r&O+}q1M}pS
#FW'C"xu2^
    即你可以将多个页面的排版风格都用一个样式单文件控制。这个外部的样式单文件(一个扩展名是css的文本文件)将设定你所有网页的规则。如果你改变样式单文件中的某行,所有页面风格用这个css文件定义的页面都会随之改变。如果你的站点文件非常多,则这项功能就非常方便了。
7@pu S Nd d"\ *og7V!Z2QrF
    在<HEAD>区内使用<LINK>标签(注意:不再是<style>标签了): OOzm ZJ#d6?
k:b~.{5d/m1w,u
<HTML>
g&{*uiK+RH.A <HEAD>-}+l|-^v-bH
<LINK REL=stylesheet HREF="http://yoursute.com/my.css"; TYPE="text/css">
O Z+X)t2w:[)pX </HEAD>5B#TiM!ww
<body>
6v7MW1E`/R u} En <h2>你好!朋友,欢迎光临Java2000的教学区。</h2>
R#mx+d9\T:g~j*L <h1>Hello,everybody,welcome in java2000 !</h1> m CgyoFw
</body>ZC'o u:W]n
</html>
(M:P^R5c.K2w2F9_
}Wt:Nwz     ★☆★说明:css文件的路径用绝对路径http://...)表示或者用相对路径(例如:../csscode/my.css)表示都可以。W|fNM1L.Z7t
Wc s0J)m1BW
    然后再单独生成一个css文件,叫做my.css (随便起名)。文件内容如下: ,Bn`b*R i{? eX
"?$O_.d'tJ
h2 { font-family: "宋体"; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC}
"\x:X]CW8t7WjM h1 { font-family: "Arial"; font-size: 12pt; color: #66FF66}c/H [h on

0L'M5Bj2V4YWg%c8mGl     只要将这个CSS文件上传到服务器指定的目录即可。Q J?a[C-~.du6T

!F o/r!E$d1x%N9Gi`     (3)使用"inline(行内样式单)排版样式":
-O Zl K0B ]/t
^u'Q*@8C{8p2vc     inline样式单采用HTML标签的“style”属性,它的特点是“定义某一个标签的式样单风格”,只对所定义的标签起作用,并非对整个页面起作用。例如:Hm:FJ'~

,x3Fc&{K$l| Oa <p style="font-size: 14pt ; color: #99ff99 ; font-family: 宋体">层叠式样单</p>8s#|-m G]1f&qI+I1lU
~C&u L[:jc-Z.jR
    看到的效果:RWiH#|e]V
;It u[m8d3Ln|B
    层叠式样单
&_C6{X5u9N`GTC9G
nm1Yy"?     使用行内样式单,你必须为每行指定样式规则,否则下一行时浏览器将使用页面的缺省设置。 但是:有时候这种方式却非常有效。
r:I;aEf9D ,hz_i-?SQ^$w-\)x
    (4)使用“import(输入的外部式样单)”--适用于IE浏览器。
\ y m CI ^`!d(D!l Y 'Ur9VBFW1d
<html> u1TIx9F$D
<head> c`f_?SK
<style type="text/css">
tN B\Qto${v\.CN2D <!--)a1xA"NZ u1r
@import url(my.css);
$G.x*zqlT -->
}6VtRNd4mYo </style>
r |\0F2U;\ I,V </head>
h NlFVB8XZ <body>
KZc?T/y <h3>输入的外部式样单</h3> )} S'jcM BQME
</body> ?aei j$}M M
</html>
yt$Ax8B_1@ :R*h Cn S b
    其中my.css样式单文件的内容如下:
bMW:O$l !yZF;UW4Z
h3 { font-family: "宋体"; font-size: 12pt color: green }

页: [1]

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