|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
- q% g X2 v& G; r* G
) s6 Z q8 \2 B: w! V. J1 r3 ~1.基本语法规范1 T- {# Z3 v6 J
分析一个典型CSS的语句：6 H2 b) B; f5 Z/ Q) |; a6 s/ M
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
7 n: l3 w# F, X) {其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
0 T6 j% G5 p% {3 B4 B样式声明写在一对大括号"{}"中； ' s! e1 }1 I2 R4 t
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
c/ q6 ^- R; \"#FF0000"和"#FFFFFF"是属性的值(value)。, w4 x4 Y* ~( c' P
8 s" {6 e, W* a( n- ]; K2.颜色值
; j" |6 q9 k/ E# l* \3 @% K+ @6 @" [: U4 y& `" U
颜色值可以用RGB值写，例如：
3 z$ [* f+ c! {" M: X; T$ ?
9 m3 N T% L; G! [
0 m- x4 o+ u* Z，也可以用十六进制写，就象上面例子
" z t% Y Y2 D7 f1 N, H" ?6 `- U' F) {4 `* b( _
- b5 K' P$ \0 y* A5 q8 y R
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
- O* O" T. h/ T q, [ s1 x: { }1 s+ B# S/ e7 q, u6 j8 z
3.定义字体( U* ^; M% S! u: Y8 V% X
web标准推荐如下字体定义方法% X" Q/ U. c1 F! l! X
+ P+ E" }5 U* s: X* d- t
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； . Q1 r9 T- t$ r' `9 G! v
Lucida Grande字体适合Mac OS X； 3 M- A8 t3 ^2 a& ~, }5 B O6 Y0 K
Verdana字体适合所有的Windows系统；
5 L U4 {( C2 D$ ?6 ]& SLucida适合UNIX用户 % v7 P0 @; E* [5 @$ u
"宋体"适合中文简体用户;
) N# n; `) V% W# G# M, y如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;" }, q8 q* e6 q" ]5 u6 f. o' }
% T- r5 d4 k' i% O! y9 s
4.群选择器9 r; w$ T( D$ A$ k
: F6 C p8 Z( a# A8 q; {
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
, `( T. y4 G2 N8 `, j
5 X6 V& }3 y+ P/ T6 y5 a7 u; ]# G p, td, li { font-size : 12px ; }
' j5 p! _ g! D8 N# N就是给li下面的子元素strong定义一个斜体不加粗的样式( B- c |6 C4 Y1 ?
# [8 s1 P6 S. d* u, k2 ?. J
6.id选择器
w7 w: g6 f+ x6 T; x9 o* N4 z0 s- l
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层! X$ h5 ]% }5 d$ V+ ], E! j
: {4 D6 ~ U; ]3 A. a: ~
3 ?# r- b' K% D
然后在样式表里这样定义：
~" p9 V* U- X V$ }# T) y0 Q5 w4 \8 s1 ?
/ ?5 S7 b$ Q6 i/ h# r/ u% r
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
2 q( r8 { W1 n7 x3 V0 H& m7 F/ F7 p3 S. t b/ r- [
id选择器也同样支持派生，例如：
9 O* P; e) x$ i5 S0 \3 U#menubar p { text-align : right; margin-top : 10px; }
/ I. s; N) n& G$ s- ~1 K9 A1 N这个方法主要用来定义层和那些比较复杂，有多个派生的元素。 u5 i0 y0 x! E: _8 E2 _
" i2 b" F# {/ q0 c6.类别选择器% x3 G7 T5 x- ^5 i& F4 r
9 w) K% K9 I2 J1 V& k f- d
在CSS里用一个点开头表示类别选择器定义，例如：" U1 V+ G9 B& [4 m- S5 S
.14px {color : #f60 ;font-size:14px ;}
U7 b1 v+ L+ e在页面中，用class="类别名"的方法调用：
3 V! L; v$ j! P9 M) b& I+ b<span class="14px">14px大小的字体</span>
# z! L' O2 c* @1 G) X- D/ w. R
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
. c1 V- H' y5 S; @/ z# D
/ y0 g7 L; ~2 M+ x2 Y7.定义链接的样式
9 s0 {# ~% d; X# J, sCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：; \# g3 m2 L5 Y6 `6 f2 M6 P
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
0 m$ X ^+ S; D7 ba:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}" w4 m: r8 v; G/ e
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}2 X: [4 z5 k2 v1 w: d, Q" {+ p
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
* B. b; H l: D& Y r [7 H# q* h" }) `以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
