|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。+ g2 l" l: y$ D, y; U
x* ?; V- @0 y* @2 q( f( x
1.基本语法规范
. ^4 y1 d% d! U5 m d) @! K6 @分析一个典型CSS的语句:1 Y; i5 E. s' J( g2 U( r
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
5 e4 K+ j* W# i! @& R6 f其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
$ C6 k. D* }- A2 Q( `$ `, U- @样式声明写在一对大括号"{}"中;
0 h1 J r( C5 x1 ?, c: |, KCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
6 b( [( z+ o$ v3 H4 x"#FF0000"和"#FFFFFF"是属性的值(value)。
0 C" z. t4 V2 [' K
' ~# k2 U- ^1 B: h: Y2.颜色值! E) A3 J) I8 y3 Q7 Y- ~
0 Q2 o0 V/ R) l$ f6 d
颜色值可以用RGB值写,例如:' |) [" V, g; |2 N# M: _9 Y
" u2 b; X: l/ D
" j! B9 X4 T% }' j- Y
,也可以用十六进制写,就象上面例子2 A4 _; f2 K% b, E/ b" E/ e$ Y
z5 }% ^% }, [- h& J! {+ s' P
* }3 M' a( u3 j' A9 t! n
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。) C9 E; E: x+ ]0 U5 D4 Y5 T
# B1 `# w; Y! l7 m
3.定义字体
$ M2 N* G9 Q8 e5 K- Q l6 i/ Kweb标准推荐如下字体定义方法' } x8 R1 ]' _# u# @. x
; E& y7 \* }( R6 B' x
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
6 p( J& W# v) C字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
. d) q' e" z, m# S% lLucida Grande字体适合Mac OS X;
( n: [0 d1 X+ q" a: F( aVerdana字体适合所有的Windows系统; z H# c& s- F. r* [9 _8 [6 f
Lucida适合UNIX用户 . y- e2 K$ _1 k/ G3 y
"宋体"适合中文简体用户;
) p7 _0 i( \8 [1 {7 V- ~% q& B如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;, l5 m& T3 F5 E: o. a) U) ? E1 W! M
6 |. A# \% O7 S% b: j; e
4.群选择器9 G) S$ c( z6 s; o
/ F& Z. h( P% d4 l+ p当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:; _/ P9 y8 f0 C7 ]6 L7 |
7 T' }" d$ z) A& {: @
p, td, li { font-size : 12px ; }
7 l# E; ]: L6 i$ M就是给li下面的子元素strong定义一个斜体不加粗的样式
# K# |3 }9 T( Z$ k' G" {" R' q/ W4 b( n9 a
6.id选择器
/ A2 h: Q! ~# N" t7 {2 D9 D, e6 G
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层5 E9 }, K! S6 j. O
& `( ^0 Z6 n C/ |$ J# d6 z) a1 s% Q' X3 X% B; k. s# U$ y
然后在样式表里这样定义:2 m8 ^4 I; I6 a2 c2 ]
" r+ W' q, J0 o' F1 [
2 g8 {" A+ J9 H8 B, Q0 f#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} $ _4 ?; X( z# G. W. J+ h1 x! ]8 L
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。( l2 U0 f5 H, k6 m% ^
$ N* R* |, a1 g+ v# }id选择器也同样支持派生,例如:, {& B$ D& T4 J' L1 n% e
#menubar p { text-align : right; margin-top : 10px; }
. E; c' o6 y7 _' A1 u4 M这个方法主要用来定义层和那些比较复杂,有多个派生的元素。1 j" T) E( `: v/ d1 A' `8 b
3 I$ f( k3 ^+ T7 Z* q( _6.类别选择器
/ l: c7 c, J; N$ K& @& z+ W# C( m$ x4 T0 Q" I" B! ^
在CSS里用一个点开头表示类别选择器定义,例如:* O7 {& z9 J) d: Q/ P/ r8 b
.14px {color : #f60 ;font-size:14px ;} , Q9 X+ z4 j) W
$ h; O6 O7 u8 a+ G2 D在页面中,用class="类别名"的方法调用:" o7 i! P* x( k, u! S& @# E+ M D' a
<span class="14px">14px大小的字体</span>
9 F0 M& ?0 g7 d6 L; v4 S1 t2 v8 ?
7 P; u) l+ t" ?& E& y4 k这个方法比较简单灵活,可以随时根据页面需要新建和删除。, a8 K* M+ N' U# l4 t, v& }$ Q
5 }7 q4 E- a3 Z( |$ l
7.定义链接的样式
( p \% T, o0 B5 FCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:5 ^5 e/ f; U$ z0 F" s: Z3 ^. z/ Z( a
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}) j/ r- b! k, t9 w+ V
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}9 O+ D, D# n! N; n
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
& J/ K3 p4 c0 z( v. E$ f) H3 Pa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
% a& \0 R! `& l0 \3 X/ ^$ r$ z5 g$ ^* M# ]
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|