|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。, `* s$ F0 {- _1 Q6 s
( _! m# S( ]# G" A/ ^9 ?. c1.基本语法规范
* e! B* q% X& {9 E* u分析一个典型CSS的语句:
+ s0 ]: E$ |; ?- Ap {COLOR:#FF0000;BACKGROUND:#FFFFFF}
" a& n# A* R& d5 [+ Q9 R8 \其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
$ R% r; s! q* v% B样式声明写在一对大括号"{}"中;
) W# Z: s3 m: Q- b6 j0 MCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; $ Y |7 t1 o. Q. b5 v
"#FF0000"和"#FFFFFF"是属性的值(value)。# d- W# Y) q3 u$ ~; b
" r0 ?# P. M8 p3 o. ]% Y2 A) z$ v2.颜色值
" b/ S" e! S9 ]6 W6 U/ }
; x) T$ Q+ ^& [4 `颜色值可以用RGB值写,例如:8 w; \1 K" F4 J' j3 D6 k( h
' ]/ n" L$ S( G- d1 }0 `( {, d) T9 R' X5 L& N5 J2 y+ Z
,也可以用十六进制写,就象上面例子
. n% ]1 M! C( E5 a* j, R) R" n
2 ]& v3 I) p: D! |0 p7 @
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
. |' `: S' a6 u/ f) ?% w) O3 }- Y- t7 c0 G& I% X
3.定义字体7 A$ l( y) `, |! ~
web标准推荐如下字体定义方法
' ] f: Y. R2 }( _& D' b5 C$ s
5 L9 p4 Y2 W; R; Cbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
) D3 q' B% _! Y字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; H" |/ X9 R/ K8 A
Lucida Grande字体适合Mac OS X; h7 l7 r7 g, M! Q+ C, \4 b
Verdana字体适合所有的Windows系统; 7 u0 j3 _# u/ ~
Lucida适合UNIX用户
( u0 A5 @ e: v# S5 w"宋体"适合中文简体用户;
; M4 x$ Z* @8 ?: r* E9 P如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
- z! }4 n( E/ H
+ j) E2 L& i- e* e- ?4.群选择器
# ?% C! S }! [$ z/ [: |9 L# B+ I" T5 i
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
6 S8 ], B# G9 W1 Z. {8 u+ w1 z& f* w
p, td, li { font-size : 12px ; }
7 P: ~) c& k4 z4 i/ L5 j* ^$ u" j: `就是给li下面的子元素strong定义一个斜体不加粗的样式
! Z/ l" r+ |2 E4 R
: j" ]5 C8 z: q* l' U' C, F$ B6.id选择器/ H% g" L9 G6 i. y/ g
6 S3 Z9 ]1 _/ U r6 ]# Z! R h
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层+ m2 X% P! n5 e' A
) h; r' Y" w& z) V
. S; c2 Q0 V/ w O" @5 J然后在样式表里这样定义:
7 ^/ N4 L/ C1 S' P; g p" e3 o6 J6 S f8 Q
- l& h: @# w4 F7 C- W8 v: `6 i#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} , F. e/ f9 [0 X$ c7 Z3 ]% U
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。5 N; |! p. D, U7 T" _ E
* N0 ^1 A: |3 j
id选择器也同样支持派生,例如:
8 `% r. U5 k. J5 z. y8 I#menubar p { text-align : right; margin-top : 10px; } 0 ^( _8 }/ S! n( D
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
q0 _( \* g0 L5 v6 X; e4 Y' a$ s
; t5 E( {( I8 {! l3 h% L6.类别选择器
3 e+ u0 w) V+ S
. i) j: \5 i5 }# K在CSS里用一个点开头表示类别选择器定义,例如:
7 i) U, h$ Q8 X9 x2 @5 n( \.14px {color : #f60 ;font-size:14px ;} 3 g [ E5 J/ j, Y$ b7 ?: e
0 g( |. a4 T1 \& d) `. X在页面中,用class="类别名"的方法调用:8 D4 A2 M% G0 }, e }! f6 D$ t3 J6 Q
<span class="14px">14px大小的字体</span> % H; @% W: F2 c- C( t4 S: M+ B
& M6 J& v) a. E+ K' j0 T
这个方法比较简单灵活,可以随时根据页面需要新建和删除。3 }1 O4 i! c' h* o
$ o3 C+ P/ o. T+ T3 J4 y$ y( X! N
7.定义链接的样式! s( E* q. p; A# y8 s( V
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:6 [* S5 }) _ H: k$ v8 f6 Z8 H
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
- y c& Y" {( m3 Xa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}% W( B6 i- d, Z* M# I4 ^: |
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
1 h' y! u: k- aa:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 5 k0 M6 x2 a- z
7 j3 J2 l6 `" E/ p) a/ d
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|