|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
# e# q7 M8 S O. g: {
. e2 i$ T0 B7 B" k$ l: o1.基本语法规范9 L: K+ s2 O5 A" i# ?1 a
分析一个典型CSS的语句：
6 E, W6 E* @, \9 E0 H" X" g) q, P A& \1 pp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
! `: [8 V* c$ H+ }样式声明写在一对大括号"{}"中； . C& `$ i3 a) n3 l& m1 j+ U+ G9 m
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
2 g. e0 o% \* E) }"#FF0000"和"#FFFFFF"是属性的值(value)。
- U$ J, c3 `' R3 I& p1 S. B5 y$ y0 m+ n! P8 F2 j8 q
2.颜色值
, U" C ]; _* E! f0 h4 g$ [7 o1 r
* t* O& C2 x, x: T6 X颜色值可以用RGB值写，例如：8 l/ j" r6 \! s! U: F2 b
2 N, b6 I5 I# _! s8 @2 H
" H3 z+ h* a1 V* `3 ~+ c
，也可以用十六进制写，就象上面例子" O: s2 I z; k) G, g" _
" c. G' S9 \/ R+ D; u/ J
) \! Y. [( V1 e% r
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。. P( a1 ]3 _1 q9 P$ m
, S$ }, W, E% }+ ?2 ?3.定义字体
. x& W8 s) q( d# qweb标准推荐如下字体定义方法4 w- h5 C6 A) S0 b+ U, d7 @
. A# F, {/ {* Y- |0 R; W! h+ jbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； % m2 b! |- F# y+ [
Lucida Grande字体适合Mac OS X； 8 r5 ^# W3 w% l. Q9 m
Verdana字体适合所有的Windows系统；
+ L* D3 H4 J9 `Lucida适合UNIX用户 . }3 @- K( M1 A2 Y
"宋体"适合中文简体用户;
" o+ D% t' ~9 K# V1 q4 ~! E如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
\& K# z1 H. n
' S% Q5 b# s4 c9 X3 v7 o4.群选择器8 i* J) O1 V: a; M! L
- P9 a7 ^1 F- b) _9 X1 Q9 B6 [+ p$ p当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：" Y+ c* o$ D4 z
! T- ~. \1 C# j7 w- C1 z. B
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
& C7 t% N6 c G$ v0 ^& n
1 o) H+ {4 L4 {6.id选择器' b/ S, s z; X9 `3 G2 }/ B* l
6 E- ?: E) H' X7 m
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
4 i9 c2 G3 s+ }
8 [: d, [& Q. t* B1 T
Z6 g. t/ y3 Y然后在样式表里这样定义：0 W( e7 Z' q8 N( f. r4 [
% L6 s8 O# {2 Z' \) O# W5 c
|" |8 x/ w" f2 j4 Z9 a; v8 j( t#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
1 G$ }: n( G8 E7 r0 ]* L& d& m7 w# e" b
id选择器也同样支持派生，例如：
! A3 C3 p! Q ]+ }) }: k/ Q4 g% j) {#menubar p { text-align : right; margin-top : 10px; }
2 W, ?. e) F+ V. P3 b这个方法主要用来定义层和那些比较复杂，有多个派生的元素。' g+ M: {3 M/ Q* F4 A6 H% a
6 F6 Z2 v# d. v
6.类别选择器0 F( `: F+ H1 l
9 |" H6 S: I6 n6 q
在CSS里用一个点开头表示类别选择器定义，例如：
9 H9 Z$ s$ e5 n2 e.14px {color : #f60 ;font-size:14px ;}
) H2 I/ O+ U! J) t9 k4 }
* T- [; `! p' V5 a在页面中，用class="类别名"的方法调用： W" E, O. A: j; v3 b l+ E+ q9 g8 p
<span class="14px">14px大小的字体</span>
; q& h3 j- V& i% q这个方法比较简单灵活，可以随时根据页面需要新建和删除。
$ e9 {7 m& z$ T2 A7 |/ X# X4 V" r, [) ]4 D8 L4 z
7.定义链接的样式
) M' V. v' c' ^2 U. O5 |+ X5 A. tCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
0 [* P: V1 Y( J$ U5 ^; J2 Ka:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
! }9 h, s9 X' [a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
) Q$ {8 n" u( g9 c, @* U: va:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
$ K' E) C1 p/ W v; @. e8 M5 x/ Da:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
6 r. p# d! H. R( C以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
