|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。. n1 H0 B2 @% x: h- M
- |0 z# p0 J1 k* R1 q! Q
1.基本语法规范
! u( g% a9 N+ |) {$ g3 G) Q分析一个典型CSS的语句:4 A% q% q* J, m. i) K6 o1 ^
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} & \% K! A, `; L) v% e# R
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
5 C* ^; x! P1 p# Y样式声明写在一对大括号"{}"中; 6 @# U9 n, L. o+ M; g( n& C3 l
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; ! D* \; A+ {+ I) ~
"#FF0000"和"#FFFFFF"是属性的值(value)。& Y; L' A7 r6 Z, m$ q: Z5 R0 X
& x% j& ]- n! [3 ]
2.颜色值8 ~5 I8 k4 @8 T- y# M4 p, \' H
5 W$ g' ^5 ~6 {4 E3 o
颜色值可以用RGB值写,例如:3 S, G4 U0 \8 K
2 S& P( K1 |$ c& O. T) g
( @. W* A8 y! [- m. B,也可以用十六进制写,就象上面例子
/ V$ b5 b* @" K
& M" q" g# g9 G) \
1 ?9 G0 }2 c; `! i# A如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
& l2 Y$ _& b. W9 _) m, Q6 U' G( Q Z5 g; |
3.定义字体1 h0 q l+ `: ?1 Q1 l
web标准推荐如下字体定义方法
% p# O3 m5 S% `- \# C
2 `7 o8 }1 x- B$ y$ gbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
" W* E" M4 i4 C0 Z m+ P. b" e字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; * A7 t( S6 O3 h) M
Lucida Grande字体适合Mac OS X; 0 M0 @. j; z' [% |
Verdana字体适合所有的Windows系统;
: O, A+ {: r0 ?8 nLucida适合UNIX用户
% [8 X* |! T' b2 q$ }& f! D* a7 J Q"宋体"适合中文简体用户; & F; d, O; J" i: c0 W+ @& U& U
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
8 ^3 f2 S7 F& I$ Z0 r4 Y4 ~% D' q% D& f
4.群选择器$ _* s4 t/ Z. z- j
5 r) h( e- B8 o* W, A C& L当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
$ e6 R$ c4 E! Z: B% n; ^ p: |3 W( p3 p5 V% B% b& E
p, td, li { font-size : 12px ; } 8 a# Y W2 i% C
就是给li下面的子元素strong定义一个斜体不加粗的样式
" M& r' }) P& w: x" [1 g3 [9 y6 J6 S, ]- K; n; ?; [& {) o4 z
6.id选择器
2 G- F0 U+ X4 T T) a# U
+ E: N7 M5 G* b* a0 Z6 ^用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
: s- j9 K' b; }# B5 A: d" Y0 c. W3 I; c6 S+ M- c1 d- X
! | k# s u% F- w5 k" ]然后在样式表里这样定义:0 E. @4 ?% ~& T6 W A
8 |5 w. u5 j, [3 R* j- ?( c3 F% H: J2 T+ {
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 4 x- \7 f8 G, R# m
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
3 A, ^, o. u' _+ E9 G, H+ M1 S" t1 l! w; x$ \
id选择器也同样支持派生,例如:
- [) @& C1 d4 Z" j: b/ W7 f- a#menubar p { text-align : right; margin-top : 10px; } I) V, ^8 U& J1 j$ C
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。5 X0 z& s, @6 @6 F2 ^
' Q+ d6 [4 c" p8 [# ^0 Z$ {" L* h6.类别选择器; b( G+ O7 R7 v/ w& c4 J) |
/ B8 z# d( e& f) W( w
在CSS里用一个点开头表示类别选择器定义,例如:) O2 f! o% {7 F, m1 y
.14px {color : #f60 ;font-size:14px ;}
7 @6 _' H8 @4 k6 E# X
& d. s: X! u- U7 \' E1 i9 w% D在页面中,用class="类别名"的方法调用:
8 k, f, L, X0 f& h# Q5 @1 d' Y p<span class="14px">14px大小的字体</span>
Y# k8 ^5 A, z+ w) f5 q% G- l7 n: M% ?" k- N! X
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
2 c# O1 u5 A+ N6 t' z$ x7 i
: \9 J# {# V/ a2 w7.定义链接的样式" Y' m5 |) J/ R) n3 R
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
0 ~8 c/ Q% D& V3 u8 x5 ~. ?2 c/ Sa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}: Z6 X2 z) n0 |% n' Z
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}! |3 {* w, p: E0 {% g2 Y' M' c
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}4 X3 V, M0 Y" M2 h2 d
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ( U+ @* }$ s+ K! C W
: `' P! l/ J* `" O, q( x% B" o以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|