|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。% l/ o% F' a4 D2 k
5 f2 i) b; d. F7 F3 \$ H
1.基本语法规范* d( a+ y) T% @0 K. X7 U
分析一个典型CSS的语句:6 @ W5 H( S+ U( ~ N
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} , T8 M6 ?$ q1 E7 n K' M3 J T! N% U
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
- H+ H; P, [' ?8 {; A9 k样式声明写在一对大括号"{}"中;
" ?0 L9 J/ b* Y+ MCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
. I! O+ k7 }" ~% L2 r"#FF0000"和"#FFFFFF"是属性的值(value)。
+ d- _% k/ r/ W' N1 D: e# B; B. y: s
2.颜色值
1 s9 c+ B; u& C; b! y% f2 M0 C
8 m, R6 Y1 Z" b! e7 { x5 _颜色值可以用RGB值写,例如: A. [) D* ~4 s! S$ \
5 t% w3 s- X& z2 v
5 k# Y+ _) n/ B4 e/ ?,也可以用十六进制写,就象上面例子
- W. g5 y7 i& F+ } H
6 {: l$ e7 T0 \$ ?4 O- O2 d6 x! o, V
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。! F9 u2 f A+ [
$ B$ l; k* A/ P3 E3.定义字体+ ]' E, b$ @/ J+ x! ]% H9 n7 m
web标准推荐如下字体定义方法1 b2 ^7 a5 @6 N! _
5 C) I2 p6 G. H' s- v1 ]
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
- N0 Z$ h* b5 ~( f$ i字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
! j" Q& Q; S* T( j9 ]1 GLucida Grande字体适合Mac OS X; ' b4 X5 R, E8 z# ~: x
Verdana字体适合所有的Windows系统; , A6 ^8 `& `7 N& n, v7 Q6 J
Lucida适合UNIX用户
. Q" w8 F% V, ]- D% M. d, X$ H"宋体"适合中文简体用户;
. S$ _' C9 B1 {3 F( k, e0 ^如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;( {4 x1 Y4 T' l- S2 C' n
. x; t4 `/ _/ e) N
4.群选择器
- l/ b$ ]! ~4 Y" g
2 v* H6 }% X s) [1 F' u当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:$ Y) X% |8 @1 Q- T4 V9 c* A
% d9 N( x! y# B' x( B p, td, li { font-size : 12px ; }
3 Q1 ]$ l* y! t就是给li下面的子元素strong定义一个斜体不加粗的样式
( w) y1 s7 S y; x" k- ?
6 N4 k& r1 O7 F1 B3 M2 X7 S6.id选择器
) e; }+ E9 ~5 B- T ~0 g0 [; ?8 V0 u; D# K' @3 K+ j9 L
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层+ `0 i$ D: S3 O: u
! \ L* H3 h6 _3 L' }' x
) S8 t& E9 U7 W* {" Z. w4 \然后在样式表里这样定义:3 s6 l% R4 H8 o3 B1 P
; u* E2 ]/ o4 i
: X4 @4 h1 Y& x& U#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} # p1 O, j$ F& i* a$ f4 k7 J* a
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
h2 W1 N8 u7 Z% X! s+ O
: \! z4 j; M3 r' Fid选择器也同样支持派生,例如:4 L. N7 K, i8 Q2 S' y
#menubar p { text-align : right; margin-top : 10px; } % m8 a% A! R5 t6 | [
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。. l4 P1 W* y1 s# R* Q$ K( v
# P# k* ?7 m+ }, h: K+ B9 i! s# D% j/ r. U
6.类别选择器1 A1 g* \/ O9 z ]- i5 ]
% B' i7 [- q" p( S) \0 E$ |2 q在CSS里用一个点开头表示类别选择器定义,例如:
" k- L h: }* N, R* v! ^- Q.14px {color : #f60 ;font-size:14px ;} 9 w. p- Q" G# y5 Q8 B+ J- v$ `7 C
4 @# o+ ?8 k; T; i# ?1 I在页面中,用class="类别名"的方法调用:
. x# O) L8 H+ j' f<span class="14px">14px大小的字体</span>
6 Z! K* Z7 W% W% [
# |1 V' `9 }7 I* t" h这个方法比较简单灵活,可以随时根据页面需要新建和删除。
1 l6 u3 T) j& _# R, I( z4 F# C4 Y$ k5 ?5 \3 Z
7.定义链接的样式
" ]7 {' i2 Z) l' ^5 ~2 T8 CCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:$ \' E1 h7 {+ k% m- b+ ?8 z& j
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}- a( ~1 d' O; Y0 \# w7 y
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}5 w- X2 q# }- ]
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
* l8 _8 ^- n8 y5 ta:active {font-weight : bold ;text-decoration : none ;color : #90 ;} * [ `3 j( m% q8 s
5 T X/ q% C- {2 c! c5 {以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|