|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
! d* A; E3 t, _3 U( Y% p! n5 n( U6 O |/ h8 C4 F
1.基本语法规范
) s5 ?5 ^: l- r) }分析一个典型CSS的语句:' J1 g) a+ v! v% C+ z7 ~
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
6 i% O/ p0 E, e8 L" i8 K: p' }0 w# T其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
; U5 [! ]) _! ?/ k$ m样式声明写在一对大括号"{}"中; - ]& {, n. t z* n* p
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
, }/ i j% H! ?2 w( [; [# y Q"#FF0000"和"#FFFFFF"是属性的值(value)。
& v7 x2 w, R( N! w# ~1 u( |. P4 X1 l8 I& y) P0 N
2.颜色值3 s( }& \ o/ m6 X: T* T
" i& e$ [3 p2 K( w3 y. P* d
颜色值可以用RGB值写,例如:
6 f, l% z8 p/ [9 R$ X5 ?# f- l, X' K5 e- K( Z
+ P; p! e9 \! v6 P& ]" S8 w,也可以用十六进制写,就象上面例子5 }9 E: G& S$ n& t7 O9 }: K
- g. Q* g' }" b P3 d
" j/ a8 q3 j* _6 }. @/ J$ T
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
4 N6 d$ K/ ]: O0 T) e$ C) _/ C" B7 i% [" w9 b
3.定义字体
& Y7 \/ V+ Z2 o2 n( A0 Dweb标准推荐如下字体定义方法* ?- l: B& `/ F, _6 L
6 X Z, G# f. u; [3 _- `body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 2 D" \, m) S' W: y
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; % l) U; B4 k* b' T8 ^
Lucida Grande字体适合Mac OS X;
( H* K+ N+ q* a. |% gVerdana字体适合所有的Windows系统;
3 r; @1 ]5 s0 i3 [" }Lucida适合UNIX用户 + a( V1 f( d8 e( m8 v: {
"宋体"适合中文简体用户; : v0 L! P( {0 Q# u
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
! x0 N% u6 y( T4 h
9 d4 S- \% D5 I/ K# g# F2 q6 k4.群选择器
2 S; L" c- y8 b; H1 q1 d% x3 i1 Y" U! u9 m4 p( K
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
* x! s! e$ v2 k( X
9 _. C( {# }/ n p, td, li { font-size : 12px ; }
& D) x/ m5 U/ `就是给li下面的子元素strong定义一个斜体不加粗的样式
5 E( G% M- L- |6 s; g
: \2 j0 `2 F# a; o1 z% ~( ]6.id选择器
5 Z" y: r; W# U* \/ [1 E' D
$ n0 G4 m- ~7 j. S$ Q" \用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
9 H3 ]- q1 t# U/ Y3 E5 y& k" ^, n* K3 s2 g3 h: r1 j
0 E$ {3 M d- f3 G/ K7 ^# x7 x
然后在样式表里这样定义:, v( ?3 s5 _1 S3 O4 u" z* Q; L
; J$ u7 {; k7 v$ m6 |7 B
' b1 r T; m/ \& |#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 3 G1 S9 G/ z' t+ v7 y% h) f- d
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
6 I. `6 `9 f9 e+ q) }1 N, B& |+ P; ^% t* n
id选择器也同样支持派生,例如:4 m' G" F/ @. [" A; j& [' S1 ]& C
#menubar p { text-align : right; margin-top : 10px; } ; X" Y8 _/ h4 A
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
2 C8 a& `0 D0 w9 ]
3 u# i: a& U+ z% Q6.类别选择器: K2 ?+ q8 Z0 ]: p6 o5 \
8 g$ O; j# s/ Q4 k. [6 t! d8 F, U3 o在CSS里用一个点开头表示类别选择器定义,例如:7 Q6 G8 @# r4 S, t% H
.14px {color : #f60 ;font-size:14px ;}
% K% ^% q$ Y% l, T* q/ G$ @( `5 Q3 b4 r! {0 D/ G
在页面中,用class="类别名"的方法调用:
9 g7 n' P6 [6 c3 n; J<span class="14px">14px大小的字体</span> 9 U/ b, L6 K" @5 H; t
* [4 M4 D8 I4 k3 \这个方法比较简单灵活,可以随时根据页面需要新建和删除。
- \2 E/ o* t: n
% S; L$ \& Z5 u! c( M7.定义链接的样式
( b6 S( x; r- O. l9 XCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:- T% C; w8 c2 Q0 ?3 e- h9 y) d `
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
1 f3 I) L3 o+ e; qa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
9 D* {* \, O8 W; ]; Ma:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}' y) |$ Z( A; |5 Y7 N
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
. S) e* I7 Z) |! g0 P0 J4 Z1 M5 x4 ]8 C/ i
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|