|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。$ B" @3 S, Q$ i$ H$ N
% i. q6 Y8 ?6 J5 O
1.基本语法规范
* N7 ~9 I, i* G- o分析一个典型CSS的语句：
3 x6 W( V- A3 l/ u. x/ ? kp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
) a& l% x( T* a9 V% A# J* S样式声明写在一对大括号"{}"中；
5 [# T5 w$ r/ ], [COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
" m* o5 Z, n" h. P" S3 e4 k+ ?"#FF0000"和"#FFFFFF"是属性的值(value)。) x. j+ Z+ a$ F% Y
! z, t3 S9 w& d4 I- z5 }2 y
2.颜色值6 o6 M `4 P" n+ a' v1 x- x9 \
6 k9 K6 D- N; [% W3 I颜色值可以用RGB值写，例如：
2 A1 c$ }' Y- e. p0 |* U, ?/ _1 j* K% ~ o7 ^7 X5 P) l
7 B+ m# _$ B* x
，也可以用十六进制写，就象上面例子
# r5 Z8 z' ]- T% E- `( |" O8 x
. r) x3 q9 `5 \" X2 U; X# w$ Q
8 x/ F2 z1 Z# |% T+ w, L' r/ S$ Z如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
4 m) b) e" e( O' c; a9 o; H$ f( S
3.定义字体! W2 d( M/ k4 X8 C2 K
web标准推荐如下字体定义方法
2 e1 T% H" Z+ t7 @9 K
8 U; M! D7 q0 P1 q' wbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
/ ?0 N6 M1 X& d9 e/ E& @字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
* I) L3 J- S, {) O3 HLucida Grande字体适合Mac OS X；
! h# r3 Q+ D3 x2 zVerdana字体适合所有的Windows系统；
+ J8 ?6 V& S4 @9 m% FLucida适合UNIX用户 0 H" `! t" `/ w! s7 d- r2 T
"宋体"适合中文简体用户; 7 h, w7 p2 `2 k* s
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;. W. G8 J8 T1 R7 m7 Z$ R! }, M
* {1 O" x6 ^% S1 x+ H1 s
4.群选择器
5 [3 O/ w8 U1 f. l
7 `4 x* _: D! {/ ?当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：7 D" \7 [7 ?( d5 q, t
# m9 @: k4 L) i- Y4 z5 A p, td, li { font-size : 12px ; }
u% I$ r8 _, I! D9 r* `1 C就是给li下面的子元素strong定义一个斜体不加粗的样式7 E0 b% n" C! R1 g; k- I; T; i+ @
8 v+ k- _' K1 ^$ z6.id选择器- {6 U3 Z' j' T! I1 I" S0 {' o
# F3 { m& f0 H1 J4 o* H' A8 ]$ R. z
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
" a+ ?) [: I( {2 M6 O2 b2 X* ^/ J. _1 L, t
3 q, Y+ G) j6 h然后在样式表里这样定义：
8 i; ? }: k# `& M7 [; }3 l; Z4 Y% Q2 I! U) V% Q% P# \
2 p- F' X9 X; ?+ ?#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
' @ ~5 F# Z3 {6 R- J其中"menubar"是你自己定义的id名称。注意在前面加"#"号。3 b) Z$ F) F/ T) q
' l; \. Y S" @+ W& Uid选择器也同样支持派生，例如：5 B, t" ?' E1 I
#menubar p { text-align : right; margin-top : 10px; }
, i u. ~$ _" O0 E这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
& }7 y$ W l4 ]$ Y$ P7 q V
- C) r# B1 }9 K6.类别选择器; a; O9 m. s/ A& s) ^' g6 I
+ k! h6 M Z7 C+ A5 V4 }在CSS里用一个点开头表示类别选择器定义，例如：3 Q8 r4 A9 B; U4 ^3 T# y. q* h1 }
.14px {color : #f60 ;font-size:14px ;}
# e7 T) H' h( N/ |0 Q- m. }在页面中，用class="类别名"的方法调用：# l+ D3 Y% A: a! a
<span class="14px">14px大小的字体</span>
" Q8 G$ n2 X3 ]8 m3 S
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
% T% Y$ y/ d7 h4 t# ~! L) V; j( M5 d( a5 f" O( C
7.定义链接的样式
* M6 Y, P' v; t6 R: s4 v& kCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：3 I9 U, a+ P8 r- Y/ p
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
7 d% D4 Y& {: \: La:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}5 @6 I' Z4 f0 T: R5 v
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}1 H0 P& O4 F8 c! R- g) _; x
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
) }& G" d9 L6 x4 w) z
! j& G! Z' O# Y% V# g' c! n以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
