|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。) Q" r2 p' C, D( ?% a2 D7 \3 V; V
7 k, V& Z( U) J
1.基本语法规范0 }5 H1 t+ w) O% v% ^
分析一个典型CSS的语句：2 Z; `0 ~2 r8 L- G! h3 \/ \
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
2 c, ?3 K/ }# E/ Y5 K样式声明写在一对大括号"{}"中； 8 X- s& i1 _- b4 ]. H6 H7 s0 N, P
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； $ R+ e; ~ c. Y
"#FF0000"和"#FFFFFF"是属性的值(value)。# G. s# E0 h6 H
/ h+ p$ r: Z! ]7 _8 v# `2.颜色值
/ X) v: K' M9 L5 k: ^' r+ D ?) @: p8 L
( L: ?5 i$ p) l5 Y9 |! [ g颜色值可以用RGB值写，例如：
2 v- n) }: o) F. |7 J1 Y* |
1 ~& \ @% m4 K) E: B9 N
o! Z, {8 G' |4 r: l，也可以用十六进制写，就象上面例子( D+ f% ?) S6 a/ ~/ E/ F5 w
4 `- [: ~& w# N4 y; V3 g( I
! Z4 ?+ z. J. e3 }2 D( T* P9 b& \如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。8 G' T7 J& Z6 T
: P8 f/ J) Q2 I0 r
3.定义字体. n) ~- r* ~: I0 o
web标准推荐如下字体定义方法, k# Z! {6 D) H& V5 L/ t; h2 a
6 o1 S' t: q. {" O6 @ R
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
/ H: ~6 s- t/ |, n3 p字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； / ~' a @/ z: [. l0 k1 V
Lucida Grande字体适合Mac OS X；
! l+ ~8 P l" z' ?Verdana字体适合所有的Windows系统；
9 L/ \( V9 q; |" f. SLucida适合UNIX用户
& R' z# d5 K; u8 J5 N9 c7 S"宋体"适合中文简体用户; " |: c% F, [( Q. B2 k7 y1 k
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;+ R- @" `% Y' H$ w3 d/ R
6 T8 y: s3 D, t5 t$ J! t# o4.群选择器 b% Z; n" j7 I$ {3 ^: }
l* \, o- B- U* \9 w" l% e; E' ]
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：1 ^$ ^( G; A% X' g {
! N" A7 ]! o( ?2 J p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
* i5 a4 H' s" Y1 u) q7 \# K; F+ C' n j- q
6.id选择器) `" [* a r W$ N" G
0 c2 G& a! {; |用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
( y. ~7 _/ g, p# l$ D, g: Q8 ^& Y: R5 C! ^3 ~7 g; R3 e6 G! v( G
" y/ g. V s. I A" ?5 Q" F* R& e9 b然后在样式表里这样定义：
0 N" A- D4 `6 n5 ]" P3 G5 p5 X/ z1 ^& d8 K1 n: S& x; c
" K1 _& u' n* S& e' z, X" B& U#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
; H6 R) i8 E- O/ l# F' ]其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
' C2 f$ p6 Q. D. z( f7 T! _
1 X" P$ k" c8 h$ r: k. Oid选择器也同样支持派生，例如：2 x, m1 ^0 U/ n& D
#menubar p { text-align : right; margin-top : 10px; }
7 U. J: i$ o* A7 V' p这个方法主要用来定义层和那些比较复杂，有多个派生的元素。/ e, ^' Y0 }7 h, J) E( G$ U
/ d. t9 w5 i2 V5 `( k4 U0 {5 c+ G6.类别选择器
1 _( b$ Y. s% c" U8 `
' b! q9 S+ H# ?3 |8 r$ l, M在CSS里用一个点开头表示类别选择器定义，例如：
: p$ a& B- F0 _4 C.14px {color : #f60 ;font-size:14px ;}
* g& K" U9 j# P# \- p2 x6 B4 x
% x* N0 x4 n% [, x在页面中，用class="类别名"的方法调用：
# K2 O- D: x3 C<span class="14px">14px大小的字体</span>
' E* _& f' E8 o$ x& p u" `( z* V; ^- A7 a- c% \( Q5 k
这个方法比较简单灵活，可以随时根据页面需要新建和删除。' d! _7 U7 d: f; t e7 t
) ?/ O; g8 o1 X$ @+ ]& B, e
7.定义链接的样式6 I7 S6 H! k& q9 v. n
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
! U1 [* q% z1 f- V. Ha:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}4 p. ?, Z# H% R
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}. L) f% R4 g& w0 a$ ~; a. F' M! U; T$ N
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
$ p+ T7 e* I( s8 ea:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
$ g+ k: K5 i+ _0 E4 d* b以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
