|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
8 B* f5 n+ i: ^
0 }% ?6 g4 p- p2 T+ g3 W1.基本语法规范) g; X; V+ v) ^6 _7 M& D
分析一个典型CSS的语句：
) U H2 d0 N, M3 i: i$ J7 ~p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 6 A; _( b) D) I: h
样式声明写在一对大括号"{}"中； 1 w" ~, V8 `+ H7 v
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； ! f: o( X7 n$ _8 X. e, m* y
"#FF0000"和"#FFFFFF"是属性的值(value)。' E2 ]. G6 Z* i5 \8 ^" L: Z
3 ?" A' h" a. B. e r- h6 J: `
2.颜色值
R# u) q. F( _, N: j9 H ~
* ~0 `' K& @2 H. Y; ^: n颜色值可以用RGB值写，例如：5 m8 {: B! U+ w, S8 |0 u( g! Y
3 _0 ^) Q4 P0 l$ u
/ K& I) r$ E, T: S) i( w2 z, @; V" F，也可以用十六进制写，就象上面例子& M$ b. q/ [' _( r& }) _' ~/ l
/ x" S# }$ P6 ^0 p6 `0 S$ L7 p* Q
8 S! p, E( S& |& d3 E, t如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。# c) m# L' Y. }. k5 D2 b0 o8 f! f
( K( k3 R6 Z' x" Q( k4 y9 e3.定义字体
$ }7 A7 T- |. J! cweb标准推荐如下字体定义方法# U9 f3 ~$ G+ a! J. s7 T! d. n
2 t* n, s) N& }
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
" A) C& ~* W5 [3 e; r" S0 i字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 1 K' c$ t" [9 p' W
Lucida Grande字体适合Mac OS X；
8 v5 v T; l7 a7 k5 M' |Verdana字体适合所有的Windows系统； ) l9 h, X$ {$ x4 R# {8 r
Lucida适合UNIX用户
& {2 w" i+ ?- r+ y% c"宋体"适合中文简体用户; # e( M* H7 @! k8 E( o) X8 h# D
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;- t" G# {2 E* u. T v. \5 Y! y
7 I9 ~* f% W1 h" x; F. ^
4.群选择器- ]" P" R% V% w/ z3 R7 n2 h9 e
% \4 }* c) W7 G5 k( a* o! g# z) m6 \ z当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： i2 i5 C$ ?' K+ Z& I5 {6 }
* P/ W& n3 p9 w; b5 i. `6 e p, td, li { font-size : 12px ; }
+ J) o1 S4 t' E' U就是给li下面的子元素strong定义一个斜体不加粗的样式
5 Y3 |& m" \5 f4 M& C! ^6 |4 u' M3 X* `6 X+ Y- p
6.id选择器4 I; I0 z) D: R; H% u% L
) C1 m9 ^: |+ f7 Z* ]用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层2 j; h! s9 t$ e
% |0 F2 |$ t5 A6 z" r6 o% s6 Q* L( Y% k0 p; A( c( s N6 l
然后在样式表里这样定义：8 Z, ]4 k8 f+ F3 c; F' @" M; X
' f0 t* A6 H0 R" k- x, Q( [" [: ^8 E" w! ~
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
& ~8 K7 w" e `$ T4 a/ J: M
3 r# K- ?* W( nid选择器也同样支持派生，例如：
) w/ j6 w+ m8 b, Q6 u# w5 p2 ^. P2 E* ]% Q#menubar p { text-align : right; margin-top : 10px; }
- I( R/ ~9 V$ B8 R! a& E. Z这个方法主要用来定义层和那些比较复杂，有多个派生的元素。3 A; k% U j0 U/ ]
F/ F1 N! U ` b
6.类别选择器
# f0 K! v1 D) D& d6 y4 o. K2 S, O
2 D0 D2 i& m1 h, t4 d% z在CSS里用一个点开头表示类别选择器定义，例如：' i8 z) j2 W+ @! X) H
.14px {color : #f60 ;font-size:14px ;}
3 l) V% m5 u1 ` C" q; e" _1 e, A+ w8 @; F- |+ D% ]! V7 ~
在页面中，用class="类别名"的方法调用：
8 ]/ G- Q; i3 i<span class="14px">14px大小的字体</span>
% Y& B" T0 z) H3 ^
这个方法比较简单灵活，可以随时根据页面需要新建和删除。* }+ t; H$ k/ T( o, N1 w( a# F
" ^8 m3 \# \2 T8 `1 p" v
7.定义链接的样式8 z$ k* `8 q& b- z5 A3 A5 F
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
# ~2 p4 R T6 x" Oa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
& H# y* a( @! L% | J+ u# ua:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
. P. |( ~9 X! |; X- K% qa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}1 m: n5 m- C" E
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
1 B9 z. ~6 R( B; a' s( s
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
