|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。7 x' D) Y& w) n2 ]/ g
' C. L; ~/ z" _- J( M1.基本语法规范
- V: `0 B% g* \% V分析一个典型CSS的语句：1 e4 a& I. D8 X3 F
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； ' d# W9 O! N$ K1 C5 g
样式声明写在一对大括号"{}"中；
! U2 }8 N; t" L: gCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； * P/ s; ]6 J1 O% f. L
"#FF0000"和"#FFFFFF"是属性的值(value)。
$ n+ i$ H" U6 Y* |# @& q6 n
; n$ `# m7 x* Z! f2.颜色值7 m& a+ A& \9 A( g) n/ @
9 W% Z8 w% o: L* Q颜色值可以用RGB值写，例如：; W% O- p7 l" @& y% `2 ?& F3 q0 c
3 v% i6 t: t9 v- P6 T# h4 |, o% w# V0 Q6 `4 O4 k
，也可以用十六进制写，就象上面例子 q% G \1 _. \- s
( ^. t$ _% ^% \1 K$ |+ c3 l
- T5 ~& a. X% H& b" E8 e
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。: |& ~! A7 C; G. b. X5 Z' A7 M) K) E2 y
6 j/ b( C( ^: k8 _' F% u( P! t3.定义字体! R8 [) Y3 u5 I* c
web标准推荐如下字体定义方法
4 W: R. E& X1 R, h- w2 C! [3 P+ E3 n1 D8 ?7 H
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 5 E1 h; H8 `6 o* }8 i# G% Y
Lucida Grande字体适合Mac OS X； + B) ~: Q1 X; C9 j% S
Verdana字体适合所有的Windows系统；
, s. x" |: }# D8 hLucida适合UNIX用户
6 T/ q7 |8 Z/ B8 B"宋体"适合中文简体用户; 4 H1 @& H* m+ G: D4 `
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;7 n- c+ l8 Q4 ]7 t
! ^* q+ v0 f e4 _
4.群选择器" R" X9 x" ?/ r3 d
# V( s {1 \* E& x8 K当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
3 c6 V$ Q1 M5 ~, `/ l! u
! v4 u5 v' _8 K1 n3 Q* X0 b, P. b# J p, td, li { font-size : 12px ; }
$ y' V6 S* {; Y4 _% H% S就是给li下面的子元素strong定义一个斜体不加粗的样式7 U( I' _2 E$ y. o1 F U
+ j' e# {5 w" b% V
6.id选择器
9 r5 Q( V# ^- C( [& r& s/ l. s k; c! M+ h0 v9 v. L
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层" g' q8 b, V2 q* N$ l" t
: K @5 m' @& k+ C ^
' x$ T& a5 O7 k& f- E7 C$ E" A1 C+ \然后在样式表里这样定义：
8 o, x+ |3 b* V. g0 `9 h
' E1 y0 j; L+ R- ^- z1 F) E, ^+ T; w( C
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
6 b, N, W' A( [. _" d1 S其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
' p8 \/ y5 n! f& R! }$ D$ P* |* x' L0 l4 ^: v" J$ _
id选择器也同样支持派生，例如：
4 i. s8 X% E7 V$ J. r7 k#menubar p { text-align : right; margin-top : 10px; }
+ y, |3 |. [6 Z* T) J3 O/ ]这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
7 z) ]. M2 V2 G3 N, U, L+ h/ S* b: D m; K
6.类别选择器( Z# a; w/ E& `8 q" P7 a$ }" W
: a. l) f. ?% K* }
在CSS里用一个点开头表示类别选择器定义，例如：" W, L2 z' D. E, h5 E- |$ J
.14px {color : #f60 ;font-size:14px ;}
/ W0 i* P- o$ ^在页面中，用class="类别名"的方法调用：2 \4 ]$ a1 r4 m. [
<span class="14px">14px大小的字体</span>
' g! o. x& p$ e5 t" o% I9 f6 D这个方法比较简单灵活，可以随时根据页面需要新建和删除。
, H4 F1 j& s1 F9 U" }! I# B" `
^/ q) ^) y" Y |6 ~2 a7.定义链接的样式- i3 F# j$ j; B! u/ H5 T; t7 q
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
# _9 v9 o; T1 t l1 c2 n7 q% `; La:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}9 p/ m$ F% ]/ F9 \9 X; U6 u
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
, U- R/ q8 c* Z& K4 Ua:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}% e% h, N& ~: X4 e7 X3 i
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
$ w! @# U1 \( R8 S' h/ ?* t4 @# i/ Z! L4 H
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
