|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。, G, H$ a$ r) G; h* g
" ^( `! C: y: T- B( u/ {1.基本语法规范
/ c$ _$ W0 j/ `8 p8 p# r- b分析一个典型CSS的语句:1 }0 X- b( p! A$ L6 [0 G. v" F2 U& R
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
0 k) A+ F6 f2 Z' N5 x其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
! {* w/ T6 u% h2 l' D样式声明写在一对大括号"{}"中;
\; {# {' q, X2 s: S: E" i! UCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
% ~! T. f! S }/ N5 Z& e* _4 o"#FF0000"和"#FFFFFF"是属性的值(value)。* C. u& P8 M$ X& V+ w
+ O4 {6 a' B3 C2.颜色值
$ `) B. k* n; G$ m0 Y
9 ~0 d! p; `, F' C, J- t颜色值可以用RGB值写,例如:
0 o, J) \9 V S; I7 K# D" T$ p) z0 W+ l" r0 M, ]
% d2 |# T4 v+ n G0 g. m
,也可以用十六进制写,就象上面例子
M' r. s7 L& v: u% ]" N$ a0 y5 S$ J k1 m% d6 g
5 G' P% I) I, O' R+ B! \6 M$ f1 J
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。+ U- Z7 ]" Z* O* @/ h, G1 S/ z
9 K4 k% G9 ]/ m5 j" |: S" s6 {
3.定义字体6 ]4 f% h4 q/ T* h# M8 V7 v
web标准推荐如下字体定义方法
7 _9 L; W: U% B# ^* j6 e8 ~2 Q) u: L
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } " W2 [' W# W {5 {+ w- Y- X1 Q
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; + w1 j# i, ]8 ?
Lucida Grande字体适合Mac OS X; ( F) d1 Y" n6 M
Verdana字体适合所有的Windows系统; 2 A1 U1 h7 H9 ^+ g" h
Lucida适合UNIX用户
5 i7 \7 I* _( e |"宋体"适合中文简体用户; $ G3 p/ Z2 C* |7 c
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
, v4 c+ |2 S: a8 M" {7 y9 @6 }6 h5 `# @6 c
4 K; |" Y7 C; `+ \, t. _; l- t7 @- v4.群选择器; X% _( L$ Z7 x1 b! {: z
7 l# ?3 i* c: i W9 M- z当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
4 S/ u3 J' {2 o* d$ |5 p) V4 v U! \/ I7 Q4 q* B
p, td, li { font-size : 12px ; } 7 \- @8 `8 Z; H4 Y6 ?
就是给li下面的子元素strong定义一个斜体不加粗的样式+ D* y4 q: A+ p
6 \! q0 W4 l3 T
6.id选择器
: h/ r8 u9 J+ P$ {* H" {: y
/ k; k% I3 z; H8 r; e4 R1 h6 y用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
2 `5 u) H. b' L1 f9 M" e; ~( B |2 B* \; r) {+ F2 W
3 I/ E. q4 j1 Z5 t1 A3 m
然后在样式表里这样定义:* [8 m0 y. }9 p! c* {: f9 Q1 m
' H4 A$ T$ l- q8 P1 `
/ S8 A- S Y+ I) r1 G6 F
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} ( k0 O$ N, |6 k0 ~+ J+ t+ f
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。* w6 _- q# |/ W) i: z
* I$ ]9 ~& a& c" J0 E# Zid选择器也同样支持派生,例如:- A( | r5 b& n3 Q
#menubar p { text-align : right; margin-top : 10px; } ; m- X; o) b' \ _8 a$ R6 x$ R3 A
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。3 ^ S, E2 C9 I4 q8 c
( T' i' E1 u" ?8 J \4 Z
6.类别选择器0 `! R) g: y# P: h' H
* w: S5 Z0 ?' H/ q& N3 l# N
在CSS里用一个点开头表示类别选择器定义,例如:2 @: W9 ^) |/ T3 ?$ D
.14px {color : #f60 ;font-size:14px ;}
) q4 e! {% k* D9 c- D6 e! n5 S7 S5 D r) U0 Q. |0 n
在页面中,用class="类别名"的方法调用:
9 @: ^; U& E5 L: p9 r9 R0 ^4 R<span class="14px">14px大小的字体</span> ( O4 \, l' R6 c, b O* e2 r
2 V# s5 H A; i+ r t& H
这个方法比较简单灵活,可以随时根据页面需要新建和删除。/ X2 t( L, k) p
) x' O& j7 {5 a+ f& l7.定义链接的样式 g5 l# b8 q% R* H* B) s: x8 G
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:( `0 O' e7 d2 ^3 m1 D9 _
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
' r& M8 Y2 |! Y8 p' i. Oa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
1 l) }0 X3 \% T6 |) _a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}2 l2 G+ c% c& @# P
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 1 ^9 X* K3 \% K1 g
: W- a6 |5 e7 G9 |& R以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|