|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。; S7 J0 x: D q) e5 a) a, Z
6 f, r/ T$ H2 r: K. ~ ]1.基本语法规范4 {9 @4 x: ~0 c& c( S- A6 ]# V
分析一个典型CSS的语句:! t/ E) c4 c! x% z+ ^! U$ F7 d
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} * _& T3 _- z" F" D$ A2 i: w, N
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
' {" n5 J) y" l7 r7 E样式声明写在一对大括号"{}"中;
0 W) ?: V+ E2 |! ICOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
{- M+ q0 P% v6 y"#FF0000"和"#FFFFFF"是属性的值(value)。- A/ ~1 G4 t& T9 s* M8 e
* ~: _8 h$ V x( g5 L1 f
2.颜色值
& J8 f0 k# A( f) L: C7 u# S. ^2 U
颜色值可以用RGB值写,例如:, p7 ~! `9 i! P$ ~* Z+ K
( X0 A0 I) l3 {$ `! q8 \( `6 r2 ^* T: ^ H
,也可以用十六进制写,就象上面例子
7 B( s0 ~9 a5 d0 v: O- Z; q7 x9 L
) v7 O& g. G$ b4 D: i+ G如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。5 V$ B2 F$ ^0 M: B# M, L& J: E; i" f
1 P1 |3 ^5 k, E% \. L0 V3.定义字体# j4 ^& a7 j; X) u- M1 _
web标准推荐如下字体定义方法1 f, l3 {2 q) X: H; [7 i
# t& O6 [7 ?' c
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 2 U+ j& T' P( F
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; ' l5 E$ W$ X z! H+ m8 s% z$ W
Lucida Grande字体适合Mac OS X;
: M7 ?9 Q: o, X/ E. V# BVerdana字体适合所有的Windows系统;
. d. s" X# b4 ]4 QLucida适合UNIX用户 " c$ `+ G9 r" k( k7 _2 n
"宋体"适合中文简体用户; 4 R/ S* b2 G3 r" D7 A
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;) p+ _0 O1 p A0 w+ s# x
8 h I; E7 T7 d5 }% E
4.群选择器7 ]' @( m; D v; ]. J
# h) q; r+ G/ w' j0 z |当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:% b+ m* N& D; r! _1 W& `# g
- Q" p) K/ u1 F" B, a N
p, td, li { font-size : 12px ; } 8 }; ~) q$ t. U' s4 d! Y* I
就是给li下面的子元素strong定义一个斜体不加粗的样式/ g3 G# s) _( r. S' p8 o4 s
; O c' Q0 K; `
6.id选择器' f- B+ }! U" i# C i" Z
7 n7 \1 R5 ~0 v- r. M6 ]
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
) Z. Q1 }6 k* |% d
8 R& A9 \, ^4 q9 D- O; P2 j ]0 v; g- @4 Q6 z
然后在样式表里这样定义:
& [4 \. C/ M( ~6 H r$ l9 o% G9 y% r' m! ?$ o+ l8 \. r( K, {
/ }: G. s- z, O4 w! A#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 6 N, d, L* ^' e2 k
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。% o a( W2 E" l7 R4 ?' w
% D1 K# @+ w; }* u% h
id选择器也同样支持派生,例如:
' M/ O q) q% a9 H. X. c, H: G#menubar p { text-align : right; margin-top : 10px; } & a9 d& a4 I+ z# K. d
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。3 p0 G9 G+ u+ N/ `5 u
5 x% {/ k, I3 n% G6.类别选择器
0 ]9 @) ?8 o! l3 {- T9 i) t" Q
$ @4 O! r% ^- h, i# D" K在CSS里用一个点开头表示类别选择器定义,例如:% u4 c! s0 V) }6 J
.14px {color : #f60 ;font-size:14px ;}
3 o7 C+ T+ q, e0 A0 s( y# e9 c: I& H/ D6 g5 V2 Q
在页面中,用class="类别名"的方法调用:
( w, B/ t" U8 A- q% n: \<span class="14px">14px大小的字体</span>
/ E# T& S; c* Z4 J: w" Z# p8 _3 V v' s$ I" ~
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
2 Z3 E e: V) R2 [& l: u8 g) [
* p! A/ I( M' }) Y; L" M& X7.定义链接的样式& E. q- G% M" F3 P, m, z& \3 G1 W
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
, U1 ^) Z0 \ ]0 e& G* [! ia:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
! M: ?9 j0 m1 I: ]8 ca:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}' w j* h9 E- e3 y9 h
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
' } m/ ]3 `: k3 c6 n, \5 @a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
) e% Q5 _% g& J6 w7 ~
3 |% m* _+ _3 @1 P. _2 I以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|