|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
' _, Y" @6 c' D9 |1 W, S( m9 t4 e! d1 x
1.基本语法规范
: w4 l6 j0 K! L+ h& r0 N分析一个典型CSS的语句:
' d4 m' r% z& h9 s/ N8 a, kp {COLOR:#FF0000;BACKGROUND:#FFFFFF} $ M* Y) _% {& h) S0 C2 b
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
/ @6 q% k" S) N" t样式声明写在一对大括号"{}"中;
6 O8 G+ J$ e) S: K+ e6 M( BCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
2 N7 o1 j! e# L% {+ t. }4 M3 @"#FF0000"和"#FFFFFF"是属性的值(value)。
- x5 ?! M7 e( m$ D, u- u; r( ^# I4 P# v6 o* C9 T: V
2.颜色值
( M7 U1 U1 x: I# F' o0 |5 L# `5 u' u8 j3 i# _
颜色值可以用RGB值写,例如:
& ?# J2 C5 Y$ Q5 e. L
. H2 o; L9 J3 u+ k0 x1 ~1 j' X: O( [8 F& ^
,也可以用十六进制写,就象上面例子3 _4 T3 J6 q, T5 R2 E' H" L
$ `$ x0 A$ P4 k8 ~2 {7 I. ]) ]6 p2 V5 T+ X! n
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。% n# C# n9 s6 J9 f7 X1 {, \
' Y7 A# l, e- U+ f1 F# z$ l3.定义字体
4 q3 X3 w" M0 T+ ?- ` Eweb标准推荐如下字体定义方法$ w' [4 {' U! ]9 m! z$ e
; X' Y; ^$ M0 v& nbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
; r* ] R$ ]* A# {字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 0 @* f# E$ b4 ?) R) s$ _( k
Lucida Grande字体适合Mac OS X; ; l: w1 ^# Y' D5 Y% H0 d
Verdana字体适合所有的Windows系统; 4 Q' }2 c% t1 Q. w1 a1 G
Lucida适合UNIX用户 9 D# d1 l! f1 \0 F
"宋体"适合中文简体用户; 6 ]; F) s$ B% g
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
, b4 M6 D/ l, d6 w; I. y
8 p# v7 j# x# s- a: Z! ?4.群选择器
( h, b1 M/ S2 c9 b
4 t: D3 F8 d. C2 B! D& Q2 K8 y当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
% K) c+ V M7 k: b- J5 J! K7 T' d- i
p, td, li { font-size : 12px ; } ! w7 [2 O3 O: B. b+ y/ V8 j# a' A
就是给li下面的子元素strong定义一个斜体不加粗的样式0 s# l9 b8 x$ j0 V8 ^
+ i$ b# M: L: d& V" e0 R0 t* E) B6.id选择器& R4 g' o2 P2 ]( \- j2 l; f
4 ]; M+ R; o# |2 s9 o2 Y# Z6 V
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层 Y5 p ~# \% |
4 v/ e7 b u# J7 ]# ^. |: }- |7 U2 M3 L9 h5 Q+ |+ s
然后在样式表里这样定义:, p0 ?/ p7 V7 B7 k( S }7 j
d7 Z# U4 @" V0 k) `
& Z) r# N% r% B
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
4 X# b4 S- h, S6 l* w# D. [其中"menubar"是你自己定义的id名称。注意在前面加"#"号。: N( ?3 \% K3 k v4 q P( N. I
0 |! P ]* Z6 g& g6 n$ ^- L4 _
id选择器也同样支持派生,例如:
; E; W X3 T2 W$ V2 f7 t9 N#menubar p { text-align : right; margin-top : 10px; }
+ M, K# L v0 D5 F* e这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
( T4 q! L8 b, H- }* b( N1 w, w4 m3 I4 d" d' R0 d/ Y4 e5 e
6.类别选择器
, P6 b1 L4 v/ _& Q0 J4 Z5 ]1 f
. i& z( e( e' ]0 R7 b4 {% U在CSS里用一个点开头表示类别选择器定义,例如:1 K8 i6 W, d+ A: D
.14px {color : #f60 ;font-size:14px ;} / X) v) r9 i# @* B) V( [( j
$ y: q! b0 S5 C/ U' ]在页面中,用class="类别名"的方法调用:5 \- i; ?7 s0 {, l8 }
<span class="14px">14px大小的字体</span>
* v# q9 K( J& W1 E8 G, \0 b/ v
- m$ P1 F* }+ V- ~% j7 [, G1 w这个方法比较简单灵活,可以随时根据页面需要新建和删除。
8 o' w, q) a; @8 R
e; B9 U+ ?: C+ j0 R, ^+ `1 V7.定义链接的样式( e, p0 q6 e, D! ?' `$ p
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
# _3 P) q; u8 M; Z8 [5 }, Z3 wa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}' k% \0 K' ~* K _
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}6 ^) w( u1 v3 `6 W
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
! ^* ` c2 ~$ b3 Z; {2 l7 |a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} & P' j( e- k2 _% g' D1 `. c
4 g+ D2 |0 [% N7 P以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|