|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
5 \5 C4 W1 E; e/ F; L& N, |* m- C ~, { j/ r5 H* m
1.基本语法规范
. Q" e+ q& b, i! B. m) |分析一个典型CSS的语句：: v' i K1 G3 S. f. ]; @
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 2 V# I- j8 S: I
样式声明写在一对大括号"{}"中； $ c6 Y, ` q: {1 i
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
6 i. f" c3 H0 Y- H"#FF0000"和"#FFFFFF"是属性的值(value)。
8 E, o- B0 k4 s# k: @ v. H6 T; n" k3 l
2.颜色值
. M+ g' \" @/ X# X0 t2 B+ C5 ]# g. S6 y
颜色值可以用RGB值写，例如：: X! |7 s! j3 D) V! N2 o& e
' L& W5 j' C0 E
% {- x; T* E* j0 i，也可以用十六进制写，就象上面例子
% Z$ ^) o5 ~4 b* c, t
1 W# [5 Y# N9 N7 p
; ~1 s0 X `3 w如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。 r) n7 J% Q( m" d. G7 F( L3 v
( H- ? Y: C/ H4 |( E3.定义字体
5 V- d4 Z: h( M+ z/ q/ _web标准推荐如下字体定义方法
3 d, v3 K; R0 @, s1 x5 R5 `8 B
8 D6 u6 w9 r: R+ X' Cbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
' S, }! q. G+ L2 i1 \! u% g/ n字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 9 @" E7 r( _$ m/ B, R3 K
Lucida Grande字体适合Mac OS X；
' X: N/ V+ B: M5 R+ N( FVerdana字体适合所有的Windows系统；
) {# ~: U9 ^' b( Z$ w0 N) J' ~Lucida适合UNIX用户
$ U5 M- x3 k& W Y"宋体"适合中文简体用户;
7 e: b; W0 e) p, I+ @如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;' X$ k+ _, D8 x. y
" \! h, y7 h+ G1 b" D" _( c4.群选择器2 J/ K# y( c0 r% C. p1 K4 q
9 d! B0 Y7 y- g) j当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
* G8 B3 i% ~3 s5 p a" }9 }/ k& v' E1 I3 V' u* v* N2 ~1 b; I
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
; D$ j! m% m: V/ e
' N3 c B0 m8 U7 f& a/ G1 \2 L A6.id选择器# c! r% ^# l1 ? p2 S
9 Z5 R; _ u; m& c: ?
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层& w3 I: \* M* ?% x. J
3 C/ b$ Q( O$ A4 v( ]& @ D+ t: r6 `: P; |1 W
然后在样式表里这样定义：
/ c' ~1 r3 }% v& @6 L, T) }- |! c$ z- C. x" {! m" @
& J6 G/ f8 H1 d2 @0 {/ v. m#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
% i; z3 @( S) ?3 j* j其中"menubar"是你自己定义的id名称。注意在前面加"#"号。- f6 B( I1 u. X# A/ y% S, y. ]
9 p& S" R% f$ M$ @" n- C
id选择器也同样支持派生，例如：, P: `0 q! g' \% ?' L- P# P) ?3 H- Y
#menubar p { text-align : right; margin-top : 10px; }
3 t. E, A4 t& c/ }! p这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
2 U+ J. M4 r7 F f: Y
9 }: O4 ~1 T+ m0 N1 s6.类别选择器
/ w% B) V4 i* x+ F2 @; ]" e
* O( W. n3 f7 `7 n% g) F, d在CSS里用一个点开头表示类别选择器定义，例如：! v# y% e; B' z( n& o2 ^( @- s
.14px {color : #f60 ;font-size:14px ;}
3 o2 b& m- V4 P" m在页面中，用class="类别名"的方法调用：
, D6 O4 @" \+ M8 u6 [( _1 P<span class="14px">14px大小的字体</span>
+ [/ z, e6 n( r2 ]9 X& E _
& n' v6 ^ j& ?9 K0 ~3 f这个方法比较简单灵活，可以随时根据页面需要新建和删除。0 Y+ |3 I: D2 X: g+ A5 E, j2 {; U& g2 i' ?
- i7 M3 E$ k( p* s+ e3 f m7.定义链接的样式
3 [' D& h$ J QCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
8 G A0 E7 _* p! Z0 t2 F6 ?; Qa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
: q) R5 N$ [/ z+ f. M* e& Xa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
. E6 C/ l% {$ {% P2 T) E' oa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
1 s( e- z6 w+ X/ ?0 k& e4 aa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
) U9 U ]/ x4 V8 |9 D: K以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
