|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。# a- X" r2 V6 j8 |6 v: f3 q
2 T$ u% _& F9 G. m( C
1.基本语法规范
7 S" q0 Q" W+ c- n. Y4 C4 g分析一个典型CSS的语句：
; \+ e" z2 @* ?% ^& K- _: }& Cp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
* k7 H% t y9 c3 B+ ^ C2 }+ R# D) r其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
' ^! F$ `; ^( I0 O1 l样式声明写在一对大括号"{}"中； 8 e% R \3 S2 j
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； " U. Y: n" l! p4 w; `
"#FF0000"和"#FFFFFF"是属性的值(value)。4 I- j+ w. s: b) e G* q
# W8 M5 ], m4 h2.颜色值
N6 z j* @: ?$ k) Y; Z
* N! ]. M3 m0 N7 d% `$ D颜色值可以用RGB值写，例如：4 _4 f$ z$ X5 B1 I
; f; w* a8 B7 }6 a
+ x' K. S2 t5 |( R，也可以用十六进制写，就象上面例子
8 ]3 _# d5 @3 _# {7 p6 c$ }
6 s/ P: Z8 Q1 }: p
1 [( v4 P; x) t% `( f如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
% r+ [2 E: Z5 p+ e; a
7 h+ H; k" r6 V8 ~. z% L# W1 u$ p3.定义字体
7 v7 w5 `% B1 T" W& {: S: ^: Eweb标准推荐如下字体定义方法
* G4 l# I- Y3 I4 b1 ~/ s- c3 t. X% ^% F" g: C0 J, t- |3 C, ]) t+ \1 A( j5 n
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
3 R4 \& y' @' k8 ^' m字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； ! v/ C" L/ P7 ?5 j+ c7 \
Lucida Grande字体适合Mac OS X；
* x# c! H& l$ Z2 ]( M8 KVerdana字体适合所有的Windows系统； ) M5 ?5 U$ u, V* ^6 } {6 l
Lucida适合UNIX用户 / G6 C4 K- D* ]
"宋体"适合中文简体用户; # w4 z+ r0 S/ ^& p! A
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
]2 v+ q1 m8 R) @" X4 p
4 @0 z! {: h' w5 p4 n4.群选择器
7 A8 {0 Q; K0 s7 F4 N
7 `: ^2 v! j) T+ |4 n当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
- f7 A, C- y2 |9 y3 J$ }: X, r% r/ Z
" T8 s! U. U2 S: y# j p, td, li { font-size : 12px ; }
0 A- Q$ j Q5 v' p8 I- z就是给li下面的子元素strong定义一个斜体不加粗的样式
" \) m, @4 M m h2 l4 G$ J8 P9 E: ?5 ?8 `9 r: }" g
6.id选择器
. q1 ?: T) D ]
6 Q. i9 O# s& M5 X) v6 ^/ u用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
9 x4 m; I% r0 X6 |6 A
- n3 p! V% U, L) H) D7 k) W& a
/ Q- p. K! N7 K0 U然后在样式表里这样定义：$ w/ `/ N" N3 U3 Y s3 k2 u0 T
& D7 e* O$ ]; {
4 R! i; k n1 A; W, e#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
# {) A5 f& x8 |$ o# _其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
1 x( ]! p7 i0 [7 a: D* ^& [ }1 @& \0 f- C: P$ w
id选择器也同样支持派生，例如：
) b; w2 w) v* V; k#menubar p { text-align : right; margin-top : 10px; }
- Y/ h# S9 }3 M, t) K这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
, m! e% l- l' h+ W- m8 B' g
8 x* S" i$ X) p2 Q+ Y: t$ g! S5 P6.类别选择器
3 w1 D: r% Q% A! W% i* k0 i0 U2 `9 x( f+ K2 F2 r8 X
在CSS里用一个点开头表示类别选择器定义，例如：
( ~% {% J R7 W( F.14px {color : #f60 ;font-size:14px ;}
" \" V6 K# ?$ ]) e6 r" I6 U& W在页面中，用class="类别名"的方法调用：# e# q2 i* Y/ @0 q0 \& c
<span class="14px">14px大小的字体</span>
0 d9 _; j7 [, s, Q2 L( l5 ^5 V: p7 ^: ?
这个方法比较简单灵活，可以随时根据页面需要新建和删除。- H; g. ~) `( W) G& ^% f% G) \
5 R, c3 a0 L4 u- M7.定义链接的样式
O. r9 e# |% D* |" p: dCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：, {% P8 w- F, R
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
* L3 b! V, f3 ?5 va:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}7 Y1 t0 ~* ^* l# {( _$ Y8 k
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
$ i! Z& h$ e2 I3 g ^. a8 g. ra:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
- J* z+ Y6 E( o; a
: l" u( `' R3 S, F4 f以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
