|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。% h" O. Y. c( M/ p8 D y. J
, p+ Y: N- B! r* {! _1.基本语法规范
& l2 f) s( }# Z' E# x1 W( A分析一个典型CSS的语句:
) E+ h! ?" ?* ?6 ^( N/ vp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
6 q! @/ |0 n$ p$ C( J, Q% c) j其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 4 D" m/ U ^! u/ H R z' E
样式声明写在一对大括号"{}"中;
g& j4 Q" X! T; A8 ~COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 8 A( D/ ^- G+ [( k/ M
"#FF0000"和"#FFFFFF"是属性的值(value)。
1 H5 M6 a! _ n- t+ t( y8 o
4 }: {6 V; r) C9 ]4 e+ x- V; p. @2.颜色值
- k( f9 T4 Q- n& d
7 M, o; t. @8 S颜色值可以用RGB值写,例如:% q) y& |+ F" j% {# e8 {. ~9 j
) `* m9 x8 F I8 I' o$ k) A. g9 l
,也可以用十六进制写,就象上面例子
: y: U, a9 ]1 M2 D. `
1 W3 j$ a9 t ]9 E0 F1 b1 Q
$ A/ g6 w9 w0 C7 [6 V; n如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。, R& n8 |# |' w
6 T- ^9 L4 u/ w9 F% v& q" E3.定义字体1 p2 k) C, p1 V$ _, e
web标准推荐如下字体定义方法+ M4 J% h' H6 D' m# H) o
7 s" E# l' j9 ^5 W/ Qbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 8 R3 R9 v: a2 m
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
+ N3 w$ S( q+ n, P0 G$ vLucida Grande字体适合Mac OS X;
* t5 Q5 V- z+ M N0 ?; L: FVerdana字体适合所有的Windows系统; * g5 u) `7 U" Q+ @8 S& c, [9 Q# J
Lucida适合UNIX用户 " V% G6 C, Q# k) w! F0 z. T
"宋体"适合中文简体用户;
% p3 ?' }' a* V I2 O8 `如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;2 p9 ?; E# e% w% G6 X& o; w) V
4 q' N/ c% I4 n$ x& Z
4.群选择器
/ z, @6 d8 h5 m- }2 @! \/ U) s) T
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
. t h! L4 x% m0 w% _5 b9 y$ h7 S9 | F3 W3 |5 @7 @2 C
p, td, li { font-size : 12px ; } # T2 A7 t! F- e+ `+ ~
就是给li下面的子元素strong定义一个斜体不加粗的样式3 G% X' R3 s; L6 P, [( ]
, {* w; }& @: U- G' y5 W: i) P
6.id选择器
+ G+ h. i; ?3 L+ E K; y
+ b; z# w5 W% T0 j用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
6 d# }" U9 }% R4 _: @ g; l8 _# i5 Z% s) ?% k
+ k8 R# ]3 r; h5 P
然后在样式表里这样定义:
4 j5 D4 U$ R+ v7 P% }* y! E# P
; N& n: j' W- O8 A) y0 b# M% \ H! R! `, z$ m' w9 ]$ j, y1 n
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
: N B. N( B/ l6 S: ~9 f- l& c其中"menubar"是你自己定义的id名称。注意在前面加"#"号。- i% h4 E" L* j9 F
' l; T" t$ S) U4 W4 ~* M
id选择器也同样支持派生,例如:$ \" o" ^. C& D: g ~- n
#menubar p { text-align : right; margin-top : 10px; }
# s, e; N1 [4 r; J# P" ?/ }% W; F这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
# \" R: g0 A: a7 [8 \, S1 D" |( ~# Z1 \% r9 f9 c7 m1 Q
6.类别选择器* |& e" a! X6 s1 ?
* j- M6 K8 {3 X/ D( y* Q
在CSS里用一个点开头表示类别选择器定义,例如:3 X; [9 ?- H! R
.14px {color : #f60 ;font-size:14px ;} & W+ E) O& m$ Q! C# R- d
& Q! d4 l* Y S3 D! F, z# `7 r
在页面中,用class="类别名"的方法调用:% f) c7 Q5 e" G- m
<span class="14px">14px大小的字体</span>
; ~3 g' h2 e" j! {' k+ l1 ?7 u) q4 A1 T6 g4 ]. p# W5 s
这个方法比较简单灵活,可以随时根据页面需要新建和删除。9 j- n" S& f, t
- p* Q4 p! G: L& w7.定义链接的样式7 }9 h- M- w% E" I
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:$ \. ?! o, l: {, ^/ Y( ]
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}9 O" I% Y* _& q& }/ C `( C5 t& O
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
8 W1 x e8 d* C; E1 H. [a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}, h3 Z" h) ^2 e3 l9 ^3 w$ c
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 2 I- b8 @3 `- b4 s L, ?
! N$ g: ^4 q# ^3 o4 z以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|