|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
@, Y1 i/ d9 u0 S% \
& a1 | A/ |5 E' }, I' J& N( N7 W5 U: [1.基本语法规范
5 }, B5 ]$ f G! l6 d. W! f分析一个典型CSS的语句:
, m# b8 i5 a; M% j# Z3 m4 O5 ]" p% Jp {COLOR:#FF0000;BACKGROUND:#FFFFFF} / b; v5 L% G; o4 j
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 6 s, i0 X8 T& D; \( _3 R
样式声明写在一对大括号"{}"中; . T# m/ A9 _# K0 f# z
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
; @2 n( r8 e. U9 N5 I+ E9 k/ t, h"#FF0000"和"#FFFFFF"是属性的值(value)。
- R0 v8 c, |) K$ I3 {* i# r& Z3 T! V, n
2.颜色值
2 B- W# @0 I. }. ?- |/ W0 I- o& H- c4 e% v' ~
颜色值可以用RGB值写,例如:! E2 |( ~% k: k7 G8 A
* V. O4 u# b' l d7 Y7 A; ^% X: L2 K# C. y' h; A
,也可以用十六进制写,就象上面例子7 ~& N* A) S+ G. J5 w8 H5 _
~. K% Z" m( y: [
3 y: M4 ?7 z* x# ]' K7 R# ?0 r如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。! D: E/ y- g- |
% D7 u, \. ~) ]8 p0 n1 s2 K& o3.定义字体1 r+ B: V* Z* ^% t" C- f. x
web标准推荐如下字体定义方法
" |3 P! Z; o$ v; G$ ^
# O: j6 r: c8 F5 Y: e2 Gbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 4 f6 D3 w/ p8 S! q/ c; u# Z: G+ S
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
9 J2 i- k& _' }: }# p2 oLucida Grande字体适合Mac OS X;
C8 U, _" ?: f# h4 w& C" R$ r( tVerdana字体适合所有的Windows系统; % g: _/ }' h i7 B+ m
Lucida适合UNIX用户
* A' J9 N5 j0 h1 R"宋体"适合中文简体用户;
( G( T! Y7 E! j) K o2 Q! q如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;# K& F/ k6 }* R6 G- d V+ @6 @
: N( i1 B/ G& @& B1 x1 N5 T( E
4.群选择器
8 U+ L* Y4 {' s6 ]5 W( H, v( X' o& n
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:/ n4 R. c. k/ X* s6 W' d& z p, s
9 l9 D, P- \5 v' W p, td, li { font-size : 12px ; }
9 D- ?- `2 R% r6 C1 ~, i7 C就是给li下面的子元素strong定义一个斜体不加粗的样式
8 R4 |' t* @4 ]& r; g' N" L! \, r7 C, Z
6.id选择器+ D9 t9 g9 y" v$ @( r
7 g7 n8 _" E: P; O6 }3 K: S2 x用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层 W% V" B* b' L" F! f" p
6 M9 Q; H6 I# @: m H
) h4 g. p7 y2 m. t然后在样式表里这样定义:5 N. t$ g4 k1 t0 ?
' ~: v5 H% t& I0 G
! z7 Q: L+ a- h: {* l1 z#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} + l5 `9 y& W- j7 q- \2 p
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。( f& M' a2 D: j% U5 p
$ y% k. h) ^2 P8 @id选择器也同样支持派生,例如:, e! ~$ t5 _. H$ H
#menubar p { text-align : right; margin-top : 10px; }
$ b3 M4 ?1 [5 S这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
# U% n4 A5 c- J& A7 M5 w2 \& l" C+ g, O, }% Y9 h
6.类别选择器
% E5 B% ]% i' n3 i+ U
% c: J c' C+ O( R- K( t. U. G在CSS里用一个点开头表示类别选择器定义,例如:3 X# ~9 _$ {5 F+ N- O4 j) ]
.14px {color : #f60 ;font-size:14px ;}
. T' q$ `. f8 o) Y+ U8 w* @: S+ R6 m
在页面中,用class="类别名"的方法调用:
* Y3 B* a9 ]# w4 B" L1 G<span class="14px">14px大小的字体</span> # H- y/ q# a9 [) V2 W& c
# z) a7 M0 r8 ?: D这个方法比较简单灵活,可以随时根据页面需要新建和删除。
4 [' K! `* M# c) d4 t
( e" O8 Q" l( X, J, k s7 e7.定义链接的样式
- D# R- g5 ~: E" x% `& e* tCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
5 \* o6 G* m5 ^a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
0 r6 O o* T$ X8 k z6 K/ ga:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
) U: R7 S, j: V6 g) l1 b) Z! d7 Ca:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
9 Z5 V# a5 e) U- k. ~: z7 oa:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ! |2 \% v5 D/ [, O+ e- c
$ O% j9 c# S: y4 g+ h& W以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|