|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。* }) G- A' o/ H8 C
% r- x U+ N* f: E: p. I. O y) F
1.基本语法规范
* b. j9 Q5 ?- G& ]6 {2 D; n8 |1 L分析一个典型CSS的语句：$ m! A. |0 l& b2 j9 W
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
4 U7 `3 X6 ?+ e& B其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
" r# C' v) M7 u& y4 J/ j. E样式声明写在一对大括号"{}"中；
; k# S% ^) I4 I" p+ L( zCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
( G2 ^) O5 [# z# _9 ?7 K) |! m( D- D"#FF0000"和"#FFFFFF"是属性的值(value)。5 ^) t( D) \1 n5 H
" u, M* ~) J. P
2.颜色值
) y& k: `$ h) x5 x
5 |5 H, U% U7 s) i/ i3 d A8 o颜色值可以用RGB值写，例如：
( U0 l: s+ E; c( z$ U" Q2 d2 P: E7 t/ \" n; W5 X& H6 G
B- {1 B# {. D- a+ t; a，也可以用十六进制写，就象上面例子, ?. F0 W4 s3 {3 ~3 z
) T6 W3 r8 V8 K% y% P0 d2 x
6 N v2 _1 Z7 O3 W' T7 p如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。& p0 A, D' y, L6 ^) p2 x( L& K) X
: |) Q' Q2 @9 S' V; J
3.定义字体: O: C! ?5 e! N2 l) f
web标准推荐如下字体定义方法, A, M/ S0 S4 D' H* G j
( n8 F; g0 H2 _" M$ ?body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
3 T" L! ~9 M! I- ^+ k/ j/ O& ~) P字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； ( U4 l: t) u" Y8 O/ n+ E: I
Lucida Grande字体适合Mac OS X； 6 H2 z/ u7 O0 z* `
Verdana字体适合所有的Windows系统；
' }" @. Q* J0 dLucida适合UNIX用户 ) p0 E' V0 b: N* Y% @. x" S
"宋体"适合中文简体用户; - B' z& `% }$ l" G+ c
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
9 g' _3 c' t; C6 f! V1 \% F3 R' I: Q% }* {& W
4.群选择器
6 a; L0 H, b) h' {4 S7 a; Z, O3 r8 n; P! B6 H% i% ?
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：) k9 r$ U9 \( O+ S
/ c7 J# E9 G" T: X" F p, td, li { font-size : 12px ; }
V' X t; R6 s就是给li下面的子元素strong定义一个斜体不加粗的样式
5 [0 [* ~; `: O" V- ?' n# x+ R% d! j. g" v& m% d' v" a$ C- C. Y
6.id选择器* P: I* Q) Z+ ?
3 a+ l# P, `( I+ k/ b
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层( n- x V W3 [0 |' ?
* p; I; T% o, W3 C7 i
% c' b- A( r6 @7 y5 f; X- O, o, ]* T然后在样式表里这样定义：
" ]' Y% q; Z: Z g& F% j% L" p' |% t& _' X
0 \" C* H% G. j9 a$ c7 k#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
- D! X, \4 |: F* s. R其中"menubar"是你自己定义的id名称。注意在前面加"#"号。2 d8 D% ~- m/ S3 n6 u$ W
3 V+ @5 P6 c5 K' l H" E
id选择器也同样支持派生，例如：3 A5 B; D5 K- h2 x
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。9 X* i$ h( z, u! T
5 y( u% a& y/ q) @& y
6.类别选择器
- {# ]& O+ z- q( Y' I* l# s( E4 Z6 t6 f1 h
在CSS里用一个点开头表示类别选择器定义，例如：
$ Q1 x/ T- b) m1 N' r4 }.14px {color : #f60 ;font-size:14px ;}
' b5 g/ Q4 U1 B" F1 A$ H( J
在页面中，用class="类别名"的方法调用：
8 ]+ r! e5 t' o, M1 K- Q; v0 ]<span class="14px">14px大小的字体</span>
. ~& s# A( i: q2 x. y+ Y
; [3 {" _- P* ?& f3 _! n1 r这个方法比较简单灵活，可以随时根据页面需要新建和删除。- i3 T6 S: E( N7 ~
: q. R& t: L1 ]' b; ?; |- N
7.定义链接的样式
5 E% ^9 `/ m0 o! C, hCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
2 s1 y# ]/ J/ k! }5 wa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}. u. _ m# F) d
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
$ e& S; p* R9 H9 Z$ [# Ua:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}& I, g/ R6 C# G$ u' r4 H
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
( l3 `! V1 ?4 ~# I3 {6 w2 ~; ~% }* ]/ a; H
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
