|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
2 |) i$ a" T1 ^+ e3 D9 w6 S' I. M7 ?/ V" E
1.基本语法规范
$ M* R4 e O, P G* y4 C分析一个典型CSS的语句:
/ l. b4 |( i% O- xp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
' N7 @7 ?" r% I9 Q3 [2 `其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
" u1 G4 Z2 N+ m/ Q6 k- h样式声明写在一对大括号"{}"中; ; _3 a9 |* w6 G5 }( J# T* E5 q$ T
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; r4 p* {/ i, ?
"#FF0000"和"#FFFFFF"是属性的值(value)。7 r" v; ] j& T; M3 g# Q- S
. |0 I7 E+ ]/ _% c2.颜色值
8 F" p3 Y/ ]' i, i7 P7 E5 B3 \; q" H. E* m X3 A/ B; ]
颜色值可以用RGB值写,例如: i( i" ?5 J: s, N% B/ N
) W9 Y! ~* D1 ]% o- I
$ j4 S& \9 N3 K# b2 ^5 {7 Y- M f,也可以用十六进制写,就象上面例子/ Z% Z5 \3 ] @! c* g
. W0 \! e( ?: e! B& S- G
' t5 A t; g# [: }" X8 I m如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
* [8 ]6 ~5 \: V7 j
7 T2 Y4 _4 P* D& x/ B, |3.定义字体( s5 q5 W- N |& i
web标准推荐如下字体定义方法6 E+ t _4 o) [ O% |. l
# _3 u1 p& v+ [6 V7 }" f9 z. {
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 4 p6 s/ Q# \, I `
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
9 l% j1 D1 \. N6 A: cLucida Grande字体适合Mac OS X;
7 U0 N" z9 i9 H8 H1 oVerdana字体适合所有的Windows系统; * Y" [, z2 k7 K% j `7 C7 d6 }, R, S
Lucida适合UNIX用户
( Z. C3 T/ V. V0 i"宋体"适合中文简体用户;
- Y1 f, l* k5 K& i$ a& p如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;2 U$ Q2 m8 `9 u! f) \; _
# }- N- F8 a$ g! J6 c% N3 b4.群选择器
! P7 L- u8 B) C# u! j5 C6 K: b0 H3 Y, J; z8 Y" [3 s& |
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:8 P& h2 X Q/ a* C: f. p5 r
* N# U& w7 m- Z# p p, td, li { font-size : 12px ; } # Q! }! |/ j) S, T3 h- ?$ L
就是给li下面的子元素strong定义一个斜体不加粗的样式
1 U7 {# b0 [% \+ F( j7 z, Q) u" \ R& p" v( P' U9 d3 o% `
6.id选择器- X M9 y3 o6 o4 ]" |6 ^
, f: }. ~2 C, `& C; q: x
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层9 v3 }% y2 I! q$ j* E+ r( ~6 T0 w
, j8 Z$ M1 f9 {* q/ h" u# P) m! ^1 b+ z& U/ i+ R- l, K7 j+ ~/ X1 a
然后在样式表里这样定义:. x9 h2 X% ]& I/ g
! n; G' V9 h1 G5 n4 E" ~ P
' r/ _2 K% o' s% {2 Z* T#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 5 `6 w5 c3 D% F) \% r3 b% z
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。" \! \0 E% G' b3 o2 D& k
( q3 u; B4 E O$ Eid选择器也同样支持派生,例如:
& q# \0 s: f8 q' A, |8 ] g5 M#menubar p { text-align : right; margin-top : 10px; }
+ t% S0 L; D: g& P( r( Q5 F这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
. y( K! u G8 R8 A( q! f4 u; C( k
/ Q3 O- B8 J$ T7 |, q2 w6.类别选择器
2 Z* ]6 d9 E9 [, I# t( A% S6 | C4 ~0 V
在CSS里用一个点开头表示类别选择器定义,例如:
$ z# R& i/ B9 m' W& @' \6 i.14px {color : #f60 ;font-size:14px ;}
* r/ o3 x- e4 o8 ~/ s3 j; F9 O: ^5 q1 K& Q$ g7 f
在页面中,用class="类别名"的方法调用:
" Y f# y" U* v) R3 V<span class="14px">14px大小的字体</span>
. ?% L7 H ^( E' P* W, s: ^- E: C
! m$ _# l( p% Z! `' P+ b% ~0 P这个方法比较简单灵活,可以随时根据页面需要新建和删除。+ W8 W6 g3 C6 r0 j$ B2 W/ F, K0 C
9 _$ O6 O4 J6 e% y6 l- p" Z
7.定义链接的样式
, C! y0 T/ U3 u& o' A4 KCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:% `1 t: M' \/ Z5 n% n
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}4 p& G& \9 |, w, r% I; c8 q& j
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;} j: J* h" L& U7 L
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
, ]3 H! \( m9 @# C! j, ba:active {font-weight : bold ;text-decoration : none ;color : #90 ;} $ Y# y. P9 k# s; @! M- Q3 w& X
% v2 Y# l5 \) J
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|