|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。8 ]' ^( |! _0 f- c A
4 E+ ^ \% Z- i& m5 b7 ^1.基本语法规范
, O/ y6 |% V2 H( z: `7 _分析一个典型CSS的语句：
+ E1 D7 _6 q$ _" G; }- Y8 G+ Tp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
# k2 X3 O7 S% D- k4 U其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 2 [) A/ P6 d% z+ B0 N. U
样式声明写在一对大括号"{}"中； * X. X) I% N* t7 @* R2 E( Q# [
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； ) \% ^ J. \: E a% p; N4 q
"#FF0000"和"#FFFFFF"是属性的值(value)。
. C* [" W9 ?/ k0 L$ I
6 [% R9 f! f3 j7 o; f- n& ]% s- P2.颜色值. o3 n1 H; N( e9 R6 I. V/ X7 N* w( M" _3 k
1 O# d! H: z5 g5 ~颜色值可以用RGB值写，例如：
0 C I" ] z, M" A$ a* o2 g6 E P5 }9 k2 e
9 F% P' @0 {' t; F E* y
，也可以用十六进制写，就象上面例子
' P" X* }" w9 Q+ O) {2 f7 V( Z0 G @% ~# u' F& A
8 B6 S! a$ C1 {4 w% I
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。% S1 n) ?& f6 W
- F: L3 b; e3 B1 } A3.定义字体
/ c/ h" x+ j8 b; ^7 Fweb标准推荐如下字体定义方法
- H8 T5 A7 o0 q9 |' S+ W: e- e7 t' U( n0 X' g+ ^* X4 D/ A: O8 r# i* M
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
' \. W; P0 n% h7 ]2 s' J8 b% q# R字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
+ P2 i4 |2 e# c+ DLucida Grande字体适合Mac OS X； 0 e- P$ s) i; j9 W9 P. \; c
Verdana字体适合所有的Windows系统；
4 j1 K9 }3 r& ]Lucida适合UNIX用户
9 F3 w9 R, }: ]8 P& c* B"宋体"适合中文简体用户; : M; c. J4 s2 O+ L/ C
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;( o! U6 o, {& g/ W) y' `
/ r; {, |$ B* a, y) C6 X1 ?' l4.群选择器
4 P/ i1 A+ [" R
9 ~6 @6 [0 L+ g$ [# Z8 c当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
/ u8 v }5 g! {8 R
0 ]8 W* B4 _) a* X p, td, li { font-size : 12px ; }
, S6 h* o$ k4 }; r) T8 h2 C9 ^就是给li下面的子元素strong定义一个斜体不加粗的样式
" x1 R. B6 P0 }9 E' o& D" b# J- s3 H0 \' x9 b, Z
6.id选择器4 y) H- a" E( Y( s8 Y0 F
, x( Q( l6 e, W, ]. u用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层5 `$ c/ H, s+ t5 ^
. t& N8 y6 J' i$ Q8 Z2 l: ~: i( a! c0 q/ Y3 q; n% Z7 [0 Z8 `
然后在样式表里这样定义：
, i4 h# w9 A; M" e$ m5 U( u
. b( m! S2 \" r
9 T8 {8 Z8 l( x: g/ r. _#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
! g* K# j6 W0 N, a! ]6 S9 r" s6 o# C其中"menubar"是你自己定义的id名称。注意在前面加"#"号。+ H5 g# O/ Z: {
" s7 S" C. @& P6 \+ ?& h+ T4 S4 j
id选择器也同样支持派生，例如：7 e3 ?+ I d/ [0 e, H; W7 O
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。) f3 n# X. I# U$ a
2 D/ [5 q. L; i* ]
6.类别选择器1 t8 T+ v& {0 D% e3 C$ }
8 B3 }/ f' F) X# y; @% q# c- q在CSS里用一个点开头表示类别选择器定义，例如：/ O* N) d* Z& ]: G
.14px {color : #f60 ;font-size:14px ;}
& J7 u s& }! m* R" p! c
在页面中，用class="类别名"的方法调用：
1 ?) n% `/ _ W& Z7 r1 W<span class="14px">14px大小的字体</span>
n6 f2 N* d6 m这个方法比较简单灵活，可以随时根据页面需要新建和删除。; M9 D9 } E- e
, \2 N; H. X8 `* L' n" C7.定义链接的样式
# v% {* P: M3 {# g+ P6 ~, QCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：; [" g8 C2 n9 j
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
' p& T+ D% \. L: U6 U0 q$ p& u. x( ya:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
- F( l6 v( j$ u$ S# e/ Xa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}) A! D! `9 r' ?' a
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
/ y& s9 W- I; M
! H5 G# U9 R- A y! k$ f以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
