|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。9 i2 e( E1 r; q
, W7 r9 @& Y4 t0 P1.基本语法规范
9 i6 U+ T: l; Y* m; z4 A分析一个典型CSS的语句:
/ I# X% E M/ L8 ], Bp {COLOR:#FF0000;BACKGROUND:#FFFFFF} 6 s2 c& b& C1 T( n) G( U
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 9 `0 F$ D/ N* i
样式声明写在一对大括号"{}"中;
, n% e' ^. A+ Z* e! S1 y/ _. H; ACOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; ) t- c( T M- V
"#FF0000"和"#FFFFFF"是属性的值(value)。/ Q5 m- S3 o4 u! T9 C% F
8 R- P' o) ^" M: B; J9 ^( T( N" q8 K2.颜色值# b) V/ m& ?4 s7 r. n7 P' K
8 ^6 D" [6 O9 p5 D1 N" Z) h# g颜色值可以用RGB值写,例如:2 y& e2 p0 ^: N! @0 V
" F# X) T4 U$ [4 A4 Y
) W2 @* x% u; [1 o,也可以用十六进制写,就象上面例子" w; \$ M, Y2 d5 {( T, j
# d( u) Z; V! a4 v- x# @
. w% u+ @+ V; o( g" c; _* J如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。" |0 Q. D, d+ ]
/ T5 Q0 q; e" B& H2 o3.定义字体
9 X& f1 b& e, A" s) D! eweb标准推荐如下字体定义方法, {; A f5 R# {) ^! p3 \2 `/ z. C
6 |" d$ t: H8 [0 m& h1 R Cbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
$ C0 L# X( K$ f2 B字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
6 _5 ^5 K. l" k" }Lucida Grande字体适合Mac OS X; C& J2 l, S c* @
Verdana字体适合所有的Windows系统;
) i; y" P, N( \' ^7 j0 T4 b% fLucida适合UNIX用户
* m G* |1 }8 \"宋体"适合中文简体用户; : W' _5 j9 v- r
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;+ N9 b. |6 z0 V4 L; g' G; X
$ [: Q6 f+ c5 V8 V) P& p! ]0 Z4.群选择器! G) T2 G. M, O( K
6 P) X" e' V7 f$ o5 q当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:2 c) c/ R; \) F& L# l/ c# ^! r" `/ V
5 Q2 z4 V( Z0 n) ~; W" T* u p, td, li { font-size : 12px ; } ( c+ ?( c/ N0 P2 r3 X7 n
就是给li下面的子元素strong定义一个斜体不加粗的样式
# t B; O6 s) R9 u! a( u; E( I0 }9 Y, W, S- L
6.id选择器
$ C% k8 w' N+ N5 O% g& k$ T
& c" j, A- \8 ~, V9 \1 D& B用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
8 Z( E) o8 k# M: ?) w0 K8 \: }6 P3 E! ]7 y- \
8 g5 N' t" l, K( |* R) n然后在样式表里这样定义:/ T( H- R5 a6 I4 t/ E
! p- }8 W' f! t, i9 L; e. f u/ F2 d( B( ~
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
& c5 p2 T5 [5 p5 Y$ X! Q其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
8 k/ c) y8 ^' v! q1 u4 r2 c; I" }% y$ u, K1 L5 l
id选择器也同样支持派生,例如:" b/ k* s- b5 H# [( n* ^0 Y. V
#menubar p { text-align : right; margin-top : 10px; }
# ` f8 a( q- A. l6 S2 I% v5 a这个方法主要用来定义层和那些比较复杂,有多个派生的元素。9 B7 h( A0 H( {7 X8 s6 @
( e3 k( x2 L3 d( H o9 z! R
6.类别选择器
4 e0 y p( W8 ~4 Y) }
% G% \. p, \, f; w$ O) Z在CSS里用一个点开头表示类别选择器定义,例如:
3 \# I! |4 E1 u) a& v: _.14px {color : #f60 ;font-size:14px ;} 6 e1 k3 m& J1 |9 H
! m* R+ e0 e5 V6 ]; W/ J: u1 Z" d" P
在页面中,用class="类别名"的方法调用: q& B, Y s2 P P- J! w
<span class="14px">14px大小的字体</span> + u! N9 J5 U& z- Y) P+ A5 K# ~
+ l0 ]" f! z' U# }7 x! `& u0 e* p这个方法比较简单灵活,可以随时根据页面需要新建和删除。
) c* `$ P) R2 w/ ~; [
$ n% s( Y7 D) |1 j& ~1 _7.定义链接的样式$ s) A9 Q) c. j
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:0 ?) I1 k5 |( O; O' O# {
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}* R: b% J% y; U, ~9 y$ ] K
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
5 Y* R& t$ i; [) x8 f2 }/ u; U W: ^a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}: l; x0 ~0 c* O: O
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
6 ?' i2 S$ Q, m# O
9 Z' O( ]' @- h# D1 v: c# F+ u% |以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|