|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
" U8 O8 `! `0 ?/ S" k% t' ?* `& J: ] |
1.基本语法规范
. t/ H' x' V# v. M) x分析一个典型CSS的语句：
7 f5 l: `) q( zp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； # v; z2 u1 e# d, U: F
样式声明写在一对大括号"{}"中； / y& z! n4 w; l# X$ ?
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； ! { S, [2 j3 l" q
"#FF0000"和"#FFFFFF"是属性的值(value)。! k' d) ^2 g* l- T7 t
; B, {' J1 ~. b
2.颜色值6 W" _1 ? V& L, b+ m
# c. z) w6 w" R! S$ ]. T/ t颜色值可以用RGB值写，例如：
9 ?1 @" W. O- G. U' q
: I+ }8 n- L( U& N7 Q$ @: A# M
6 I0 W6 g4 \; j; R6 j" O" q9 a，也可以用十六进制写，就象上面例子$ i/ W. y6 b, A4 ^: [2 t3 \
3 z' ^* r- n! a9 m) P5 c9 d8 X* g( I& V
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
- G6 `, e/ e5 r, ~$ S1 @8 c, E0 j. w) c/ P. {' ?9 U5 {
3.定义字体" ]* A- l" k# K# Z
web标准推荐如下字体定义方法1 X6 Y* u+ D; u. h2 X; `& S! s7 \
# F# }- F1 k4 e8 i9 S& ^body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
: V3 Q( F5 f( |) `4 A* r字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
4 K3 p9 K# |0 t, }& }& O. ILucida Grande字体适合Mac OS X； / J0 Q0 e- n2 M t% `' `" Q6 w$ [. q
Verdana字体适合所有的Windows系统；
9 l% d8 _# ]7 V2 n4 {& S7 tLucida适合UNIX用户 0 x/ s2 s( Q1 V& o
"宋体"适合中文简体用户;
, r) z4 g2 f, G' _) N如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;- B5 y; |) Q/ i* l5 ~! |+ O
) v/ w# O9 T- q2 E, {3 f
4.群选择器
6 j6 Z0 _+ [' N4 H2 W& y* t- D, _0 e$ A( X
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
7 H8 }8 X( f* [$ T2 Q, R! {0 S# e2 T! h9 }# ?" C
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
8 L! x# @$ S, }2 S% w+ Z( g/ Z% Y& t9 S0 M$ }
6.id选择器" s+ X' F/ H& L3 f4 L3 |5 ]2 T9 k
8 ]- t* d+ o) Q! ]" r
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
3 D! Y D' U% U0 E0 d0 S* A) _" [# Z2 V* m
% |3 x" e; Y( b' B9 h9 o
然后在样式表里这样定义：
( `. `* L7 i; h
) l5 O- o. t q e# w8 _: z/ y0 U( p k |9 n
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。7 l' X6 k2 P5 T; j4 G
4 z$ n8 B" [- a& X% K1 k0 Wid选择器也同样支持派生，例如：, S5 ?/ `( T) X2 h4 u" P! [5 K
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
/ [3 y1 Z8 ]7 A- ?# O* P% A6 t1 F: q5 Z* ^! P' X
6.类别选择器4 s/ `2 K3 _1 v) n
4 V' f7 }4 }- ^) J9 \: [在CSS里用一个点开头表示类别选择器定义，例如：
/ \6 k W) ^% k4 I+ f0 ].14px {color : #f60 ;font-size:14px ;}
1 G4 l) @* ?% `# ]
在页面中，用class="类别名"的方法调用：8 D" B o: K! R# J1 b
<span class="14px">14px大小的字体</span>
( [# _$ s2 s) }" x, P V/ r这个方法比较简单灵活，可以随时根据页面需要新建和删除。
' C. q2 [, G% U' l" C
7 J6 b9 M% G' D# Q w% w7.定义链接的样式
( l7 U6 d) G* Z$ M lCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：$ o4 r8 Y$ t0 N5 r6 k e
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}. E1 v' Q* c" U& b, P9 U
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
7 ~& G8 g# k; D# o" F2 Z& ~- Qa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}& R! A7 C# ?) Q/ A# P1 e* P; }
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
& t) j5 X! [# I- M9 b4 i. P' ]& p% w Y( J% m# u
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
