|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。& T( e" Z8 y: l
8 b! S( W( o( }% I2 D0 e
1.基本语法规范
% M$ ~) K! a8 w% I2 W分析一个典型CSS的语句:, U H5 t' n/ W8 N- I
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
. O% ]* b5 s; ` d其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; / e+ s* x1 B1 }% U
样式声明写在一对大括号"{}"中; ) U; J5 t' s5 O
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
T; m; H4 x6 v4 e; e"#FF0000"和"#FFFFFF"是属性的值(value)。% |: E+ `' {1 B( i7 Q% t+ Z* |* u
9 p0 c$ U8 x2 g+ q/ u2.颜色值& q1 \9 C) X6 {0 L" K
; ?6 [7 e t" V( G- Q颜色值可以用RGB值写,例如:
: N' [ x# M: M, d1 B* n, A8 m* O. v8 ?9 L- H: i0 a' n
$ m6 q; u: d% Z! i,也可以用十六进制写,就象上面例子- n/ j1 x! F+ f8 s3 F( P" o" N1 _
$ K! K0 B: h8 p- Y
% { Q% J- `% R8 }如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
% h8 R' O2 u0 J( Y
3 a9 O) _- b' {* G% }3.定义字体3 |( Q& t7 {; w
web标准推荐如下字体定义方法
' V3 ]7 r6 r* m0 ^4 ?2 F, G$ v2 k _+ N' a1 N; w
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } : g: ^6 Q4 }5 b- T
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; ) R* _! t# ?8 L- z d9 h
Lucida Grande字体适合Mac OS X; H- I6 T$ h% P" t, {' C$ o
Verdana字体适合所有的Windows系统; & n* d! t! S4 Q/ o5 v" v) w* O
Lucida适合UNIX用户
4 m* \& b& X0 K+ E. @"宋体"适合中文简体用户;
( l9 W6 E% |- W& p如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
' c2 l) W" \+ h. K3 K! c% y
8 O3 v* k! m9 R' M$ B* A+ G9 q4 N4.群选择器& s6 |! P( o8 ^7 U4 F+ G; T
7 j3 U, s2 J) p/ y当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:9 f6 B: Z! U* @
- v7 o9 H) s7 ?+ T$ d+ Z p, td, li { font-size : 12px ; }
8 v0 t- Q3 ?; _7 O2 }/ y- y就是给li下面的子元素strong定义一个斜体不加粗的样式
% p/ f9 }0 ^4 |; ~: \9 S! a5 c8 h* I( V: x- w4 Y: |0 {$ ~' W; U+ k
6.id选择器
# y# q/ ` E# ~) e U# p
9 R6 O% l, S* H& ?用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层- O$ V& z* j$ v9 k4 H6 n
" g" t* X k5 {+ G" c9 v! ?4 n0 K# P8 j x+ M, |6 c
然后在样式表里这样定义:+ P6 c8 l: n: n4 V& X6 t) {; h) h
% U- e! ^! Y/ ^: _
, p1 L- m! c5 V3 b; B3 r" Q#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
' u* M; _$ F" _其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
, \5 ? [. O4 T& [' X
& j1 A) P# e/ l3 s' Lid选择器也同样支持派生,例如:
8 ^2 b& D+ Q' d( E7 ~#menubar p { text-align : right; margin-top : 10px; }
, [& ~! ?/ ^7 x4 f这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
/ j% ]3 l% Y! M; f! ]2 y5 P; U+ y/ C
6.类别选择器1 B- `* q5 S; E: R& F; ?
& Q% h, `2 H* j# X* N, g
在CSS里用一个点开头表示类别选择器定义,例如:
8 v8 m% [) R' E+ M/ k# n.14px {color : #f60 ;font-size:14px ;} ( ]5 e3 q5 |) b2 y9 M/ N; t- ]
. ], n* g1 S, b7 }( Q' w3 o在页面中,用class="类别名"的方法调用:
8 N: T! b1 _( y$ ~; l% j<span class="14px">14px大小的字体</span> ' d. Q/ [" E: C7 W4 Z1 D
+ X( H' Z4 {/ W/ @1 q
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
1 [6 o( ~$ y( p
0 G5 P) |' p2 p1 w k7.定义链接的样式" N$ r G& r( }% n( |- X
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:0 i) C, J: u2 u& Y \
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
6 b/ N: c/ z9 Y, g/ Da:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}6 x/ N- r, B; ~( @6 Z' B# [
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
$ c, ~9 X+ Z! z) ^) h* H W$ g8 ca:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
: _, V0 P! q4 N
$ b* ]9 i: Q, k; _2 M; G以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|