|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
& C+ n' q: R3 H. t3 i# K+ b
) j" f7 e( C. M2 p9 }* ?! Z1.基本语法规范; B g6 W8 l6 |6 ], ?9 F
分析一个典型CSS的语句：
, l; M) j7 i4 Bp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 9 n W1 X" S! s. i. _) A
样式声明写在一对大括号"{}"中； : n- m+ z) ^1 G3 `
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； , z$ x* t, z: L, S$ k0 n4 `
"#FF0000"和"#FFFFFF"是属性的值(value)。$ Q+ I! {8 `$ y5 v% @6 A- E5 }2 G V
- R4 K6 P2 r) U1 k! r, |5 ]
2.颜色值
2 S1 y V+ f, a# i- h! f1 B& G$ k0 ^& s
颜色值可以用RGB值写，例如：
6 q3 }6 P. u( J4 T5 N; ?* y& D2 f9 S4 c, }' M
" ~# B& \: R- L: z* O
，也可以用十六进制写，就象上面例子, Y4 r: z( Q2 Y# h
7 M( T4 h7 ~* p5 l# s0 Z/ {
f' Z$ Z# X) b3 L& R. a; n! _如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。4 M- m/ A8 c& v
' g" X! \+ N3 {$ q. G2 f3.定义字体
% ?$ r/ I) _: C) e. l1 qweb标准推荐如下字体定义方法, I! e& Z0 R5 Z+ ]9 U, t# G2 X
+ q- h9 O4 e8 f1 l3 r. L/ l5 `. F; ^
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； % M( ]0 s! X% u
Lucida Grande字体适合Mac OS X；
0 N# t1 [( o2 O3 mVerdana字体适合所有的Windows系统； & U; i" \1 z2 y3 R
Lucida适合UNIX用户 " W% K0 Y( x* u# ]- I7 z
"宋体"适合中文简体用户; . S- c1 _) a- c& e( {6 |
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;% j% i* X/ q' U
, M( ^& l' n4 f5 r
4.群选择器
$ u! k m2 E& u$ q, q. _! Z4 h$ C
7 A3 D7 |( D9 H% k当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：7 e) N6 `2 _. b+ J
5 j- P; @: p2 A
p, td, li { font-size : 12px ; }
' _9 e% l" }# w$ `- o; X! \6 U就是给li下面的子元素strong定义一个斜体不加粗的样式6 j% k% j+ C0 F. b( U
% g* u' Y& V% r. w9 D6.id选择器+ {6 `- i& D, B8 Y3 h& j0 R$ f
" j3 b+ [5 b; \2 J- }% b用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层% B7 R; V w# @3 } K6 Z
, x w" s& c9 f; z) O5 }
4 D+ e: ~& E q4 y- D/ a: l) Q! W' E) l' K然后在样式表里这样定义：
% ^1 V( j, m7 {9 x; ~
2 D& V: _; _4 x1 x5 V0 u& M! d! G7 m1 g/ P. l
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
; ^8 N8 P% p* k0 r$ b其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
* P6 n, R9 q' A2 c M, e2 q. E; Y ?9 ]% L
id选择器也同样支持派生，例如：
# P1 B1 ~5 g3 d! I#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。5 p9 _" t t: K: D& h; S) e
3 V, c: Z3 o' k) r- \5 d1 e6.类别选择器
2 f4 K( y( i. J2 \7 M. ^) ~
9 S! s( R0 Z9 ]# c1 o2 ~" n在CSS里用一个点开头表示类别选择器定义，例如：- w5 p- ^" i$ v- L/ n) U
.14px {color : #f60 ;font-size:14px ;}
. M; X$ Z; x5 Z, J
6 x* k% v" a& G) l1 u* S3 z在页面中，用class="类别名"的方法调用：+ R0 E$ Z0 @" K+ X2 g
<span class="14px">14px大小的字体</span>
. S8 s* J& X2 s; a3 a
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
& I y2 g; q* Q1 K0 z: S6 D7 y) V" r4 J1 K2 `$ P& L6 P9 X; x1 G
7.定义链接的样式
+ n: G. h8 ^8 t' w8 w2 y& ]CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：1 }' S/ u9 c* T
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
( P$ ]" a) h+ f4 aa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
2 R1 r/ R: q* u6 i4 U9 Fa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}' }8 O- h/ J. R3 K; c
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
2 n* _5 @& q7 [& I
' O1 O7 M5 [" Q5 Z. S以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
