|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。+ N; z* d# x) k) A
+ Y! E: d9 s. T0 S' O8 w
1.基本语法规范7 u/ X3 v$ c3 m# Z) z/ w
分析一个典型CSS的语句：- A% r% T1 H! d; |1 y7 E. \) \
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
7 K& j% {8 ?0 Q其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； $ A% a) W( K# y
样式声明写在一对大括号"{}"中；
" y2 s2 C% b, U3 jCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； x3 |& n1 |8 ~ ` Q& e5 v8 S
"#FF0000"和"#FFFFFF"是属性的值(value)。# V3 Z v) o }: r. J! Q. i1 v! Q
' ~+ Q+ K# p; B: m' s% a2.颜色值 b" C5 a- c" I
, g4 |: s, T! T6 a4 Z9 k& m( ]/ [颜色值可以用RGB值写，例如：4 `4 h. @; ^ u, G- S9 Z
# S. s2 A7 K0 |0 E5 D
* \+ `' L6 V! e" j+ ?, q
，也可以用十六进制写，就象上面例子
$ H& K% n" ]. i% j; ]& F' @: J# P6 z1 c c, a$ G k
2 @! s1 y4 e0 W$ |0 a0 Y0 O" i如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
1 E% O) k. c+ s1 f6 [
0 I# S' M0 V# F4 i, Z2 {) f5 n3.定义字体+ K. W/ w, A8 k: N2 M P
web标准推荐如下字体定义方法
* R% _4 B/ g0 J | ]2 s$ U' B% q/ c, y0 S- ^$ P( y% O# d
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 8 c; k# u% f0 Q* l9 t
Lucida Grande字体适合Mac OS X；
0 P" ^ R+ ^# F) [0 a: o! a' g5 \Verdana字体适合所有的Windows系统；
5 t- l( E0 X6 J2 U) s0 I- @Lucida适合UNIX用户 1 Z: T5 A: u3 U2 o1 I0 `
"宋体"适合中文简体用户; : M( @7 K) S% A9 V* s* h' v7 T
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
l% v% O* i( L# m
+ `% C+ I5 @' _. p7 _* o2 v! D4.群选择器3 R1 K2 |5 w' \9 a
7 @4 X+ }: E. S0 o: u. K
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
% i5 m& p3 [8 M Q; D7 ^ E1 o" A
p, td, li { font-size : 12px ; }
- ~7 I; D3 w9 F, g就是给li下面的子元素strong定义一个斜体不加粗的样式0 a" q9 \: x9 O9 ]3 X0 z( K5 o
3 K; r0 Y' j6 R+ Q& b. f
6.id选择器8 I+ {8 w+ I$ f3 r- |8 {
! Z6 ~4 o5 G" T7 @4 ?3 P5 w, d用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
+ H: |$ l! @' Z5 E
9 j" K" O. a6 W. G) l0 R$ R4 U- @+ |/ z/ t6 ?5 I4 Q9 h9 \- ^
然后在样式表里这样定义：
+ \; d! n3 a* P( @& F2 ]$ S# ]) ~# G6 R# F+ c3 j" g; D9 a
* U+ q$ [7 [4 L6 S8 c$ T! T% p
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。0 P( s: \ O, r5 `: l8 K
8 l+ x6 i. a. i! e. c" T0 b! I
id选择器也同样支持派生，例如：
: H- }9 ^0 q( v0 j. B8 S7 h: o! O#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
5 ?9 f' C+ F7 B( V/ v6 D' `$ ?% }3 \2 M& b2 W% m8 g. F
6.类别选择器; a! b) }% }6 J/ t, T0 m
2 Q2 |( f! g% R) w4 I2 d4 U在CSS里用一个点开头表示类别选择器定义，例如：
; H( t9 ]2 L) S" I) n9 s.14px {color : #f60 ;font-size:14px ;}
9 a8 w( Y) l; |2 @: x: j4 e在页面中，用class="类别名"的方法调用：
; Y5 ~/ k4 a% W# X# z' ]5 G- r9 q2 Q<span class="14px">14px大小的字体</span>
- V) `8 O* E. a: ]6 K2 P0 a8 d5 R, r/ x- }$ n: ]) |9 A
这个方法比较简单灵活，可以随时根据页面需要新建和删除。' ]5 r( \; B( T2 n" S5 E" X3 y
+ P. Z+ h" l" V
7.定义链接的样式
' ?( a( |! [" @4 rCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
+ m( S0 f5 T) D9 R/ ha:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
3 ^7 Q5 I) \* d' u9 `a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
) ?" [ X4 ~# }( {: S% La:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}+ E% v9 R6 z, A [1 S5 y8 ^$ D
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
$ r9 ~7 |5 M" a7 j以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
