|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。" N2 C) M' c. M. b5 g! A
3 b' F' ?( h" G
1.基本语法规范, R% t- x, i3 u W R; m
分析一个典型CSS的语句：
+ M! W6 G B- e% Xp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
" ]* g+ _( O3 @/ Y其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； * v3 C3 ]9 _' Z4 n G/ ~/ a
样式声明写在一对大括号"{}"中；
& b3 V1 K* W* g t& c D& \COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
) p- @0 s1 t* f4 ^6 o- s"#FF0000"和"#FFFFFF"是属性的值(value)。
$ K/ t: f) P9 G+ g5 H8 ~6 x- C ]5 x! q6 b, B# l1 K
2.颜色值
0 P/ Q$ ~% d/ r8 F8 k2 O1 D
; L; p/ M" v2 c5 e" f颜色值可以用RGB值写，例如：
" F/ ~( P5 u+ z. \3 H; d5 x- b5 e1 P
- I" Y( y/ A5 f+ @* F
+ w8 Y- x' n/ k. n/ H/ b' C' Z，也可以用十六进制写，就象上面例子
6 e$ g4 U" w5 j9 E) n: Q+ U3 Z9 g% S' ]- g$ c
: ^3 \2 t' L* |& O2 H
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。- l9 x* M. _( S/ F% j3 d! e' a
' }( {/ L' J9 R
3.定义字体# z0 ~, J8 o& z/ e$ ?
web标准推荐如下字体定义方法+ r; z/ w; D) T! s8 H
$ [* ]/ ]8 s- [0 e- a
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； " f5 x/ Z N8 B: V
Lucida Grande字体适合Mac OS X； * N p" F$ ]0 z' l1 s
Verdana字体适合所有的Windows系统； 6 n5 o3 d! ^+ A& p# f0 I
Lucida适合UNIX用户
# N# H5 `1 b( S- p( m"宋体"适合中文简体用户; 6 |' Z* E/ B( `5 m0 s" L( ?7 \1 ?
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;7 L% Z5 `7 P c6 ^2 P
1 t9 h" T( k. m* e4.群选择器
2 E1 B F# C+ L; O$ n/ f0 S
4 t" d' V: D- B& P; k5 u+ F当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
{8 U, I7 j! t
2 P! B' L* \0 |4 A3 A p, td, li { font-size : 12px ; }
2 _8 K5 d1 @: A# p0 j就是给li下面的子元素strong定义一个斜体不加粗的样式" Z8 U! M, F8 d8 b9 u
) f7 i% A" U( t' i# Z% |: K' w
6.id选择器: r! M, j' U8 o. |) t
; Y$ q2 ^5 Y ^# B用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
$ c) G' l) Z0 x
: T* M. O ]: q2 M9 ~ p' X8 b1 u, ^1 g, w
然后在样式表里这样定义：
6 \/ ?, G7 }" o6 R8 d3 N m5 b) w0 K
) v! p! g" F `( o# a" y
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。3 @0 [& q: e' p8 Z4 ^' I
; {+ s X' I' X, Z
id选择器也同样支持派生，例如：9 H8 l. c+ E9 G7 E) j V
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
& p7 @9 E$ O( S) s. M* k% G' N' a+ U
6.类别选择器5 n, N1 P" E7 U, d/ e
( e, w. R, A; A7 E* d3 n
在CSS里用一个点开头表示类别选择器定义，例如：
. X1 c) m3 K. r- n& O5 b.14px {color : #f60 ;font-size:14px ;}
* U% p1 E: u" Y1 \
4 {' \$ U G- ~ A$ i' k在页面中，用class="类别名"的方法调用：/ J# @# u; u; p7 i# A |
<span class="14px">14px大小的字体</span>
' s" ~& P+ h! f7 b
; P0 O: A8 a/ D3 g这个方法比较简单灵活，可以随时根据页面需要新建和删除。" z9 j2 h$ [7 G
% Y* e. |9 q9 ]" E) h) F! l; z7.定义链接的样式
: h/ o6 B n6 ~6 L$ oCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
3 Q2 E/ [7 a2 d8 o, ea:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}. B& c% N j9 H5 t i5 B
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
8 y3 I4 I; }. Ca:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
3 b% n) R# t' d; |- Y3 ra:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
* Q& B! m) o* }& C. v% A0 R' K2 c6 E' H0 g) U3 J
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
