|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
s. }' K1 O% a7 P; j0 d
) L. \0 u- @1 y0 e. V- \1.基本语法规范 w) J+ v0 l" |, b9 X
分析一个典型CSS的语句：
; E h+ c/ U8 L9 i7 g6 ~p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
4 v {8 g: U1 D; g' D- X( R样式声明写在一对大括号"{}"中；
4 u" d- B3 E& n( L- {5 @- ECOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； 6 h. W( U. @! S8 }; L" C! \0 f2 ~
"#FF0000"和"#FFFFFF"是属性的值(value)。
; Z9 X% O2 M% {* v! y1 y2 m- [5 `. z8 E# s
2.颜色值1 p8 K# ]+ O- \* i4 y8 N
4 _6 B5 V3 e% p6 [: j& g- z
颜色值可以用RGB值写，例如：" Q% \# w% L7 F k. t; ?3 ^1 C
! e$ l3 K' Y T; l
: v1 I6 }1 O4 s) ~0 u- k* r/ C! l" i，也可以用十六进制写，就象上面例子
% |; r# C4 X6 W
% T1 i3 F& q4 D
+ P$ X+ r3 J- C& R0 S; ^1 S如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
2 u" W a$ I! t& ~2 V; v, K$ e. z' m4 h) [, A+ D
3.定义字体! o+ D" e' t8 r V5 B% }$ I! h
web标准推荐如下字体定义方法
( I' P h* R/ R
+ N8 O" w1 b1 |% _6 c, r9 C! abody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
) ~; e1 |0 Q z2 H* F3 q9 G4 Z7 iLucida Grande字体适合Mac OS X； 2 ^" k" j6 Y9 s- r
Verdana字体适合所有的Windows系统； . n' i- V3 L9 I6 [. z+ G
Lucida适合UNIX用户 7 E- F* n2 ~8 u) q
"宋体"适合中文简体用户;
3 l: p1 O; B7 v$ Y: N9 @+ Y如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;) W) `! z% |& }# @! `* y* |
* g! O0 K; Z R4.群选择器
6 z7 O! d& G# p* J/ Y. m1 }' o7 a$ s$ _5 C7 S5 ?
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
1 t8 A! O0 U) h
% w' b3 I/ I6 k) {8 H2 m$ D p, td, li { font-size : 12px ; }
7 o$ M) b: \% G/ h, n就是给li下面的子元素strong定义一个斜体不加粗的样式: V$ B- j" U) Q2 r7 P3 b
4 j# {1 a" j9 _! n; m2 z8 l5 o* v6.id选择器
& h, r* f9 {7 ?2 n
5 z \, j, O6 m7 Q用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
- |4 R! M, e1 e% s3 Q1 ^+ q- ^ n) ^% R+ k7 \/ u# m
5 @. r$ |7 \8 z3 J* j% ?
然后在样式表里这样定义：2 ~3 i, G: B5 L* e
1 L* E' s# a7 ^! B/ n7 z# B
0 z& i. {- L& G#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
' o( A' V! F- Q! n其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
7 O! A* Y8 s& h- _4 T, R; }7 }
; e$ d# S. Q# ^" K% `% H' mid选择器也同样支持派生，例如：
6 M4 t6 k+ P) J) l$ j' ^" @4 N#menubar p { text-align : right; margin-top : 10px; }
, L6 ?) {5 H, ] |这个方法主要用来定义层和那些比较复杂，有多个派生的元素。5 j# m/ _6 W0 M8 r
. I2 S$ [5 x& y. d/ G: V' }6.类别选择器
0 r4 P H. Q1 U( i9 o4 o; U- w7 r5 M/ o" ]* e
在CSS里用一个点开头表示类别选择器定义，例如：9 n% ?% n& Z5 X3 i* X( o
.14px {color : #f60 ;font-size:14px ;}
; ]4 j2 [& c* r3 V1 {2 ]( q
; ]& I8 X; J. F; w4 E在页面中，用class="类别名"的方法调用：& f) g# s- V5 e* r: u
<span class="14px">14px大小的字体</span>
# w0 ^" ?) D( I/ B8 G# ]( P; g这个方法比较简单灵活，可以随时根据页面需要新建和删除。8 @* L+ q, q; v+ {( `
1 i3 }! I# x' g8 N7 Z
7.定义链接的样式
% U! }1 L1 w' X& V3 z9 p: jCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
/ g; @: M$ i- [a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
5 _ R+ A3 ?) ^0 m7 c% i; E* ?a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}7 h# M. m' k; k# e& {
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}* l, G# x, S8 e9 N! M. L4 P
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
& E; X6 o: h" ]# [0 r. |
" T# {; U6 v' B L$ ?9 z1 b以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
