|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
8 O# i `& o0 E; K M( I' Y' \: y3 ^7 ^3 ~1 B$ [
1.基本语法规范
6 i& b# U6 @2 L* l分析一个典型CSS的语句:' M( o5 [/ p- q6 ~
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
$ a9 f/ J5 H8 w+ b: h4 ~. b, g其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; * ?2 u* I8 W) P; C9 |
样式声明写在一对大括号"{}"中; # e8 Q5 X+ B4 u' G+ I8 Z2 `6 P
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; ' q3 [8 L6 r( s! h1 E6 q8 d
"#FF0000"和"#FFFFFF"是属性的值(value)。, j4 O+ ~6 Q( h, |3 f( ~: }
, A L8 }1 i' h0 ?! a
2.颜色值
! F0 m# G% L+ f$ Y \/ ~
; ]' U% }" v w7 v颜色值可以用RGB值写,例如:
" h K1 z" M% K& w# h3 r( o) F# a% M9 ?. J3 f
9 S, t7 V& t0 S* i+ O" T,也可以用十六进制写,就象上面例子& f5 C* \# @3 `6 c9 v
0 a4 S: |4 S2 f7 d8 r
0 X6 Y5 Y" k @% f& f9 i
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。) Z- j* a" I8 d. I
, L/ i! t8 B3 z$ _6 F
3.定义字体6 k$ G& u9 `. J
web标准推荐如下字体定义方法
- h6 w( c' \2 \, ?: y* ~5 x5 h5 |* l/ @
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
0 Z, p! c" ~ f& c0 a% r字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 6 a* w0 S6 j8 x+ W2 X& c1 b H: R
Lucida Grande字体适合Mac OS X;
) ~+ G4 D- F$ v: |# VVerdana字体适合所有的Windows系统; 8 c' l9 I7 B% G+ s1 ]
Lucida适合UNIX用户 " x8 \# n3 ?9 x6 K& j( ^) g1 Z
"宋体"适合中文简体用户; , q2 e% E {! Q" v. }
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;( ?: a# B! ~' p' U
( R! r3 c9 L9 e
4.群选择器
2 W: x( r8 l, u: }7 b0 z
8 L& b' v2 {3 t/ w" [. R8 f当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:" p$ m$ e5 D: H$ o6 J( \+ P
! D D0 V+ z+ i6 w+ v p, td, li { font-size : 12px ; } 5 O" N J3 f& [5 G
就是给li下面的子元素strong定义一个斜体不加粗的样式
0 m+ v& { I' ?! d% y2 F6 L( t5 f: R: V2 W5 _
6.id选择器8 A! ^/ o# y9 f1 T$ U" u5 M
2 Y' e5 W5 t% `8 v. h+ x2 q用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
* O* u& d1 Y8 f
6 n- Y" ^2 X% I8 Q% Z) L2 z8 G0 N) b* S! B: |! ]- Y9 p: \
然后在样式表里这样定义:
. A2 L2 ]* c) }, p) K; G
# a( f. I+ G$ H4 s1 t" z* |+ _* [5 q9 [( N9 L. C
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
& _9 i# v1 W" K5 o+ P7 i其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
6 G1 X/ y: ^- N1 w0 r6 p0 U! O- `4 s! {4 r
id选择器也同样支持派生,例如:
) P5 N0 }- ?% c2 x: M1 @; d7 w#menubar p { text-align : right; margin-top : 10px; }
* a i1 `% M1 X F4 y' g这个方法主要用来定义层和那些比较复杂,有多个派生的元素。) V$ t2 h u* i, P' z: S& H; K% }. T
- V4 S, V. k' V2 S
6.类别选择器
& O+ ?" q+ s1 `& ~) @
, ~: \6 Y0 [- }8 M& M9 I5 [; I在CSS里用一个点开头表示类别选择器定义,例如:! Z1 `. ]& H+ ^) B p2 M9 d8 Y
.14px {color : #f60 ;font-size:14px ;}
; R) B1 ^4 W: m0 C! W: ^, u# \! e8 F9 A, o6 B6 i# {' H
在页面中,用class="类别名"的方法调用:
% k6 e ?3 e# r+ d8 [; h) j: K/ q<span class="14px">14px大小的字体</span> 1 }# f& w, ~0 y6 _0 c+ A
0 q- O9 M6 U$ H, Z* ~6 e这个方法比较简单灵活,可以随时根据页面需要新建和删除。
2 [& e& n9 k1 E! A* q* ~- n. o) m8 ?% G& y( b' }$ ~8 |/ U8 N. @3 a
7.定义链接的样式
6 ?( V. `% G% l0 O* G- [% E( ACSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:3 w3 D, O" p8 |7 v3 J0 q3 s% X4 U
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
/ h2 E7 j8 Y) r! s5 W4 ^% ia:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
$ m- k0 ^$ W9 B. B7 q9 y6 Q, Sa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}* m. x( T. Q# l: w
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
3 t7 U# W3 V9 C/ G
/ s- S. C$ R- [" p2 _以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|