|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。( R! T1 q- W. M$ N
/ R% |5 G: j3 l
1.基本语法规范5 ^8 |4 [5 ?9 F- F% q, m
分析一个典型CSS的语句:( @$ O8 M+ }4 d' ^) {# D2 ~
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 9 m! a5 I' L: N' g% P, u
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 4 R- C2 h0 n) J, Q$ j3 \
样式声明写在一对大括号"{}"中; 8 ?+ e, }- p+ J
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; + ?$ g: @, e" Y2 \
"#FF0000"和"#FFFFFF"是属性的值(value)。* p- H) ~* w. v2 o
3 {; Y, e/ D" A) {- w) j) a
2.颜色值; C) K G- a* g0 C: [/ q
$ b# @# j, _. [. x- f颜色值可以用RGB值写,例如:4 Y8 \6 S+ _# S$ f% U9 r( l' i0 e
/ z7 a- E! _/ C( ?7 f/ s8 a0 [2 E0 @6 R" {" G/ L9 S
,也可以用十六进制写,就象上面例子
' M0 k/ h- s$ w( A2 J. S+ P- F7 e U* h s
, u* w. j5 w5 B3 ]: F
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
5 e. b/ u6 I1 z/ K- Z. ~4 M- v6 O- _, {
3.定义字体* P' n( d1 i- F8 b
web标准推荐如下字体定义方法0 }- A4 E4 N) F
2 ~. f. x8 d2 n& q
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } ( W" Q8 j% g p
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
- w: {1 ~' w W% ]Lucida Grande字体适合Mac OS X; ( Z, G& Y" |# c" [ J7 C* ^( F
Verdana字体适合所有的Windows系统; ( M- N* [0 O" T9 Z+ E# p: e3 ]
Lucida适合UNIX用户
+ Q6 y x/ N& H7 @, a4 A5 }"宋体"适合中文简体用户; ' f7 C. T0 T6 K0 J
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;( x6 M: q2 W8 V' p
1 ~1 z0 t, w, H- b; q4.群选择器; I, ^+ D% D# l1 s0 _5 T0 L
7 ]4 d# u q3 F/ c0 o2 ]
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
0 c6 B' h% ~. d ^) D/ D. G. f5 X% D- F9 |' q- v
p, td, li { font-size : 12px ; }
3 W) c k, g( W& B$ M就是给li下面的子元素strong定义一个斜体不加粗的样式
* Y2 K, G5 m5 f4 U5 W( H( v
5 R1 n4 K. U5 X8 S" r \/ U0 f6.id选择器
0 m" {2 o3 G1 I \$ A3 K* L* t
# ~4 s3 O! t" T: x4 }用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层: Z3 ]% Y# a: o ~2 R' n
9 ]+ R5 H8 G1 H& e& n
% Z5 Y/ m2 l# S; w
然后在样式表里这样定义:
" v: k& A( s! Q N+ g
6 v3 _2 H+ A% i# b: k
, B1 C. a+ E" y$ j#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} ( V I; h7 H. R( o. T3 ^
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
' ?9 u0 r2 V+ \7 U$ @4 x: H9 V# f i3 c! s \
id选择器也同样支持派生,例如:( |2 l$ _; e! L) K8 @1 Q" W; G1 I
#menubar p { text-align : right; margin-top : 10px; } 5 S9 W! A* o* ?7 |; S( W6 J
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。; `9 ^, I+ {; C1 j m2 S7 m8 Z
5 U5 g6 A6 c3 [/ s7 Y! g% C
6.类别选择器0 t8 F+ V9 G" k! B. a, n7 o5 x- c' B
9 s/ `9 ]( B6 y! I% }5 i$ K. l: n% M
在CSS里用一个点开头表示类别选择器定义,例如:$ D# u9 o- x6 C0 f7 ?1 g
.14px {color : #f60 ;font-size:14px ;}
7 w2 s2 f$ Z9 y4 \( }
( u$ \0 ^: _4 c在页面中,用class="类别名"的方法调用:
7 a: d0 k! m! j<span class="14px">14px大小的字体</span> f) f6 A1 Q1 o7 N8 X
! P- O* T, m; v3 g7 ^1 Y0 `
这个方法比较简单灵活,可以随时根据页面需要新建和删除。$ ?( I1 r- F4 x; N4 E! P0 d% @
. [, ]5 S1 m) _, K% E, @
7.定义链接的样式
5 z' b% n* Z, y# [CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:4 W0 _( C' b& o z& Z. }/ f; R
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
# f) |% N# l0 h' B& N5 H' p+ @a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
+ u/ R. _& A$ e6 }a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
1 P* h* c- @- Q0 G/ z$ pa:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ; ^/ u! q2 \6 H% w
7 z* Q' ^9 H# N" r% ~以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|