|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
, R; b9 C& }1 l+ N1 b' N
" k. _' L6 Z! c: l2 ~2 n' |+ n1.基本语法规范5 E" O0 s( J" x1 ^
分析一个典型CSS的语句:
( i" B+ g: i% v7 b5 Jp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
& M6 n: _& M# i3 f+ n; S其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
+ g& R; f- W3 x" o& n E. r样式声明写在一对大括号"{}"中;
n, u* `# u7 a7 t) XCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 2 r5 B* l. W* o- N# `3 ?
"#FF0000"和"#FFFFFF"是属性的值(value)。: g# n- w: O5 ~( n& H7 @) p
, t: [: ^! l( C! o3 z3 _
2.颜色值, A' n; f6 ]" d3 F
3 G( E7 v6 o4 I' Q h) ~颜色值可以用RGB值写,例如:
( U* A7 L/ @. x+ o! Z( ?+ }; E3 J; P2 M
# b& ]4 ?8 U0 V* c8 r. D# K0 c
,也可以用十六进制写,就象上面例子- D% o3 f9 r$ F) a5 H' z
$ }" x6 C0 `& H
) ?' T) R: D6 t! {/ }6 W如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
; D4 Q8 d8 a% `6 {
1 T3 }6 L h) _0 C7 y3.定义字体/ j" B ]/ F$ V. _7 y3 W
web标准推荐如下字体定义方法6 ]4 r" p1 ^1 R& y0 x% t# t2 _
2 g* e, u; V8 v
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
6 V8 u* W2 t& k4 j5 F, ]3 D字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 6 m: \7 V1 P- u2 Q
Lucida Grande字体适合Mac OS X;
. f1 O" U# t a u9 O2 N1 Z( y2 yVerdana字体适合所有的Windows系统; 8 G. W+ `' g) C0 N) `
Lucida适合UNIX用户
& ?5 M4 j( P! e* e: t"宋体"适合中文简体用户; # ]$ [- @% c3 b
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;" j- b2 w0 J+ J/ H3 u. o5 C5 w4 L! l/ s
I C7 P& i; i- D1 P9 X4 u* E/ {
4.群选择器
( ?9 T6 P' |' M; z3 R; u/ t p- u# E1 [
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
# @" d; K0 q% x( T" ^# O0 O
5 Y0 L2 X& Z9 n% a p, td, li { font-size : 12px ; }
% ~, H E5 s$ j8 Y" q! s1 e就是给li下面的子元素strong定义一个斜体不加粗的样式; i9 B3 K, k4 ~5 e( W- U3 N
9 D1 X5 G" q# \3 H
6.id选择器" x! e/ @$ w/ E$ y! ]' M) \8 u
6 r, x) d$ r1 c. c8 I& @( C, n4 g用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
* T" {$ |+ a% P0 g+ p4 K B; z p' Y! ~5 P" \+ d6 ]
- d% {2 e6 t, H3 D6 C }5 Y然后在样式表里这样定义:/ [9 {6 ^' J( W: A* m7 \, a3 w' L
5 W1 I7 i8 g5 `- M+ D0 g
* x! g( V) F& T1 I3 I; z6 X* s5 j
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} ; V* D5 p$ U9 m
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。# s8 t) K+ c; y) l- |* c) \( w
, Z: `. o1 X. l( l; {# `. Sid选择器也同样支持派生,例如:
0 a) J7 b& z& u: @( W( f#menubar p { text-align : right; margin-top : 10px; } 8 F% e/ H6 u# n. ?7 k: u/ U0 e7 D
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。* _/ b, t1 D" d' [4 i
4 b% a5 r# k& ]2 q6.类别选择器9 P. ?' V, h; |( g+ F! N& u! y
# v6 e' e- A8 O9 Y! q% ~. Y3 w7 u9 @1 ~( F在CSS里用一个点开头表示类别选择器定义,例如:( w E' o: o# K U6 r
.14px {color : #f60 ;font-size:14px ;} 1 V" Q; p$ |6 V2 _2 Y$ C( ?
( ?$ v2 Q: |7 U( K6 [ C
在页面中,用class="类别名"的方法调用:
+ a7 n9 X: D& u, @4 {<span class="14px">14px大小的字体</span>
# {0 a: y2 D4 Y+ z- @
$ v Y3 H( b, g; T: F( M" l这个方法比较简单灵活,可以随时根据页面需要新建和删除。
9 A9 p) S% K; T% S
) D1 Y: L: U" f& |; f0 I L# D+ s7.定义链接的样式* N9 E+ l2 s0 V+ Z5 a3 C
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:1 C7 I% p% L- m3 ^" r; O# i% f6 c4 R
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}4 A: K5 r5 i0 N N
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
+ X* V) M4 O% m" P& u. p! P: xa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}+ F. v6 f X$ z: s% z& |) A: S
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
8 D6 K1 W6 Z6 F% {& Y8 R
( X9 c" ~- e' H/ h以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|