|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。# C/ Z9 q, W; o6 T$ _
1 C1 `! J2 |: }# G5 e
1.基本语法规范! H8 h# P" H% |' J/ F5 i2 N
分析一个典型CSS的语句:- i1 c2 u% a+ v" Q
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} $ Z6 Z3 M$ m0 j: f$ [
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
" y3 s" l; }/ ^: ^4 H! x样式声明写在一对大括号"{}"中; ) s# o. e! T3 E# W5 W, S( W
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
$ f- j& A4 W2 f6 M- M- _2 ]3 M"#FF0000"和"#FFFFFF"是属性的值(value)。, x: V2 q- p9 N( N7 V9 ^+ W& A
5 @- ^5 k+ {5 Q4 }2 U: F B
2.颜色值2 D& i- a& i' J; i% u9 W) F3 X
' z0 ~* H' G4 e- G; T
颜色值可以用RGB值写,例如:: j- V% v6 |1 D% {" k/ B+ _9 d
$ J# C* n% x% h/ K! t
2 G& Z1 z; j7 _/ J,也可以用十六进制写,就象上面例子) g, U. E$ e! c& r4 v3 Y
) Q$ h' `. ^' P9 g
. o+ C: ?/ d1 [* Z/ e7 k! m
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
- z/ C; y+ v, J2 I0 U3 R. T! t/ K$ M* Y; z' L! s( r5 a& s5 z
3.定义字体
) ~4 P8 ~2 u* j# K9 {4 `web标准推荐如下字体定义方法2 g# y9 c. f" g
* I* d/ h, Y/ [3 `4 Ebody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
( w" s1 L9 P8 w" w字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
4 [. u" A" u* V7 E: ~9 U3 m% m1 z( DLucida Grande字体适合Mac OS X; 8 ?; ^" L8 {8 X( \9 A
Verdana字体适合所有的Windows系统;
7 @3 l& b0 K- M' h9 nLucida适合UNIX用户
3 i1 E# o" S1 a. l8 T6 t"宋体"适合中文简体用户;
- S" X. L3 m+ {3 I# @) h如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
, L# \4 M, ~# O) u* F7 [! u* J+ {5 _
4.群选择器
4 h' V/ H! q8 i: z7 i$ S9 u3 ]* x* k( u0 u( f! T7 T
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:" `+ i, Q. P% e( X/ E+ n
: ]' d& T( W' @! `: L
p, td, li { font-size : 12px ; } 9 B7 G/ ^0 H. [ @, q
就是给li下面的子元素strong定义一个斜体不加粗的样式
y& f8 i( e0 ~ k" a
; `: Y. K$ n$ v6.id选择器. v2 p# r! b. @
, v! S; D( d/ k! w- F
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层# U1 K# T$ Y: u6 P- A$ P
# T6 {2 e5 l$ `6 u! `2 W0 h
# E/ U) @% z: n+ Q, p7 s3 C然后在样式表里这样定义:
7 Z! m7 P _& o7 ^& ]% ~7 g _# m! e2 J
4 o* [6 g, u! c4 h
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
8 [0 [# }8 e9 C$ M' _* \! g其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
% E2 X- q# S" V% w* O g `) M2 C
. O; ~: D6 ?# S0 D/ N4 uid选择器也同样支持派生,例如:: b* u, J1 p* Z# t2 K! X1 |2 K
#menubar p { text-align : right; margin-top : 10px; }
, I O: K* `/ X% X- |; A* h这个方法主要用来定义层和那些比较复杂,有多个派生的元素。9 w' T+ E& `6 ^4 y
; M7 w/ ]- ~ ]" t) s, w0 B7 ?% P
6.类别选择器 P: x- M( u5 f/ P& J m" Y
" L' `- A3 L/ O2 w% r
在CSS里用一个点开头表示类别选择器定义,例如:
/ V) s' T: C0 [3 p* | q.14px {color : #f60 ;font-size:14px ;}
4 g* \9 N9 f; ?' |$ l# y- p4 j; W8 N6 d7 |( ]9 h
在页面中,用class="类别名"的方法调用:
0 O5 m- t# T. I f+ A( _<span class="14px">14px大小的字体</span> % i2 s$ i( G! ^% S# s4 X6 V% J# G
( j& d: s T; _& a: e) T d8 S
这个方法比较简单灵活,可以随时根据页面需要新建和删除。( Q; n9 j: y$ ^1 ]) ~1 T
, P3 p& T2 L6 z; i$ T. H7.定义链接的样式
, y( v3 k: u, ^$ lCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
( n, I( Z8 g+ P) X9 ^. c- ]a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
) a; d- I" l' ^a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}5 l! @+ b c: D; q: W+ M
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}9 M, N2 H5 G7 L! @/ U1 l
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
% l( m: ~( I) \5 K, h( H$ k- X7 b
* T' t; @! d2 ?以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|