|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
3 J/ G& M9 j# e! c! L2 @" `2 r% a+ k- z9 T3 W
1.基本语法规范
) e ~' R" X, Q% Y E! H; x( ?分析一个典型CSS的语句:
+ B& f* Q+ @" |. U+ M" Sp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
# \. Q" |% i- F其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; + u* G0 D# O- p& U5 U5 V
样式声明写在一对大括号"{}"中;
2 E2 x9 b" n f/ b% xCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
% P: k( ~% v% ?6 Y; G1 }# B: y. z; X3 C) z"#FF0000"和"#FFFFFF"是属性的值(value)。" P- S- x, \9 L- v4 v
L/ `* r+ s1 t8 K2.颜色值8 j* V8 F T1 g( u# H0 ?
! q6 G/ ^$ ~8 t颜色值可以用RGB值写,例如:+ e: q4 j9 e% X
, l5 J x. r' }
- ~* d" v* N" n; u7 h' F,也可以用十六进制写,就象上面例子; I; i; G2 Z* z! e7 A/ |% k
1 S' @$ K& r3 e$ ^
% ~/ W! c, U# Z+ P5 ?
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。3 N* @. O; `& X" S
+ z) {9 K T; M* n, B' c( k6 ]
3.定义字体
( Y n1 \+ g$ b" D0 W6 g4 a# Qweb标准推荐如下字体定义方法
@* r# L8 J4 N% A+ l$ }* a4 G$ J6 v) k9 i
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 2 t, n( S0 N1 M+ p* j7 d" x0 W% ^
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 9 ^; w4 c( s9 c* d, l
Lucida Grande字体适合Mac OS X;
+ [0 d. H- ~; E" E# UVerdana字体适合所有的Windows系统; ; f8 n, U7 q$ ]" L
Lucida适合UNIX用户
! K/ ~+ p) \3 x& v"宋体"适合中文简体用户; " G8 N7 S. Y% u+ Q5 j/ W) V) e( g
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
( _6 F- a$ o' M0 W" [& y3 M% ^$ m/ {* j
4.群选择器
' D, h* `# X8 O, t! M8 V( z9 `9 v
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
8 t4 P3 S9 |5 S. E; ^9 d& p6 \
( [2 o+ W" k1 l" Z8 k1 ~1 i p, td, li { font-size : 12px ; } 5 \' k" |6 {$ A" x6 @( @
就是给li下面的子元素strong定义一个斜体不加粗的样式9 U0 v* ?" E. C8 b
5 K! p. Z$ G2 p6.id选择器
9 h: v n/ Q a* K/ I; D& W( ]2 T; `0 ]4 u3 o( _9 P- W
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
9 C5 z$ G+ N2 }9 |9 M. b$ F/ L, c
; ?6 M& H8 }7 R* `
( E/ g" q) d! y0 j然后在样式表里这样定义:- G8 f: U% f% I+ p5 h
; F4 X C9 {+ ^; X2 Q0 J, \
# {. C% y% x5 t# w% {" O5 u- t
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
! u( ?) J1 g) v8 Y0 j& V其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
5 j8 |2 U! g g7 K+ e
0 u/ W0 l7 r# [( H2 C. Rid选择器也同样支持派生,例如:& ]$ C; o% D+ F7 @- O
#menubar p { text-align : right; margin-top : 10px; } % p* C% c3 f3 D8 A8 q
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。1 \- s0 _: ^0 P1 R
( X) g% x# n j Z
6.类别选择器6 j% q0 J. @% H" l1 `
5 k1 v. w+ h; J" m6 X在CSS里用一个点开头表示类别选择器定义,例如:* \( J' \$ Y; K# L7 q. Y
.14px {color : #f60 ;font-size:14px ;}
: U @! Y3 r& v/ P2 _* {& I* p4 ?3 n2 H
在页面中,用class="类别名"的方法调用:! x3 I6 C, N# q
<span class="14px">14px大小的字体</span> 7 @: |/ H! z; }: Y
; z m S; g) I" S$ c
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
* i U3 o2 g8 t3 A' B; I9 {' L0 P' m# U6 }$ d8 ^
7.定义链接的样式! X3 H. p+ C% _
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
; j2 w5 L- K. ja:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
T5 E" y) z' R* W( la:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
' |# C& W, C7 }6 \a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
0 B/ z7 R$ S# V2 S/ ja:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
/ P' j4 C( i- b7 z! W" T3 i# ~$ [4 N/ E: f( g
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|