|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
+ a' |" w$ M9 ]
; {" Y7 O6 a3 g4 L1.基本语法规范
; R. g* l) u" n) ]分析一个典型CSS的语句:. H; t# D9 I o9 N+ C( U; ?
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 0 k- @& C* S/ ]" ]+ x
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
; ?/ m/ t9 F# }5 O! J9 V1 b$ J样式声明写在一对大括号"{}"中; + A& {' [4 F; J0 Y/ T
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 8 f) f/ C8 j: s; O1 t/ M' c4 h
"#FF0000"和"#FFFFFF"是属性的值(value)。$ M* g1 y. n! s. G8 o
, D$ t. Z0 H3 | Q; m% e# Z
2.颜色值' D0 V. r) n) E, @
, @: f0 V7 l& f. P: k- W2 z# a1 ~颜色值可以用RGB值写,例如:+ f3 r9 N2 |% u8 V
9 ~: v7 W0 a! j( u2 Z1 b7 {2 R
. N6 u9 {, D% M& y! H, @/ d# B R5 x,也可以用十六进制写,就象上面例子
( S2 X; T6 m5 q1 |% \+ f+ g% W
6 L" Z0 ?, i2 b6 p9 F0 b3 l7 }8 u0 |: ?, f$ G$ H8 L
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。- C9 V. q: \1 }* h
c) ] S9 _( }. R2 w% G, g
3.定义字体
# t2 Q$ V9 C2 g }" S, w5 Q/ rweb标准推荐如下字体定义方法" ]3 }- q" {/ o j6 N
8 L) J2 ]# ^8 K v* L
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 6 K( D y: N4 C4 x6 {9 z0 W5 H
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 4 M \9 d/ y9 {" R) Z$ O
Lucida Grande字体适合Mac OS X; 7 a( P4 l2 ?2 ^/ |2 i
Verdana字体适合所有的Windows系统;
0 l- h/ I* s( R# C: w+ wLucida适合UNIX用户 8 k8 J8 j2 q4 T! p/ s. H
"宋体"适合中文简体用户;
* E/ X4 n: U0 M0 j6 x- m. `7 @如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
. P+ C0 H; f& a: a) I: l+ E. s V& e! K* ?7 Q
4.群选择器
' {2 E; {/ j- [( r+ D2 O
1 h8 S4 w9 j3 \0 p* o+ o当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:* O- ?( u1 o' D/ }' q. J, ^8 `
! j. U$ X1 v* a: q | p, td, li { font-size : 12px ; }
6 j# E2 E& m+ _5 A1 Q就是给li下面的子元素strong定义一个斜体不加粗的样式
( H1 z+ P8 S+ z- g8 ~' ?* @
% y5 X5 u; h: \. ~8 b( s6.id选择器6 O/ G3 w/ v$ m& d/ g- Z
' V% [( d8 Z% j3 o2 T5 f用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层4 e5 ?" R: L, c1 _3 |& h
1 H+ ^1 V4 ?6 `% e
. s) d7 K2 N. C( a然后在样式表里这样定义:
' m* O) E+ T" u! _2 ^
% P2 w U$ R# M+ }' j2 A; _: Z7 G. f1 X
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
7 n/ o. O! ^$ r _3 q其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
5 y" d9 p8 e1 }# ]9 w8 }) X0 @
& _% {/ T& w1 u0 did选择器也同样支持派生,例如:, R- W# \4 n- R% `0 z5 |
#menubar p { text-align : right; margin-top : 10px; }
, }# M' @; I0 j* w% b# R这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
* \3 O! d- e/ f1 p! J: ^/ \$ ]5 c6 r- `8 Z; G+ T
6.类别选择器, ]. s Q+ G% K) k; d
" F2 `! B! |+ @6 _1 O& K
在CSS里用一个点开头表示类别选择器定义,例如:
* P6 X3 f! Y( Q6 D% w$ ~.14px {color : #f60 ;font-size:14px ;} 1 H" L' F2 _1 j5 O
( r% D- e3 @5 }$ r1 ^" a$ k' k# }3 K在页面中,用class="类别名"的方法调用:( X5 \0 ~$ h- o" t R M) } M. R
<span class="14px">14px大小的字体</span>
' n3 } v u, G$ Q: c
. j( _: e. n/ a# A) l这个方法比较简单灵活,可以随时根据页面需要新建和删除。
4 ~0 b; O6 d1 ^; S' r, ]7 v) D8 z7 E" l- ]8 P5 U3 e
7.定义链接的样式
3 H3 F' i- _8 P7 |* bCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
6 ^# ?5 C" @# }2 _# ^a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
, l0 A4 s' G2 V/ K+ D! c2 ba:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}& Y2 \1 B$ z% r) o" s0 [7 ~
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
2 R2 G; V8 @* x( j: Y8 M& Aa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
% N& Q. }. x1 a* s# O( j& J% j7 D7 u9 n" g/ x' e
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|