|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。/ \ d3 L. ~) s' U
+ W5 o: R% x% A1 H+ o) }8 A+ A) b1.基本语法规范& |0 T+ x/ m$ C t8 W
分析一个典型CSS的语句:
; i/ k/ i4 ~7 r4 Lp {COLOR:#FF0000;BACKGROUND:#FFFFFF} - u- Z2 x$ c' A9 B
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; % g: v# Q9 C( X/ U4 v
样式声明写在一对大括号"{}"中;
6 z* h Y7 A% x, N$ a) x! [COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; , h7 [2 @ z: X/ H# U& u6 f
"#FF0000"和"#FFFFFF"是属性的值(value)。
. T- b& g% h' `2 _5 J& N/ t/ z9 \1 d1 E0 [5 W7 x% m
2.颜色值
& b0 b" O3 L: n5 |4 x! F3 L* D& X3 ~
颜色值可以用RGB值写,例如:* R+ E5 ?5 E' X9 A
* r2 o: l/ d% c9 b
% q$ S! Z X$ V# I,也可以用十六进制写,就象上面例子
; N: @: T0 L G7 b0 k1 y
# k7 Q9 X5 ^6 A7 n
8 n7 ~5 V: |, c3 Y/ m+ H如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
?) i# `3 B2 Q0 {$ i( d" U" [2 F& }7 P
3.定义字体
' u u H0 D( d( \& \' aweb标准推荐如下字体定义方法6 W8 c! e9 F- {/ u1 A( ]8 r6 X% H$ U |
" g+ j- B$ L7 `4 U* obody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
! r4 p* D' t2 }0 L" v/ C' `字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
+ w9 C8 y4 [6 V) ^3 C! V! i& QLucida Grande字体适合Mac OS X;
+ u/ s! N7 Y: k9 T! XVerdana字体适合所有的Windows系统;
( a) y5 p% K( r+ iLucida适合UNIX用户
9 w7 I6 b/ }) M5 u1 g U8 m% S"宋体"适合中文简体用户; 0 ?* R9 ~) A J
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
+ a3 g2 v, A* s0 h' N. ~: T P) j; k' j
4.群选择器
2 U$ z# n3 A7 S3 S8 ]1 C& V5 y$ }/ d8 c# c
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:+ C$ P! G! w, A) N
! o' S h2 E; S3 U3 @5 |6 P$ i
p, td, li { font-size : 12px ; } + ~" L, Z) c( V! \* Y" G
就是给li下面的子元素strong定义一个斜体不加粗的样式6 B5 J$ j0 Q- |( ]1 l- O% t0 a) c
8 u6 W/ v! d5 ^& s
6.id选择器
7 u. j) R, @9 e, C; [
8 L2 F! R8 u1 z+ Y$ {+ e/ |用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层0 r# b M o1 _: [5 f
/ L0 D$ L9 j- Q1 ?) D( D5 h- c
9 F; M0 o8 v5 Y4 k然后在样式表里这样定义:
}) C( H9 J4 D9 ^5 W3 u* R7 T
* F% D& W u7 m! J0 |
8 `7 [: D+ M. A0 }) H5 p#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
4 u7 u: @, k- u其中"menubar"是你自己定义的id名称。注意在前面加"#"号。. A6 h9 \. ~; m& s* S6 P+ R
7 A G) _7 Y5 J5 U* _& y0 y
id选择器也同样支持派生,例如:
; S& Z6 z1 p, Z# m, p#menubar p { text-align : right; margin-top : 10px; }
8 { n- W! |+ u# z: p t- {5 {这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
' Y; }& C8 d% l% @5 q* j: Q! S, q
6.类别选择器- R4 E% U5 U3 J' ~4 a, V
7 c- w: s# X% [& Z* ^7 b
在CSS里用一个点开头表示类别选择器定义,例如:
b, o3 \/ g1 G {% p.14px {color : #f60 ;font-size:14px ;}
, C/ @( D' m& m1 D4 w0 \( {
. R+ W6 g6 @7 i0 E! O在页面中,用class="类别名"的方法调用:5 V% v1 T5 h1 f3 Z: G- Y2 \
<span class="14px">14px大小的字体</span>
- @4 r+ Q. V( a7 f! D
h. _; f% r- T$ i# _- K; i这个方法比较简单灵活,可以随时根据页面需要新建和删除。# ]2 F& k" B5 I8 Q) s+ R9 K# w8 Q
$ k5 W- u1 s4 B: G6 I5 a, J8 g
7.定义链接的样式
0 f! j, [$ v/ {% xCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
1 x5 ^9 V9 n1 x' @( }a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
, Z! {2 r' v$ b4 b7 A8 |5 Ya:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}% t9 K: N. T5 K) B6 ~
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}2 X5 v: D- d7 \. T1 g, o, H% g
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
+ ?5 s8 {& x7 [1 t i j! T0 J% ]/ A. d3 E4 a0 C; a6 p% F
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|