|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。3 n& z# m5 K ]# Y. R$ W" F
+ S# `. c# D! Q1 w) s- M7 |, k1.基本语法规范
! B1 D: O9 l- [0 ?, @ a分析一个典型CSS的语句: ~' Y: Y5 M, f5 y7 T! c% [
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
3 N; B; H& p( F其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
% Z6 n3 _, ?8 N$ k- k: d# a样式声明写在一对大括号"{}"中;
4 ]. a( w/ @# C2 O/ {2 B$ v+ BCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 2 d3 m9 j: D. r2 V7 ~1 L
"#FF0000"和"#FFFFFF"是属性的值(value)。
% H x7 G9 v7 x4 X: O# L; ~% X2 `3 L
2 Y- K" _9 u i0 b) U9 v8 K6 L2.颜色值
3 f% ~* n5 [/ r$ c- G) p# @# y; u$ R
颜色值可以用RGB值写,例如:7 n! [$ k' F- L) @4 ^
; s4 G' ]3 G( N# v4 M* L
( f9 t+ q3 b+ ]
,也可以用十六进制写,就象上面例子
3 y7 t. S) X8 ], N8 f+ F0 T7 \" U, a3 n, G+ W
8 L( s. ?" ^% v: w5 i9 y) S如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
; X$ ?0 D/ t$ s9 d: L6 G$ l0 E/ C, x4 E/ v. S: T
3.定义字体
0 s: H% f# T; b7 _$ {4 t& ^web标准推荐如下字体定义方法 o3 f' s% T% k: u
1 r& u' G/ n$ Cbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } : K3 P3 w6 q' R3 U. y+ v' w
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 3 _- t h! v6 L
Lucida Grande字体适合Mac OS X;
: A4 X( v3 I2 d- GVerdana字体适合所有的Windows系统; : Y6 r1 l7 U4 h' {" c! ]
Lucida适合UNIX用户
0 X& @& }; ~* v& N' l"宋体"适合中文简体用户;
% W$ j8 s p: D如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;! Z [1 y; u* @# ]
: i- y, J% g, S f4 f, O k0 I. t4.群选择器
4 @" U3 J9 c3 K: `) p3 E+ O2 G( `' P* h' d W! U4 R
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:, H5 V4 g; w6 ~ P8 @; R& S/ Y
* n% ^0 K% {" |
p, td, li { font-size : 12px ; } 3 P8 j( J! _" r0 x
就是给li下面的子元素strong定义一个斜体不加粗的样式
6 n" u# e$ q R) t" W) p! x( `' N0 C$ p. x* u8 w: o
6.id选择器
5 E+ D2 A: x# v, l1 e7 d V: N; c8 K; q9 y: [9 |$ H" [
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
, z* \ R8 _: b5 I; j+ Z6 F
, l% T& H. t4 m# E' ^0 F9 F/ ~5 h; |9 j
然后在样式表里这样定义:; G' ]' Q" J9 @2 L: z% E
0 a2 f1 _: Y8 I" F
/ o' w$ S Y( I+ }5 i#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} - m; K* l: b2 S- H# b
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。$ L% H- f0 ^4 L' V: T$ a! [
8 G9 U% x6 F: o$ g8 n }( M; _0 Yid选择器也同样支持派生,例如:
& K! h M* F9 A o/ \) ^6 }+ L#menubar p { text-align : right; margin-top : 10px; }
9 b& ]2 [4 i4 B7 m( U' p这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
0 S \% ~" d) ]3 I: A2 j; B* {5 r! t$ c9 |" v& Y& g
6.类别选择器
/ {% @6 j% Y! V9 ]+ B: v3 X- O
( _: Z& \! Y j& B8 R8 S% a- Z* ? `在CSS里用一个点开头表示类别选择器定义,例如:) k* i n$ x: K* H3 `) u
.14px {color : #f60 ;font-size:14px ;}
7 w6 s, J) Y0 @, b' H; ]* F8 Y; f, W i
在页面中,用class="类别名"的方法调用:' Z' V7 |3 P4 i4 p9 [2 ?' c9 M) [) A
<span class="14px">14px大小的字体</span> 7 K& g) o2 V/ }
" n% m. ~" L3 u- J6 ^3 y( m6 Y
这个方法比较简单灵活,可以随时根据页面需要新建和删除。; V* \0 x# V; K; `
2 [0 H2 S: @4 A' g/ M6 d; R- W9 X7.定义链接的样式
1 G( B9 r( i0 \* v7 tCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:8 r: ?$ F! @7 I' A8 z" l" s
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
9 w- y+ G* r: O( ~/ O/ Wa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
* J. U8 P# R+ R$ `9 T3 P$ la:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
6 _3 P7 B& T) j+ ~% z& r# l& i2 ~! E% ba:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
+ [' v; Q! Z$ J: ^# y) B4 R/ L8 f! Q% z
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|