|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
) f- u$ }8 }7 M% z: q0 @ Z
$ L! O( r5 b. \0 V1.基本语法规范
4 ]) B2 S' F7 r# R. p! j分析一个典型CSS的语句:
. S' ^6 i; _( i. @2 Bp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
$ ^/ }7 R) ?# K& J5 J4 B+ a其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
R' c) j5 |9 j! r样式声明写在一对大括号"{}"中; * l0 o' Z' E( x- M0 _
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 5 g& S. ~$ U% `% H
"#FF0000"和"#FFFFFF"是属性的值(value)。0 D; T8 h" { x
9 @, i, m; F7 ~( h& y' e/ v3 m0 t
2.颜色值
) H0 C+ T$ \$ ?
* g& K: q F# U( A颜色值可以用RGB值写,例如:0 u& \6 y( n* ?# A9 O8 V2 h! N, `
5 Q1 d% N0 {% l6 [
- _, l9 V, i* J,也可以用十六进制写,就象上面例子
, _& \* {7 t z) j3 S0 @- e" S( J! S9 E% Y; g, O6 n
" m. x+ } y. s如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
( v. E+ c/ F( |1 m# P3 N% q/ p% Z6 d
3.定义字体$ |! P( X% |0 H( e+ ] p: ^; v
web标准推荐如下字体定义方法; z/ q! j% L5 x; m
6 L2 e/ \% w7 c3 J6 a$ G) g* Kbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } # h4 N, K# U' X
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; ) U$ A, {; f& ?7 t
Lucida Grande字体适合Mac OS X; 8 Q4 `* j& f P+ A2 r
Verdana字体适合所有的Windows系统; % d; e! l$ s+ c9 D
Lucida适合UNIX用户
* M" X; ~7 q: y0 b, `' C4 N) d"宋体"适合中文简体用户; 9 n9 t4 L5 ^5 f* ]$ V
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
+ ~) Y, K( T% V+ H( ?: ~9 M* p
" `7 l8 k/ m( K3 |! d# b" r% i- I* B6 x4.群选择器
, Q, t9 Q$ s; Z. h+ C8 f2 E- E
& j# O7 y6 X2 }; K当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
. O+ k0 m! P2 o' f, N( r! Y: e- z3 a& ~3 [
p, td, li { font-size : 12px ; }
+ J U2 V7 m& t就是给li下面的子元素strong定义一个斜体不加粗的样式
' H: G) ^" |6 V6 S- g' X& t; m, c/ W3 c% c5 U5 [4 J6 t
6.id选择器6 M8 C& ^1 B. x- I' n X
& b4 k$ x5 |) [5 S
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层0 Q1 H/ A+ j( F2 i0 }: K- D
" \- t% a% K$ y8 t
( O2 N; d, c3 N9 `8 O7 q3 X! a然后在样式表里这样定义:
( m3 M9 N: f0 L" y
- X: F9 V8 O5 w1 g0 v8 h7 i; |+ s( L% k6 D# X# _ @; `% S
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 9 W z( h- i7 O/ F# ^. p' o; A+ y
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。& N0 G7 n0 q4 P q [- L6 \# W) h
y9 {2 D1 {9 j2 ~; S0 N) i# w
id选择器也同样支持派生,例如:
5 C2 o3 |7 V8 T+ `# n& R, H' r#menubar p { text-align : right; margin-top : 10px; } ) c# [- X) ?: a. D
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。, K! u% d- o2 j
/ [+ S, |. ~1 @4 J
6.类别选择器
! e2 z, V' G: ]! Z! D+ f4 B# g' {- _; p a) J
在CSS里用一个点开头表示类别选择器定义,例如:% L6 E, B5 r. S7 B( B0 h
.14px {color : #f60 ;font-size:14px ;} 1 S" [" R: s- @/ W- {
; h. a4 r' Y& H2 ]% Z2 u在页面中,用class="类别名"的方法调用:
9 v5 `# L' q3 G- Y<span class="14px">14px大小的字体</span>
s; y8 G _5 `! H8 R" F+ w( b3 r* V6 m6 F2 Q
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
7 k h4 [( s4 q3 I( R" q4 k) U& [+ {" ^$ A( z% P2 D3 F
7.定义链接的样式 N# O4 g$ g1 N
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:0 d0 p8 z' b' M0 {0 F: ]( l2 L
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
# f: \* @7 Y D2 r+ Va:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
- V4 {5 G7 n9 m' {a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
/ _% c- Z& \, o5 ?( [a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} - q5 Z0 ]& r/ w$ f
# j# Y- d% n0 m f6 d- Q0 y% e$ c
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|