|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。' }' z* F+ B1 F
2 B) O* o0 r) a" m& G! |. a
1.基本语法规范" m- c3 O$ b( S' B, I
分析一个典型CSS的语句:' \5 R3 m# y" H6 c( i# U/ X, E+ W
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 8 F& b4 L, T3 _& ^
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 9 a# z' a+ E% X" n% i# k
样式声明写在一对大括号"{}"中;
/ q6 Q$ Y# X" mCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
1 G$ l# W# l( X' M& G0 z' h/ e"#FF0000"和"#FFFFFF"是属性的值(value)。
/ A. |' t8 `1 Z, [& z/ x
! u* s# g8 a: U7 m2.颜色值" V7 c. T/ g2 f, _* r* l5 X
: d( ~: R$ g2 j" ]
颜色值可以用RGB值写,例如:
, Z3 a$ K% Y1 o: x+ I& b# p: r; F8 m! d6 Z) a9 g
0 U" D0 j0 y% \% W# D4 A; k" L,也可以用十六进制写,就象上面例子
* ^3 `7 ^. i& [9 b8 v$ U o6 B8 }
' F5 }* O( ?- e- t! ]& G
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。7 z* ]( m( U p1 G
* v7 Q R/ `7 r0 @6 P+ ]! X3.定义字体
" A7 R* |: S3 R4 `: Oweb标准推荐如下字体定义方法
& [% P* I% S6 |/ ~4 |1 s
/ z. v/ R( a& b! @% G- h; J! Lbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
6 m9 I# a3 c. M7 v3 e7 R& N字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 9 _( v3 X2 K6 d B- B1 f: b
Lucida Grande字体适合Mac OS X; / F4 v% E1 Y/ i4 ?
Verdana字体适合所有的Windows系统; 6 h$ |0 g0 z! r# ^3 ~4 Z0 \ T+ z
Lucida适合UNIX用户
5 l/ {% C9 h$ G& ^5 C"宋体"适合中文简体用户;
- m: A# n2 U3 {6 ~5 M3 S* G% d如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
0 Q; d4 O; R& q# k, ~! [2 B& r& T4 ? y' G
4.群选择器! @" P+ v- b+ J p: a6 ?; D
' @2 ]% W! u6 h+ O( @5 i8 S+ _当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
/ T: T6 k+ B0 @8 A! J- w) Z9 M
A2 D) }0 v/ ~. N) F0 p) c4 V p, td, li { font-size : 12px ; }
1 i2 I. L& ]$ F; ]就是给li下面的子元素strong定义一个斜体不加粗的样式; x9 y3 Z! A- a7 b8 p2 b+ M
# w ]9 j- ?- H9 n; g# Y1 b
6.id选择器. q9 L ~" j9 ?5 S
8 u1 d$ x9 C* Z8 g用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层" s5 B) s9 P( T' T* g4 d
8 b# v6 j/ e4 j6 K/ d- B
; D8 U4 `- n% [0 i9 a
然后在样式表里这样定义:
' B: \ q* _( n) G- l0 q! [7 U4 D7 e( ]7 [
" Z2 \. r% J; b8 o# s" G1 \0 y o
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} , V, j3 V; r3 f" Y% O
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。& y* s; J) |% D( a! G
4 h8 U @: E6 l+ `) o
id选择器也同样支持派生,例如:) |/ ~, r# i" { g, O2 y% @
#menubar p { text-align : right; margin-top : 10px; } 9 p2 o& ]( d' X' o7 o, Q6 \" `, K
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。5 Z* X4 G: o1 |
: S8 O4 s5 h. W& O6 p
6.类别选择器
- ^. D5 c1 D1 P+ C n% r8 `0 F0 {; `+ S1 h/ s% l/ b
在CSS里用一个点开头表示类别选择器定义,例如:
9 e8 z$ }6 B7 \; o. P.14px {color : #f60 ;font-size:14px ;} 1 A/ {$ ]3 S5 ~% Q2 Z" G6 X
) c9 T9 s* `) S+ A9 _4 E在页面中,用class="类别名"的方法调用:6 T$ m- ^) ~3 C* v; G* @5 x1 R- W
<span class="14px">14px大小的字体</span> ! I# o1 g. q& d0 w7 R
3 t1 \; E+ p- w% I2 o
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
/ A' @4 z' D8 _' m8 |7 q. I2 {3 M) T8 X6 X
7.定义链接的样式
8 u& x: ?$ b! t3 g6 HCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
: S: l. p' g" ]" R7 Wa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}! ^$ N3 J- u, W' `1 A$ D
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
" z) e3 H Z4 F" o4 u& E( xa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
+ t# m; S' L8 i/ Q6 B: fa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
7 |7 c2 Q: D. p6 ]* p1 N! O' }) I& o( }) u3 H) F. R% d+ C j6 g
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|