|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
* R& a! Z9 m+ g' W
8 G! F0 Q2 [ ]& _1 \$ N% V' ^+ c1.基本语法规范! o& U! b$ a4 a: J3 l
分析一个典型CSS的语句：
7 |) L3 L1 |6 \! J" Up {COLOR:#FF0000;BACKGROUND:#FFFFFF}
2 z3 j y( O" \& q" D; v& \其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
$ W1 ]% f) `! I+ Q样式声明写在一对大括号"{}"中； 9 h4 J2 f$ z3 ]0 l
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； ( i8 `" m: x& u
"#FF0000"和"#FFFFFF"是属性的值(value)。
+ ^- G, M+ v, b0 ]8 H9 E) p1 ^ o% N% ]/ L' _+ R# ^) u; [
2.颜色值) v }2 r$ O8 _! t
! W8 B/ k- ~: l
颜色值可以用RGB值写，例如：, W; Y" b" z2 ?' r( K8 g4 c$ c
1 f* q9 [/ S2 P& l8 `2 E* h s6 P0 u
，也可以用十六进制写，就象上面例子
/ f$ `( ^3 |$ P; K) F
/ Q% m" ~6 C8 X) |
! W/ L) T. ~# c; `, q, t7 b如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
: w& ]2 C0 r4 Z! I9 q% i0 X* A0 r7 m1 y
3.定义字体4 q! M4 I$ `9 l
web标准推荐如下字体定义方法
R/ h; b9 H! N8 D7 U1 w1 ?+ x. ?* `5 E
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 0 @9 X) o3 p" |* L3 _! m; G; a
Lucida Grande字体适合Mac OS X； ' B# f8 K4 S; H9 e
Verdana字体适合所有的Windows系统；
* X% S% I) V/ W- t9 g& w9 KLucida适合UNIX用户 $ Y9 i: V1 Z5 Z6 p$ x, T
"宋体"适合中文简体用户; & a+ X+ z" {4 Q" Z* |
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
& n; A& d! M5 s& j9 l3 _7 n; Q* p: }' K1 U+ L- @0 R) r
4.群选择器
" R4 a Q, d: w4 ?8 F* Z) F) Y& `& x# g1 U/ F2 l1 M
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
5 `% ~( o L% n# C, k* B2 ~: i, ~7 y* ]! n1 R
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式% k, w& H' C9 h" W' T
0 ]# z: z/ ^+ h
6.id选择器
- x* K9 x# Q/ u4 A4 ~! Z% z( N- f7 B% A9 h C4 }
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
& P3 y/ ]( O" m7 |4 w8 e$ v! L% C
8 I5 n1 B7 W0 ^8 Z& s
然后在样式表里这样定义：1 m" |4 H$ a" Q$ ~$ n. `
2 V3 Q$ G- u% j) X2 a) \" S3 c- f! [ D. q- @) M! ~
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。/ o F% B' X" v% ^- l& x
2 Z/ T2 b6 G5 k& ~& w* bid选择器也同样支持派生，例如：
$ U9 o" \( X, g#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
* x" P1 J9 @: ~
- Q& U# J3 v5 E$ D* m ?/ ?, _6.类别选择器
% U2 _8 L0 U. T: c, j) H0 i& ~% }2 y
在CSS里用一个点开头表示类别选择器定义，例如：
2 F$ ]; u. Z! O* E1 |1 \' F8 a.14px {color : #f60 ;font-size:14px ;}
$ y( h- H5 p! r( D1 c2 T
在页面中，用class="类别名"的方法调用：5 R b$ E* F6 n- ^
<span class="14px">14px大小的字体</span>
, i# x: J$ i; G+ p: e7 ]
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
6 P( m) y6 G; I3 ?+ d V! y2 ]# W; q
7.定义链接的样式
$ H! K/ d: `1 d q' y: p* HCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：3 M0 Q6 r6 O; B! n
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}8 L6 Y1 [5 f* Z. G7 I& K
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
0 b/ U- n$ J. M- X9 \, S; va:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
7 Y& {" U2 I5 _ l1 }4 ra:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
5 w3 G+ u$ y- u" u3 r/ b4 l& Z9 m- w
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
