|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
+ y, n ~! T; {" {8 V1 h, Y' O( e0 P. F8 j1 z
1.基本语法规范( q& \- p5 c& @0 c4 m/ I
分析一个典型CSS的语句:
5 o6 O! e8 Q5 T, x6 v0 ]' t5 Wp {COLOR:#FF0000;BACKGROUND:#FFFFFF} " X* h9 H. r4 D# E
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
/ i1 n+ Y' W, ?2 @/ u8 m$ M样式声明写在一对大括号"{}"中; 9 H" R; k! L/ W
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 0 Q) T. n, O& ]. d" _, u' @) f
"#FF0000"和"#FFFFFF"是属性的值(value)。
/ ~( {' g+ D- e J( u1 B. y$ Q9 C3 m8 a) M$ F# l7 a# o ?8 ^
2.颜色值9 K! I4 @0 z/ r4 F' r# H+ y7 ^/ Z2 w
/ i5 j. n! _3 V$ d颜色值可以用RGB值写,例如:
/ C* g' q \$ M) h. X! j* A) c7 O% K" z
6 W5 h9 Q( P5 _7 A) Q, \
,也可以用十六进制写,就象上面例子
7 x7 r; c& [% V' g4 j
. n2 V( `& l/ T W% c' P$ R" {4 W' x& f, L* J
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。# J( L9 n" L. B# e
/ L/ D; s$ E+ s: `9 g8 G3.定义字体
' u& F) i+ V4 J4 K B, s3 tweb标准推荐如下字体定义方法 D5 T0 M! R# C6 E% o
3 P0 @1 e6 d" ]body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 6 E. W' B9 f8 B
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 5 f" W5 T% Z# y/ Y5 Z2 `
Lucida Grande字体适合Mac OS X; 7 c" a7 E* Z' X- }+ c5 p# J2 u" E `
Verdana字体适合所有的Windows系统; $ I2 u0 {! M9 c( I
Lucida适合UNIX用户 1 ~6 {+ d6 ?1 r( A8 o4 t! h
"宋体"适合中文简体用户; % b: s3 K, s0 i6 f9 a- l4 g
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
7 @0 Q) ], b' I' r" ]) }8 X' e" d8 d: B" u4 m
4.群选择器
1 {- I1 S: k1 n; |2 Q) j3 d. L+ C, t
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:' r/ B$ n* U& [" T: c, ?" B
, Q6 R( f. G3 E+ p. x% F p, td, li { font-size : 12px ; } 5 L4 G( I& L) T: ]4 O
就是给li下面的子元素strong定义一个斜体不加粗的样式
6 I6 f K5 ?6 C) C9 \2 [( }
& Y8 k% {4 x) m y7 R5 j6.id选择器- e6 B3 n1 K7 q9 \" i/ u! _$ a
" J3 q7 Z8 {3 e0 V4 d8 o用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
% A* M* Y O# f* P$ k# ~8 `$ c4 {, J* I! y y7 O4 M
/ t- [! P) w9 z# T
然后在样式表里这样定义:, ~" E0 e8 h$ i& {( y
* `3 \3 c S# |: V/ ], ?3 e" o7 g9 V
% h4 m5 T1 B3 y( K8 @# X
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
& H( H6 ^7 }, m/ }其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
$ q. t9 }0 v7 e9 `
- m9 S+ P( T$ s* ]: G2 Q5 Gid选择器也同样支持派生,例如:% `" Y$ b/ U# e- H- C) K% V
#menubar p { text-align : right; margin-top : 10px; }
5 h' e. t' l4 f这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
' b4 g0 g# }) ?: P, c1 l
v6 ?# o1 B6 L4 I2 o' V1 U2 d6.类别选择器
+ L9 e& I( U. @4 W* k$ k: \
, J/ [ W7 Y4 E0 c在CSS里用一个点开头表示类别选择器定义,例如:2 s- b$ Z9 r7 z
.14px {color : #f60 ;font-size:14px ;}
4 N. K/ j# y* r- h7 M s6 x8 C- ?. H/ V; Q* Y8 h! I5 ~9 `. @6 c
在页面中,用class="类别名"的方法调用:9 f4 N" X0 q9 y, S" Z/ l
<span class="14px">14px大小的字体</span> 5 W- d: T& T' |4 \" q% k2 C
% P: }$ c- @0 U这个方法比较简单灵活,可以随时根据页面需要新建和删除。7 J& E% W; L0 [6 |: s
) @% F- B/ P7 [6 g- B
7.定义链接的样式4 H% I% a4 }* y9 t$ z. `5 h$ Y3 d
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:% G: ?1 j( W1 X' U
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
1 x6 ^1 ?( j, ^! |# J1 m+ O# ^a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}$ P( T: K* x& n. ?1 o$ R( @
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}( G+ ]1 w# b( T) |: W
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ) V# K2 K2 p" U& d2 z1 z! y4 x
* L( g8 o# a7 @; `; |" G5 k0 t3 m以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|