|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
: [; M! {9 F' E
; Z# u. w2 ^% q7 t& F% U1.基本语法规范; m8 m! |9 t# d* A# ^
分析一个典型CSS的语句:
* r' g3 ~# x. [# c! O' Wp {COLOR:#FF0000;BACKGROUND:#FFFFFF} 3 U+ H2 A+ p4 H6 ], j
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
! }9 B7 | W$ [样式声明写在一对大括号"{}"中;
0 v0 D t3 V6 r5 m5 S% vCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; % V- N* C5 F; {! U1 Z
"#FF0000"和"#FFFFFF"是属性的值(value)。1 E+ Q' F, @3 C0 l4 ^. G
4 b" i8 y& Z5 H( E6 @! o7 S/ F2.颜色值
w8 e( D3 d) j
, F* q0 U7 \" k+ b颜色值可以用RGB值写,例如:% P- L, q$ ]/ ^) ~$ A# x) [0 r
3 `; q) s# \: {) y. {
7 K! U8 Z, T; l9 {, R,也可以用十六进制写,就象上面例子
5 I2 q2 F# t3 F) Z/ x, t B( `3 X
; P' h- {! L8 I; X0 ?
5 }* Y6 p5 t+ p0 I( r" y4 T0 A$ i如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
# n5 b8 x* {. w3 u9 T' o, s0 v( j8 ]6 |3 J
3.定义字体
+ ?, ?% |# R1 I l) b3 c$ [( tweb标准推荐如下字体定义方法
. p+ D( A+ v; n, F, q6 A' S1 o' P& O. j$ _
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
4 G, ?8 z3 k y3 `1 M) A# Y9 ]0 Q字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; b! h, |" A- ^: f# J% ~4 R$ [1 ?
Lucida Grande字体适合Mac OS X;
4 @" k, `) X1 f8 X0 Z, ?Verdana字体适合所有的Windows系统; 5 P. L- ^ A1 s& c5 ?
Lucida适合UNIX用户
# D- u1 k1 R3 y) x8 F"宋体"适合中文简体用户; . {. N. n" a/ H/ s
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
- _3 L) x: f2 c
* h5 O' P, H- Q! }( a6 |4.群选择器9 i5 Z' o1 ^3 W4 D \
4 |3 p6 c/ U5 ]6 \当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
- B: i/ x! p8 k
# f7 C- z4 o* u0 f p, td, li { font-size : 12px ; }
( i a, W. `. Y( t就是给li下面的子元素strong定义一个斜体不加粗的样式
/ @& K3 J: f. @/ y: u4 ~0 p) B+ g7 y& x! G9 H3 D. d. I1 Z
6.id选择器
7 _& K) ]' q H4 V$ S9 [; G8 n# L
& q5 D; N1 }4 h8 }用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层8 ^: y [) R J* L+ C% b
& E8 I* i4 O0 w0 M8 Q: Y! Q" W
8 K. l! W& u; @1 z
然后在样式表里这样定义:
' m/ c0 n. P! Q, l/ k2 G _- B; k Z# F% j# r7 d6 e- H" T( g! X
* T/ R, p8 f. } ^& ~0 y- y) Z#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
9 S0 t4 Y/ A2 j; c+ D1 r; J其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
" I% r# o- q6 c s! s, X, s# F
1 e! [# X" b* j. k; ^id选择器也同样支持派生,例如:
' @- _/ }) @' H! X#menubar p { text-align : right; margin-top : 10px; } & f. V% {& O8 q% s
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
+ ?& a; L6 W. [9 U( Z- X: [6 x- d0 P; q$ m" a
6.类别选择器& n& A) V2 Q4 X! ~) m
: R6 u5 S, f7 B$ O
在CSS里用一个点开头表示类别选择器定义,例如:
1 X" s7 s( e; W4 W.14px {color : #f60 ;font-size:14px ;}
, p9 r1 c" i) J$ F# Y
, n% d. `. S. n' x# s在页面中,用class="类别名"的方法调用:2 y9 r/ M9 l2 v2 U' a
<span class="14px">14px大小的字体</span>
) O$ A- d0 N4 }- Q+ Q% G# t; ?( E! X! ~3 y0 o. P
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
: g0 H4 B3 c8 d2 L( C/ _ z
( M6 f$ v7 J0 i- F; L( h6 h1 l7.定义链接的样式! D/ Z: F/ V8 B& x8 v4 G
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
* ^8 X: X1 I% K4 Wa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}7 B P' F+ m& Y5 W$ x
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}8 h* {5 u$ A5 X1 ~; O, k3 |5 B
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
8 B# \& N+ t' W# X6 M+ ~a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} v7 g9 s1 T- x" X1 o) j( ~
: y+ a3 |3 V% n* ^* M" F+ Z以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|