|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。" n6 s! W/ n' Y6 `$ }" m
% s( B3 O! e! G6 c1.基本语法规范% s$ R. U9 p% Z- k" T. r
分析一个典型CSS的语句： Q" _) I+ m5 ` M Z
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
: Y1 ~# y* o7 \4 J% {其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
4 r* j& m2 M- p7 i5 ?1 H1 L样式声明写在一对大括号"{}"中； 7 L) @% h8 l" ~/ o3 P1 v* K
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
9 L. ?; x3 K2 M4 O! ?"#FF0000"和"#FFFFFF"是属性的值(value)。
$ u! |2 }- _+ D% c8 P R1 g
. o: e; g2 d" ~- A9 M N+ H2.颜色值
9 n; B( l i7 i/ \8 D! R8 k( m$ |: M( p% P2 Z" r1 F) `- z6 [9 D' @- p
颜色值可以用RGB值写，例如：- q- m$ u( f$ A- S& X4 E
/ J6 B3 g$ F4 _0 q
3 Z) w( ?/ o, {) N5 m2 g! \! S，也可以用十六进制写，就象上面例子
& h$ \8 p4 {' S+ C. x r. ]% V5 S1 \; W; B9 b( _2 b) E
" \3 a/ K' y8 h9 y如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
, A, }: ^3 S3 p. F4 H9 H6 O9 z; Y& ^$ g4 \9 G ?) G
3.定义字体' F6 ^1 l* c/ K/ U" K* J
web标准推荐如下字体定义方法
$ Y: X1 ~+ ]* H9 y- G% {: S/ y5 {
1 _' ^+ @: K6 }" |body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
* j: F; |" ]; U; e. c* l; ]字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 7 Y9 `& {2 Y+ j$ |. W& }0 |+ p
Lucida Grande字体适合Mac OS X； * C/ ^) ^7 k2 D3 \, E2 E W2 |
Verdana字体适合所有的Windows系统； / v: P6 W, v6 A" X* J
Lucida适合UNIX用户 $ V$ H9 v( P6 `. d8 W. I" C% J
"宋体"适合中文简体用户; N' [, ~/ n' ?1 V0 F0 s! S& x( h
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;: z( d2 D# M- k+ Q Q4 q# ]
6 O5 b7 k9 [( x! f
4.群选择器 i& o& R. P' N( i. D9 c
) S+ z. _& [' V6 C
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：0 }* k) {3 \' t+ C
$ k* k0 X9 k7 m6 ~
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
0 W9 M; Q# I/ n' c
: y: x j' j( [5 r6.id选择器5 ?! O* Q. @% l' ~) b
9 O9 T$ G j* T, \& H8 `7 |: l: n用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
5 @6 ]! ?: P/ Q$ }1 G I: X8 p5 F. c* W8 M$ Q9 y
# R3 C. |' q2 M O. j `9 T然后在样式表里这样定义：; ?) N; M$ b9 N4 a" S6 O
6 T7 U. b$ m- y. w. ?) Z/ @
9 y. R1 Y& F% X- t#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
0 y2 k" O2 h/ M7 B7 R其中"menubar"是你自己定义的id名称。注意在前面加"#"号。1 \4 ^2 \" I; d% N' y
* x$ a5 a4 Q' _" [# Y% pid选择器也同样支持派生，例如：
' b& m! h$ w/ p#menubar p { text-align : right; margin-top : 10px; }
5 M5 c" s0 t7 I$ M+ w4 ^, Q. N这个方法主要用来定义层和那些比较复杂，有多个派生的元素。& e* w1 n) M5 F9 p1 E- l
& }0 K" i5 v2 m, x; Y* I6.类别选择器
9 |. ], H7 m6 Q# Z3 W+ G& z$ D# \' `& Y: M) {2 A8 t
在CSS里用一个点开头表示类别选择器定义，例如：* i- d9 ]) P( s6 i8 M/ ?2 y4 A
.14px {color : #f60 ;font-size:14px ;}
* N$ V( w$ ?5 `" Z5 l _' W0 E' n- f, k! n9 C. I' i
在页面中，用class="类别名"的方法调用：
. r) s! E7 w$ d6 o<span class="14px">14px大小的字体</span>
* X3 Y; x+ f+ P9 A; h) p4 |这个方法比较简单灵活，可以随时根据页面需要新建和删除。
% h) L3 o! l# m8 Y5 V
6 H0 {+ ~) [5 d; a! T, }7.定义链接的样式$ S' Y& T6 n7 n# C* D, X" `
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：5 ?6 j0 f% X5 Y+ r
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}) P2 s4 m( J* {8 |! ^
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
, g- B1 W$ ` V: r+ v" u2 Z' za:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}, I# t2 H( M! G" \% K
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
( j+ U! O: J6 D5 t" M; F7 M: ]6 G6 Z. m& Q/ t2 x4 A- V
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
