|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。* A8 I! X* ~. g: K( P8 v/ S
@. l. B* F, X2 n9 W. g) N1.基本语法规范" k }$ K7 i W6 `1 m1 E% m
分析一个典型CSS的语句：
4 T$ L9 G9 K. o1 }7 T: a2 v Ep {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
6 W3 A2 l. i+ G) J样式声明写在一对大括号"{}"中； ; b _: x" E+ C, z5 H
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
9 a( Q/ K3 }$ a2 r6 s"#FF0000"和"#FFFFFF"是属性的值(value)。
, q. K2 ]( ?3 d* s& G/ d/ X+ t! i5 M1 v c d9 |* w. a
2.颜色值) ?" A8 K. b, ]) e5 c* O
: K! f- C( W0 `# u
颜色值可以用RGB值写，例如：
! D- D' T0 |: c9 L3 u# i0 E s% d1 k. r# P! Q8 N, B
* W5 C: ?! s2 R6 O6 s7 s
，也可以用十六进制写，就象上面例子2 k+ o$ g" I: }/ S2 {$ b
7 ^/ ^5 H/ u1 ]; Y
/ m3 ]' n% }, J/ b1 p( @" r* u+ U如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。- U) r4 u0 @7 B& L9 S
. X! R2 {- a" t* s" D4 _2 w
3.定义字体
% @$ ]$ W9 U4 }- Y+ @web标准推荐如下字体定义方法
. B( d k9 I' r2 i9 c6 Y# H1 A( C# q5 I0 h
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
6 r' h% T% h! `2 a# N1 M6 A字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
# K/ z0 E" R, `/ NLucida Grande字体适合Mac OS X；
$ H2 a$ l4 O% U* {Verdana字体适合所有的Windows系统；
0 W: ^ ?* A8 ?Lucida适合UNIX用户
+ R. l9 W7 ]% K1 U' c( g"宋体"适合中文简体用户; 3 c) ]2 w3 |" F: a- c9 b/ N
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
D5 V7 d! p' e* L5 @7 |2 Q$ M
. j! Z& W% Q* l4.群选择器% `1 K/ W4 i* A% k6 e- U- ?) H+ @
/ _& x) {+ R0 r1 Z4 m* M当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：% S' J0 O! L( X3 a% l; V3 _
) i$ \+ _" v* p' E' f& l0 g5 j
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式! ~% `8 S! G; ?+ J9 H
S( P# j" [' y( L: ?, X6.id选择器
8 m5 y8 q9 X* U7 x) G$ J, K
+ s& T. `9 j2 }5 P% G用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层: ]- G1 f1 U, G E0 R
, H) Y4 c2 c/ m; W0 X4 ?
$ J# n ~% e6 x- Q! P/ c+ x: K, M5 ?# c然后在样式表里这样定义：
, v( X% ]* z" w5 t2 r& U, a R8 F* b s, e6 f }+ \. T, W
6 w' Z; M8 X; e) B1 _& W#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
i( L# A5 I9 q+ P: F其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
( J; b8 ]2 G! K. R w7 l5 Z
1 ~. p# g. o6 k/ Oid选择器也同样支持派生，例如：! }' a7 {. j- [. F1 p0 U+ B+ i
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
, ?3 G' G6 p. R K# d! d3 P6 c0 r. X$ v7 m! ?- g# X
6.类别选择器' _, ?* d$ ~4 s) m( `" m
5 R6 `% i! }! M$ C
在CSS里用一个点开头表示类别选择器定义，例如：
/ v U, t7 \5 V+ l2 |5 L.14px {color : #f60 ;font-size:14px ;}
7 u' V/ R& `5 _% S& Y' Z) c0 H5 o
& n, f( r. C% W0 B2 q在页面中，用class="类别名"的方法调用：
( k" }0 n+ |$ t1 Z<span class="14px">14px大小的字体</span>
/ c0 [- o% E& Q( {这个方法比较简单灵活，可以随时根据页面需要新建和删除。
/ Y2 e' a; h8 E- a( ^
* W. ?8 c" D: d5 @( i' v7.定义链接的样式' \/ @; ~2 }; ^# U. A; S; b+ g
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
) J" }6 x8 N5 wa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
) x+ X% g1 `" \0 E# H9 x2 Fa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
+ L5 P Z: Z- k6 l) va:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
+ n, B# X( _! m- x+ e, S1 Za:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
6 X- N" M4 p) K L0 O4 w; J以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
