|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。. a- [* |4 u& ^
; m" e. A6 _9 {0 u- j1.基本语法规范
4 a8 O B3 ~3 B- c" R0 v7 h- X分析一个典型CSS的语句:' _" [. }6 S9 g1 ?0 ?- o' t: n
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
2 y6 s. k6 z g8 q1 y其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
) \5 O: T. L0 `, S, B* o样式声明写在一对大括号"{}"中; & y# j# D2 u$ ^# L2 l/ T
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; / i- ]! D: B8 L V( }4 I
"#FF0000"和"#FFFFFF"是属性的值(value)。
7 N* B: p; J0 L [% a
6 f& f2 m3 X6 K* O0 l6 }9 p6 q Z/ N2.颜色值
1 g( N) C1 p# u, C1 r* q, t3 X+ M& R& f* R! o5 ~6 k
颜色值可以用RGB值写,例如:- E( |# m8 G- V1 g& K8 }$ m! x
( d( w |' P3 w- B5 z5 e+ s/ p' \+ U3 R9 [$ B
,也可以用十六进制写,就象上面例子0 V: j ]1 S1 b e
6 i0 n/ ?* X1 E
+ S- B4 }' Q" Y4 H" f
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
; n8 B. w7 d% D4 R6 o" X7 x; i
+ P1 B, l+ G7 s% ]0 E$ g/ M. b3.定义字体# C8 ^3 v* S7 V5 Y0 H8 P. m8 Y7 f
web标准推荐如下字体定义方法
" m" D5 Y- b. x1 s. B$ p- r; Y0 i+ Q2 `8 A
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
+ j3 L: q8 z/ P/ ~0 u9 `字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 5 u' K+ p3 m( M* S$ O% G
Lucida Grande字体适合Mac OS X; x/ \: f+ ?6 I! t+ m
Verdana字体适合所有的Windows系统;
% ?3 i) ~( X3 tLucida适合UNIX用户
( Q: r& d* x$ S S"宋体"适合中文简体用户;
/ M0 `3 @ e6 L0 F- ^2 `6 W0 B如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
: i5 d# _$ L1 Z& G" c
; f2 ]. o% N2 D4 Y! m- L _4.群选择器9 K# s: c/ s9 Z2 Y& h, ~' m
1 C" i# S5 T( a
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
1 |" S* o$ V! o3 {8 u- C, v& `$ t( L2 }
p, td, li { font-size : 12px ; } 0 \% S. L- P& V2 l/ w
就是给li下面的子元素strong定义一个斜体不加粗的样式: H+ g: ^- q. j- Q
& K E0 l* f! ]$ o8 H0 B6 k
6.id选择器% M6 q+ y$ e( m, p* k* G
$ l8 s" o* y F! h- F
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
/ s! Z# E4 N/ {+ ~# P
( G( g0 H1 ^# M8 k
: G3 X, [2 X% {然后在样式表里这样定义:! G% L$ ]3 @9 e
- X: L m2 y4 h# C3 T
4 R @1 U; O7 ?2 N#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} ' V$ V0 r, w! f# e% g L
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
: [$ p% x9 t$ O+ |- w6 [( ?5 F6 ~$ u2 y0 }( `* D) T5 f
id选择器也同样支持派生,例如:9 O1 S" |. P0 j3 k8 w
#menubar p { text-align : right; margin-top : 10px; }
. _* x a6 H- [2 V, R5 ^这个方法主要用来定义层和那些比较复杂,有多个派生的元素。& P# H2 a! l% r+ ]6 P, m
- Q& H# i0 ^/ O1 A6.类别选择器* L2 B$ s+ b0 \2 O; V. T
$ o. T; A5 M# K6 ^% o9 B& L在CSS里用一个点开头表示类别选择器定义,例如:4 W& H5 q# @' i# h+ m
.14px {color : #f60 ;font-size:14px ;} N' F; z) u; Z* w7 |
7 [+ A2 I: u2 h# t6 k
在页面中,用class="类别名"的方法调用:
9 X( d, n; y$ Q4 [ h<span class="14px">14px大小的字体</span> : I: ~8 G6 ]. Z# s7 F
t4 d$ A/ L7 b6 ?) \( A/ N, p这个方法比较简单灵活,可以随时根据页面需要新建和删除。
. l- D6 Q& e' y" L
; L% t9 D" C `7.定义链接的样式; b6 y- O' i% R& t, ~& Q) i! T% z$ i
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
! I# u1 X k" p7 v5 Z) ua:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}' o) M+ G; u- V7 O+ J
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
' y2 V+ c2 {, g7 e" \: z& _# ya:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}$ X/ P" y" k; @- t) _) g" ]& ?
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 1 U6 ?: y+ V9 ]4 z2 Z
- ~+ T& ]& f% Y' c. v5 _( ]
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|