|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。- W# t7 }* w" S
( W9 f; J" t2 N9 c
1.基本语法规范
Y6 s: r# r. e7 t: g分析一个典型CSS的语句：
* H$ b+ ?3 _+ B. m6 Y" ]p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
) T$ R# M% X! n7 i) X) z, [样式声明写在一对大括号"{}"中；
( A4 T- \! o4 n! b1 s7 @* d! }3 `# N' qCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
0 H8 r6 |/ ]) j X/ E5 n, f3 g"#FF0000"和"#FFFFFF"是属性的值(value)。
4 q, I, k# {! z4 C
5 g0 K4 q8 K9 F$ L2.颜色值
( M: s2 Z* I1 b
6 b) `5 t' U+ E* V颜色值可以用RGB值写，例如：9 `- P2 \: Y- O9 ]+ D6 y
b; ? M2 S% t8 y
# @5 G* | Y' w，也可以用十六进制写，就象上面例子
# ^, _ j9 S1 P& Y& |; ?
; x) Y( M' F4 ^$ r7 V
" j) x" e- r: j2 m9 g0 X6 N5 y, G如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
1 u& W4 ~" E/ _0 ?5 b! z. Z5 f+ b! m2 w" b4 }: g
3.定义字体: k, P7 a2 N9 l8 d; D1 D
web标准推荐如下字体定义方法
( e G' |. i9 [, }
9 O0 ]9 j- l, s6 L, O) ^body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
5 X# V) ~8 f. \$ G, r! H字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； , {9 d# ?7 I7 x8 Y" n6 J h) ~ G s- x
Lucida Grande字体适合Mac OS X； & U/ [9 ]5 S: ]/ [
Verdana字体适合所有的Windows系统； 2 D) ^7 U+ R+ ]- A$ {; F6 |
Lucida适合UNIX用户
0 b( i) o& E: P. {& f- l"宋体"适合中文简体用户;
! X/ z. w* X% v: s2 Q$ a如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;! h5 L, t( ?2 y, q
4 u2 A# f- j( B
4.群选择器* P t8 ]6 |0 }9 Q- L2 h
7 O( }; M* ]1 u- r. c
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
( Q7 A5 M9 C* f; z: ~' {) a3 t; k# S; | i0 g
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式1 U6 N$ C( A3 A+ j- F# B
& o' ?1 F0 F+ r2 w; F
6.id选择器/ N3 |# q% k0 |, V5 {
* T4 Q# B, T) i5 V% F
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
+ @3 h' f. ?5 C: c4 c$ G3 D/ e- A, P V$ W0 Z! l
6 r* ~- ]. J$ O& ]
然后在样式表里这样定义： k1 L3 z5 x7 A) l J
. w3 W2 l$ b$ n, h) M
9 m4 A; k' d4 O#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。) @# h, h' X- T3 F7 r Z
! G$ C5 j: N9 V+ S8 d4 b! ~0 Bid选择器也同样支持派生，例如：
F+ p( d" _ y' s& I#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
4 \- L$ c9 U1 \7 A- l
; q/ c1 }! ]' Q: \6.类别选择器* K4 L4 Q+ p& W# |% r$ V
& q. d L" A6 C) [* }2 ?在CSS里用一个点开头表示类别选择器定义，例如：
- o1 m P% o% N6 e+ V1 X.14px {color : #f60 ;font-size:14px ;}
% h8 l3 f$ ^! y2 t' v; U/ }
- q" i3 z0 c4 H2 a' v0 R& K# w8 n在页面中，用class="类别名"的方法调用：
' \9 n3 o- D7 t& F- r, X. _% E8 K! \3 y<span class="14px">14px大小的字体</span>
: m. L1 y3 x" O$ ?8 k- b, g9 |这个方法比较简单灵活，可以随时根据页面需要新建和删除。9 U/ S2 y& O9 z! o/ W
* A w' `0 u F: Q7.定义链接的样式) h7 w& J( a2 Q- X* K1 e
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
% t: f& f# C. fa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
& s: k7 \0 w* U( Ua:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}% E) A3 F/ ?9 ?9 U
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}& X2 U' ~* w L: x; S! W5 R7 W
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
( p7 u4 Q% e1 d! C以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
