|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。7 ^! d l a6 r0 [. L3 t E
5 `3 q; Y/ A' Y1.基本语法规范( _& s8 e7 V/ i) p- d; G
分析一个典型CSS的语句：$ q6 j( M$ c3 D+ h, C% c
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； ) U1 t. e y3 e" G' t$ t6 u
样式声明写在一对大括号"{}"中； , d* z6 U( Y$ c" A" r+ I
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
( L" E1 K# v) Q: j+ l"#FF0000"和"#FFFFFF"是属性的值(value)。9 L7 Z. [/ }# M) ?1 }, ], U; h- e
; i, ~9 m- z' D( r- `% ^2.颜色值% ]) o7 D, E% W# B7 a
; V$ `1 q8 X6 z
颜色值可以用RGB值写，例如：
& r9 N4 \* G0 I3 |' G) S8 E4 H# \- m( G% x
- ?9 @( w6 `- I" L3 E- }' c
4 R1 ^3 }$ s* n6 ]* v5 k" F，也可以用十六进制写，就象上面例子: G4 b, O7 t9 L& O% M
" R6 H' ~% d8 s- x i& `+ x$ ~; a) r) m) S! V7 J
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
# N3 S! o% h+ D: T) [
S. T) e# ]% P: W8 c) T$ R3.定义字体
) n/ l0 U% R, I" O) xweb标准推荐如下字体定义方法4 g; f$ V O' @* n j3 S- O9 M$ U
- M0 B; O) n) D: \ V% o/ s
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
9 e7 X3 F& K0 k% G& e( y字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
$ s" H7 {( {( ~. bLucida Grande字体适合Mac OS X；
# M1 \1 H9 J$ n* S M9 r3 n6 OVerdana字体适合所有的Windows系统；
! {7 |) m0 A8 r4 o6 q' M7 T; K2 X! ~* tLucida适合UNIX用户
2 p0 a& Z. T; v3 n2 Q3 H. E"宋体"适合中文简体用户; 6 c1 e; P' g, ?" o' ^) ]
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
I, |5 u) H2 b& ]7 ?7 |1 e: p) D7 [+ X" g/ w* H* J9 X
4.群选择器
0 f8 {% f& J* i+ c @" Q5 J
0 x: U& |6 X9 ?! w, L* d2 S当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：1 s: i9 B- {0 s# T ]" X
$ j& [" Y( C1 E# m* ?( `- q
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
( K+ R3 ~! m6 ?+ R$ K) m0 _) h. A; b9 K+ f, w; u
6.id选择器
& u0 y" C: E" T$ k' j% ~0 l
8 b: g, L0 s2 V0 ~% |0 j用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
% Z/ v) ^9 N# |. r3 _& ^/ {2 O2 g6 p5 M o: f4 G6 H
& O+ {* u- a0 \& @, Q7 ~4 n! ]然后在样式表里这样定义：6 Y- T0 M# g9 V5 V) v: C/ ^
9 `3 ~, c' u% j! M# u7 x
* s( m2 g, A4 x: g" H
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
6 y# T t0 M2 R' c# S' C7 D3 i. Q+ g+ X
id选择器也同样支持派生，例如：
c k, l! `/ U4 u: G) T1 Q# e& l#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
9 J) o. j$ D$ j* v$ |; t! p5 ~" {& W8 U. E7 ?0 s
6.类别选择器4 d& r T7 a! t! U, _% _
+ Q: O" A. W4 l+ a8 \5 C" ?5 S
在CSS里用一个点开头表示类别选择器定义，例如：
7 ]7 K' E e8 ` Z ^; U.14px {color : #f60 ;font-size:14px ;}
0 a& j; x0 ?9 ?在页面中，用class="类别名"的方法调用：' }% {9 v' D, n; @5 c
<span class="14px">14px大小的字体</span>
+ ]& {* U) j7 w1 m; c这个方法比较简单灵活，可以随时根据页面需要新建和删除。8 I. m5 e' [1 ^4 a! S0 w# j* D
$ q0 A9 H" }3 ^; n9 }# D: H8 h
7.定义链接的样式
. H8 t0 t6 @7 f+ M* M: ZCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
N2 i6 s/ H! F3 ma:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}; F% T: E p4 {
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
" G2 j9 n* h- A( o; y# Va:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
4 K3 a) e+ q% Wa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
9 T- S- T6 j+ N) Y/ F3 N+ b; S G
0 L1 r, y0 F# J4 L+ X. D; |( }# I以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
