|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。3 e* o( D. p/ D2 B, E
& u3 t8 T9 @- H4 I1.基本语法规范
! q/ Y! X& \( {3 z( X& u$ X分析一个典型CSS的语句:
8 W( E4 [$ E7 u7 X qp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
9 d! m- E" X2 W" S' B/ w其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; $ O+ d, G. e% |& G
样式声明写在一对大括号"{}"中;
- g1 _. c7 L' T0 HCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
; @) h" x/ K" i! g; \5 Y2 q9 \"#FF0000"和"#FFFFFF"是属性的值(value)。
* [ M1 l5 i( Z$ \- u3 _
+ b% N3 e5 M% X( G$ f8 j- X2.颜色值' a" O+ a/ c+ _8 I# r
0 a* U1 g( N- ?5 {' F2 T
颜色值可以用RGB值写,例如:6 f6 I# o8 E. J1 S
/ F$ j8 z% N7 o- L7 A
* k* ]. h" p3 w% P0 A5 F4 k,也可以用十六进制写,就象上面例子
$ e# C6 ~2 v, q# i! |, ]) }! m. i6 P+ d7 t7 y8 {$ z$ f6 K9 U
0 \' H5 x9 S, W! z
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。$ I6 t. Z" O- P% @. c: p$ b+ R
+ X% ^8 Z4 M$ g. {" w# z
3.定义字体
* B9 Z2 y" M% a/ cweb标准推荐如下字体定义方法
" e* \* K* `- ]5 G( Q4 f5 {& ]3 I% L( G; q3 Q6 x* t
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
" x5 e. i8 C/ l; _! \7 B字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
# u8 h5 [$ @6 ]" eLucida Grande字体适合Mac OS X;
3 E, p: r/ v3 c, p/ VVerdana字体适合所有的Windows系统; 2 k3 x, i$ h( }) ?& L" c: \
Lucida适合UNIX用户 & ^" V" h+ Y$ R( ]
"宋体"适合中文简体用户;
* y3 F! o0 c: c如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;: m" ?% K7 R9 c( [7 A; q
8 L1 K3 D: Q; B1 a1 Y5 v& Z4.群选择器
@2 w: N5 W& y0 \& F( S' C- j/ C& n/ b1 W7 ]3 G
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
' q* a" R6 q+ D5 D i& a
9 u7 D. _4 p/ j; u- K p, td, li { font-size : 12px ; } 3 Y* z2 H; n& A- J* e* J
就是给li下面的子元素strong定义一个斜体不加粗的样式
! [5 ]! ~1 o4 V/ l/ ~6 D6 _, m) |- d% S! Q: K2 Q% K' T
6.id选择器
* A% d6 T$ t2 i! m) P
5 F$ F8 O3 R; U: f! t用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
! K! T! z3 E2 q1 J1 z; C' K
' p/ k* F( s1 s/ m; E
, f: \3 h& Z: V }' d然后在样式表里这样定义:
# u' ?0 w7 r! x! A. u- q6 q* M# t- I( _& ?0 ^9 k( ]
" n9 a' E* c3 f( W3 L3 B0 _#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
$ t& g- M% [0 S, p9 i其中"menubar"是你自己定义的id名称。注意在前面加"#"号。* I- d. R/ y( B# ]' N0 v7 \
0 e. U- W# R7 C/ D5 Q2 Bid选择器也同样支持派生,例如:3 ?# \% I/ {. v( Z3 o S
#menubar p { text-align : right; margin-top : 10px; } 4 ^- b/ O h% R1 ^3 N5 E# B1 y1 q
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
* ?1 f' V: q: }0 S
9 W6 B U3 I2 O8 H6.类别选择器# o3 e- m4 C# t* @% B9 F5 \% y$ L
. n5 `+ p2 u" T T在CSS里用一个点开头表示类别选择器定义,例如:+ i, ~4 h5 `5 T! `- s' k- m, M
.14px {color : #f60 ;font-size:14px ;}
' @8 O* |- n; ?) E" U! X
0 E# b2 K* K: q" s* l在页面中,用class="类别名"的方法调用:
; ~* P' B4 S' ~<span class="14px">14px大小的字体</span> . v' {6 [' B. ]2 j
* n4 P- L* H$ A! D4 w! B
这个方法比较简单灵活,可以随时根据页面需要新建和删除。& ~! W8 ], d% n" T4 o
' D8 W+ k5 P2 \2 O! Z$ S& I
7.定义链接的样式
) R7 U( d9 [ k; |6 p& W& R$ ACSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
( z. S3 H& t' }' @* xa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
6 a# p' F4 w: D8 F4 c% X9 Ia:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}+ n6 ]/ @3 M- K' ?8 T
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}5 Q* Q$ L- ]# k8 y
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
7 c% U# q1 [% y3 B
. V8 k( _/ s" y$ |) T以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|