|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
( O% l" k6 i4 T& _
) f5 L" Y5 n" F1.基本语法规范
) a+ `3 }) C# L2 N分析一个典型CSS的语句:
- q/ j( s0 b; r2 h$ d. w6 Dp {COLOR:#FF0000;BACKGROUND:#FFFFFF} : G8 Z# b& e2 Y# N3 S
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
& Y! | J* g' q' w0 Z% O7 I样式声明写在一对大括号"{}"中;
2 U+ {* F" M1 F; K; r% b% kCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
. {0 b( F" x) c' c; T/ `9 U1 X"#FF0000"和"#FFFFFF"是属性的值(value)。
2 g- V) g8 ]/ V* b7 g! a+ g! F8 W! t8 l( n- V6 e' l9 O" E* h4 Z5 A
2.颜色值
" T Z, o$ u" Y' h7 R* Q- n2 W
. M2 I9 L) Y1 \. n5 X j; R颜色值可以用RGB值写,例如:; t$ D$ o2 f1 T
' v1 d! Z* I; R e
: M9 r/ f( L+ \2 f& f4 s,也可以用十六进制写,就象上面例子4 C" |3 I+ ` R7 Q2 `- N
% C. x+ c5 Y" S9 }1 D" C; r0 X' z+ ^. u: |) f2 K
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。! A- q$ ~, q: w% o
( J# p/ j$ e, f7 \4 `( J
3.定义字体7 O2 B( d0 N0 _
web标准推荐如下字体定义方法
V2 d1 e& y* F) O+ B7 i4 [6 L3 i# ^
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
/ B6 r! F% A4 Z! ?5 r字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 8 m/ T% h, o+ A( n
Lucida Grande字体适合Mac OS X; $ Y' _$ t* ^0 }+ W0 R) O% C4 U- P+ l
Verdana字体适合所有的Windows系统; 0 Y ^* `5 j( h# O
Lucida适合UNIX用户 ! R" o5 l" F+ l7 c' M- a* c" _
"宋体"适合中文简体用户; & S# J3 I% M4 S
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;/ |4 h; z' e% a% C. H. @
. r7 n! s# }6 _8 z
4.群选择器( O9 E2 n- o# [3 |. Z7 O4 G
- V$ o8 M. ]( f+ y6 z, s7 G& z当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:( y, s4 ?" F V4 W
5 c1 f! Q0 B% C Z p, td, li { font-size : 12px ; }
- h3 a# y3 V1 O0 L% q就是给li下面的子元素strong定义一个斜体不加粗的样式" }4 e& T; ]0 l
+ I' ?6 f% W; N/ y+ ]+ f: @$ q3 z6.id选择器
q5 U- X9 i$ `; Y; X$ o3 b; O
6 ^/ k% y" G! K用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
* b* \0 p" s c5 i$ Q5 H
& U5 u# y6 D, E3 T8 i) I& h& e0 O$ |9 Y
然后在样式表里这样定义:
3 [, p; \2 k' p) }+ g+ _( |1 G! r# Y0 b4 S" ^7 H
$ s" O. n8 z) E+ H#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
, C, L! D* F# L" P其中"menubar"是你自己定义的id名称。注意在前面加"#"号。" G& e$ F$ i9 o1 g: e. B
| d; y- w5 r4 v; L" `8 ~
id选择器也同样支持派生,例如:
3 C8 }& O% ~& m#menubar p { text-align : right; margin-top : 10px; } 9 }3 z' N N- m
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。( O" l, }- Z3 N9 X a3 V
9 E4 Z3 q3 I7 C0 U8 i& G6.类别选择器. x! _0 x6 l; i/ I7 o) J
: H: N& ]& K# b( i
在CSS里用一个点开头表示类别选择器定义,例如:, c5 V; V7 w' Q4 X
.14px {color : #f60 ;font-size:14px ;} ! S4 Z' _: N. P8 d
?9 n, b) Z" a' T+ b/ f在页面中,用class="类别名"的方法调用:
5 C; t3 @3 B8 c<span class="14px">14px大小的字体</span>
* n0 a1 b) A! ]4 g4 B; G3 H
1 d0 m% z* o$ Y1 u6 a6 a( i0 R0 @这个方法比较简单灵活,可以随时根据页面需要新建和删除。* g! P) w% |* h+ F
+ b3 E2 b0 I# X1 A& V6 f. n3 s4 ?7.定义链接的样式
1 j3 t6 d! T$ e- dCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:& E9 k$ q% }' [3 J
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}* _0 Q8 ?. e. U
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
! ]2 @/ R& H* v0 U6 C- H& D4 ra:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
% P( \% m# `! T+ V: ?( Z7 Q' {a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 7 e0 R& ^0 t7 k; D3 {
( J* P9 D" E2 }) U' \" i
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|