|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
" g5 P7 }: l/ {. \
& y; H4 d! e7 M F8 p, ^1.基本语法规范- Q! C2 d( f, H u5 ^
分析一个典型CSS的语句:
& _5 n& W5 z+ K6 P1 L) Cp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
7 X T4 P* Q7 X* h其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
: k. Y6 W% J) x5 K样式声明写在一对大括号"{}"中; 6 [: |: t( s7 q X' W! y* `, F
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 1 o1 h; Z; n' P- J4 @3 L+ A7 j
"#FF0000"和"#FFFFFF"是属性的值(value)。& E0 S- g& j$ H/ b$ A7 G
( n5 ?* t/ ~8 j2 w$ W2.颜色值' Z% J8 N0 X! `- ]' C) x) C: q- W
8 o0 u; h# w5 ~( r7 H" L颜色值可以用RGB值写,例如:
) _+ K6 W- w) o" y. q" [! h; U& G& J( E6 G5 U) S+ m9 \
# k! \, O" ^& s6 b8 s" x! h% c5 H
,也可以用十六进制写,就象上面例子- O: L @2 E- c& k8 x/ R8 Z' P$ }
) p2 ]) o' Q! @
^, l2 H8 b# r- t4 W如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。& p) e; U' q6 _6 s
5 A4 j/ f8 i$ f7 S8 M, r. A ]3.定义字体1 I& T4 l/ ]/ ~5 a6 N
web标准推荐如下字体定义方法
$ c8 g9 [0 R2 [4 w2 l
5 {3 i" t+ v7 y }; q+ ubody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } % R! o" l, [% c5 Q) I
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
( r0 o) ]/ F3 l$ L! E. HLucida Grande字体适合Mac OS X; ) n; Z2 m, p( h. o7 G' Y8 b
Verdana字体适合所有的Windows系统; , g$ V0 {6 B; Z( ~
Lucida适合UNIX用户 - t [0 W# R4 S, X; I/ H3 F, M
"宋体"适合中文简体用户; 6 s. u) ?0 I, @ _! e- B0 Z+ n
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
3 o, w3 O, t3 h8 a( c$ Y2 h% J W4 ?, u& j; M7 Y5 ?% F& ?! V# i/ H7 k0 o
4.群选择器3 q6 `, T$ a. K. o
; p- `5 h. p9 f3 ]9 S0 ]
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
/ T g- B* B% o5 Z' y1 {% Y
0 W/ ^" h7 q7 W9 J4 r$ ^& {' I p, td, li { font-size : 12px ; } 1 M! g5 _6 v2 H
就是给li下面的子元素strong定义一个斜体不加粗的样式
2 ~& Z: P$ P8 z5 y- ?: q' B4 S5 |2 b$ T" g
6.id选择器) q- I+ D: G! p6 N# @4 `( I5 p
8 D; M" \" l- X9 M5 s# B' J
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
5 a* j+ S: L1 \* Y
4 v8 V7 ]; T- V4 v: l
/ @9 N# j+ F. [* f% P$ S1 b8 ?然后在样式表里这样定义:
( H8 J/ ^; }( d' H6 H5 i- b2 u5 ` v1 t+ g
2 w5 f* t0 @ A) o
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} o5 B% E* u! j& b1 O0 ?
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
1 H! I/ c6 X: V2 G+ m" f
( v/ Y! }3 X2 k# h O6 A2 aid选择器也同样支持派生,例如:
' U* j. o: @$ x0 u3 ]+ J#menubar p { text-align : right; margin-top : 10px; }
) Q0 o$ `" \9 \# f S这个方法主要用来定义层和那些比较复杂,有多个派生的元素。- W0 u. [3 u% D$ J8 ^" i/ ]4 s
E' P. y: x3 ~' ]$ [. D6.类别选择器
* @1 }6 P( G2 m' f7 H' S# A7 ?6 f' v" H1 h# A
在CSS里用一个点开头表示类别选择器定义,例如:
% {4 x1 T4 `' v3 M.14px {color : #f60 ;font-size:14px ;} . r2 v. l- `" @, D* X+ g; L
$ v- l& n2 {; d0 Q3 w在页面中,用class="类别名"的方法调用:- g$ g* A8 v; ]
<span class="14px">14px大小的字体</span>
V. {, F( X. m! H+ g
5 z* l7 y% B, x2 K4 |3 _这个方法比较简单灵活,可以随时根据页面需要新建和删除。: {6 _, p5 I: L
; {7 Q" ]5 s, F' I7.定义链接的样式- F' R% Q; T+ S1 ]5 U$ }# B
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
( C' r, A7 U3 O- n6 _+ L: H" ea:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}8 P& ]; s0 A, F2 k. g
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}) l0 O- F5 l5 G9 |1 |
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}7 b7 H, V' `7 A4 L* l! ?; g+ y
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
; w) p+ b8 c ?3 @3 Z }/ ` @7 j/ @
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|