|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。" Z: _+ j$ g' H; ~# t; _
" D7 {* k; z, _- e: T) n8 [0 |1 o3 I1.基本语法规范
; K0 U& P& s6 L分析一个典型CSS的语句：( n- T* z. w8 X8 {: O" Q5 G1 l" {
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
2 A" L3 C5 y/ e其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
8 B) t- F6 |0 l& C样式声明写在一对大括号"{}"中；
. b5 N" l/ A8 F% iCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； ; n3 B7 O- ]3 S9 q9 j' [; t
"#FF0000"和"#FFFFFF"是属性的值(value)。6 f" P$ ?! W4 _# x" G+ N+ K7 ?/ H
# L: R: S' U. {2.颜色值
; f' R @+ T# F; b4 B5 {5 e/ b& u
# Z* C& A, A2 ?, X( L颜色值可以用RGB值写，例如：3 ?% w1 w: I) b0 W% M
1 z; n& r+ ?5 C, v& s$ o9 c, P' _: b
# E8 `3 Q( {) O2 ~) u，也可以用十六进制写，就象上面例子* a3 D- f- `0 N4 u2 P; ?
7 p) E! V7 S* x! U) u
2 S3 b2 S" l4 K1 k0 s5 ?& T如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
5 [- O- @' ^5 k1 F+ Q' ]1 f3 J) n; U8 c
3.定义字体
" o: ~# L: e) r* eweb标准推荐如下字体定义方法
# L" C7 _8 ]/ f/ O+ t p& q' m$ g8 X( E: ]7 R. L
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
: h) O/ ?. A" O3 X P4 B字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
" Y0 o, i; U8 m% u9 [! _7 Q8 uLucida Grande字体适合Mac OS X；
0 w/ H, D4 G0 J0 l4 b* BVerdana字体适合所有的Windows系统；
" }* F. D1 d$ J$ u/ T# tLucida适合UNIX用户
+ t+ L1 L5 j# _"宋体"适合中文简体用户; 2 }9 z E" ~% U) [7 A* ~$ _+ K
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
% C% r. i! J: j8 J
; z" z+ y$ `2 t. [4.群选择器& O0 W+ p8 e- a, m4 I9 R
1 g% \* I' q2 \
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
3 z8 R- @' u0 J5 Q; `/ n5 H8 X' n5 D$ B/ B, p4 g! K e
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
4 |' x1 C" M- b U' x4 V. E% X0 Q, h
6.id选择器" d2 t9 a2 h- I; p+ _2 O% _7 Z
d$ a8 b9 w6 c$ @用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层+ D! v2 ]" n h0 D0 Q/ Z1 D+ ?3 {* x0 S
+ v8 c5 V2 R% A) n6 Z+ S1 P L1 `+ g2 M4 H
然后在样式表里这样定义：
5 m; `3 x; F# A1 Y9 n8 R0 D. N0 C1 s# r, B
0 }- A4 W# B3 r* V3 E! v" Z3 x7 |
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。0 D0 z9 D; p, L7 A! k' p+ {1 v# ^
! m0 S% z* _9 w! [0 F4 l. C0 W' ^
id选择器也同样支持派生，例如：
. f J! E4 u) W9 ?$ x) ^#menubar p { text-align : right; margin-top : 10px; }
% f6 d' u% S) a' X% o! E4 s+ p这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
5 y7 c; `- o" W- N5 }% z- T# u
6.类别选择器
5 w9 |; a' w0 w0 y/ \& O
1 P ~6 {5 L9 Q; @! T. T" V在CSS里用一个点开头表示类别选择器定义，例如：
9 f, d% s& b& E3 |6 [+ U.14px {color : #f60 ;font-size:14px ;}
0 q. C: r: p. J. Z6 J) H
在页面中，用class="类别名"的方法调用：! I( b. s& D' _) V+ J" |
<span class="14px">14px大小的字体</span>
( S, n1 b( K0 p6 l
$ B- ~" P/ B. J: p' i; \这个方法比较简单灵活，可以随时根据页面需要新建和删除。% L4 D; ]. T, X% d; e7 D. M
0 [8 ~- F" g! N* q4 B7.定义链接的样式+ c) M& P8 e7 \* ?9 w! {
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：3 C3 I' k Q; d' Z" |: v& M' h
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
3 f" B- d5 t; R! Ga:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
' K1 g# P- \' H/ R% x( s8 na:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}0 Y0 u! k0 d- w+ z7 d
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
K# \! J9 z$ O+ R2 b以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
