|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
1 K! @4 f/ z/ @' P
. }0 I' |+ l6 R# c/ `1.基本语法规范" A7 w5 u9 u* u& W, W
分析一个典型CSS的语句：) l5 x6 X$ r7 C3 X% u8 _8 F
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
# ]5 x+ Y, l! f0 y }' M样式声明写在一对大括号"{}"中； 1 m/ z. {! S1 }% w- s$ x
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； ! Y. Z6 P# f( q/ Q6 s! L& y. O
"#FF0000"和"#FFFFFF"是属性的值(value)。8 @; X4 F# a$ p1 Y+ p- v/ ^
) ]6 q- B1 f" k
2.颜色值0 L' F# \! u' ?7 H& I' k
- m! K* ~, m: [+ @+ Q) F
颜色值可以用RGB值写，例如：9 e/ X8 q( ?9 P3 N& l" R
& G- r9 q& u+ [3 `
+ n* y$ U- h2 x3 e6 @- g1 V" ^$ A，也可以用十六进制写，就象上面例子
. X5 Y' U. E# } r ?8 B% {
% b- D- L- ^5 V: o0 g5 c6 C6 I* |' b d% Q) w: U+ T
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。+ O6 X8 ~* j; W c3 j* V
$ E) @7 j. M! ^/ q2 S3 s
3.定义字体
2 R1 s0 @# Q" j4 n* h: y l( W" Q1 \web标准推荐如下字体定义方法
' ?0 Q' t- e8 b+ Y2 x! K) ]3 E g! ^, ~* z$ l" }: V
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； , i5 Y8 Q( l+ c6 p8 D
Lucida Grande字体适合Mac OS X；
! @7 O9 w% H1 f/ j3 R$ xVerdana字体适合所有的Windows系统； 8 ^; T4 Y1 U8 U1 r0 ~ Z
Lucida适合UNIX用户 % Q0 l6 g" s; e2 }/ }- g+ N
"宋体"适合中文简体用户; - q( e7 W" K9 F0 M
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;* i2 V8 t" ]2 ]9 k6 [
9 m X p' v: u, y! Y. B5 |4.群选择器
, O7 _( v& K/ E/ ~/ ]8 X
+ i% v9 P% y$ R9 p5 Z; Y' l当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： _: u$ j7 O3 O4 ?+ |4 e& P
" T2 |! t( d' \5 R% E% ?0 I
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式. F. }0 a( t* c) ^) o
5 z J2 q3 O( [. S. ^5 h
6.id选择器/ `3 E5 T, c, I$ Z6 O' a5 l3 l
& S" C' s3 m4 s% e. [" L7 B用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
$ R/ ]7 @, O' P; E( @) _
+ o# E: g4 V4 k' y% ^: {# h; p. C, t& z, F. f) Y
然后在样式表里这样定义：1 T* c" M6 h7 h x2 U9 }5 y
. P5 P8 Y r H9 Q
y1 v+ g- X' b% T) K
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
( G# d" e+ D, Q9 \1 R$ x其中"menubar"是你自己定义的id名称。注意在前面加"#"号。 C) N! o* ?) q
$ |2 |- d4 ?$ Qid选择器也同样支持派生，例如：
- i+ C& m$ u" H! F#menubar p { text-align : right; margin-top : 10px; }
8 o" ^6 x+ Y& W这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
9 D- c9 O( [7 e& a/ G p) g3 A# H0 _5 m' u* ^1 k
6.类别选择器! u* y2 h# O* f/ c O0 l, D' p( C
# x2 }4 L2 y* v+ M
在CSS里用一个点开头表示类别选择器定义，例如： P: \( G6 O: t- o- y
.14px {color : #f60 ;font-size:14px ;}
) `( ]3 |) }5 h# K$ v: b3 |- c1 F, ^$ s) A
在页面中，用class="类别名"的方法调用：$ B" P+ L# |4 I' e* T: a; ~& |/ g
<span class="14px">14px大小的字体</span>
: ?8 P2 q9 k: C7 u S7 ^) `0 z' K- w
这个方法比较简单灵活，可以随时根据页面需要新建和删除。0 x7 S x Q: v
4 H# `6 E+ v( \, }9 ]# j8 C
7.定义链接的样式
8 y* C# o4 n8 V; _5 ECSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
! U) {4 N- y) G! J' l* Za:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
+ l9 }4 K$ o: Ga:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}& B7 [! ^$ v5 M0 ^( b
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}6 N0 B \0 ^% U
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
1 S5 k- X2 Y0 r4 j Y( S0 l0 i* X l- d: @7 h5 R6 z
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
