|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
7 |: F! N8 S4 g+ V: h5 v q2 m* [4 c1 u& H$ O6 A& Z1 d
1.基本语法规范
, t M; }$ b2 x/ l+ m分析一个典型CSS的语句:& n4 ]% }# ~4 }# T
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
* I' Z+ P$ E& d5 G/ @5 R其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 4 @* W, w8 _3 p/ v3 n& P/ i4 P
样式声明写在一对大括号"{}"中;
+ i$ `- ]" l% m* k0 fCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
0 b, x4 t- ^! q; J8 m& ~3 w"#FF0000"和"#FFFFFF"是属性的值(value)。/ }! S; i& B( g& [! M! {6 b3 Q1 K
* ~3 Z! n# h" X. g6 d3 o& @2.颜色值
9 e6 x8 u# c5 s$ |9 B, ]+ ^9 j! B, v% c+ {
颜色值可以用RGB值写,例如:
4 [, K: o% U: I
& X) ^) R6 \- k) _ H7 C0 ~$ ^9 W' H& u- Z2 ?
,也可以用十六进制写,就象上面例子3 P* w" g, ^. @; [) I
% u: l9 z) A W+ a
3 X! t2 M$ k% ? H* f2 c如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
* t5 S$ p% Y2 ?4 G3 m+ S0 f6 _4 e% |$ W
3.定义字体9 I S$ \2 ~' @
web标准推荐如下字体定义方法- Z+ _7 U0 P9 G, j# y! p V
' O! B) }5 [# B3 @
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } & e8 Q3 W. F4 Z: |- r( p
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; # y J' e+ Z8 o0 k6 U
Lucida Grande字体适合Mac OS X;
, H: o4 e, l6 cVerdana字体适合所有的Windows系统; 7 t( p& `5 D2 g2 a |8 R, R6 l8 y2 u1 B8 ~
Lucida适合UNIX用户 ' c8 ]/ i3 I& ?( v2 O. A7 ~) j
"宋体"适合中文简体用户;
8 ~5 D2 d4 m% M4 v4 M如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
& m1 E+ b2 R% N& w
, g+ I" C8 u; |1 D6 Y4.群选择器
w" E* r+ q8 z% q! E$ N7 P
) \' C& D( F u `) J# |4 \9 B当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:, t' @- }6 x1 h+ F
' c$ {" E) O" {) n4 X- o/ u
p, td, li { font-size : 12px ; }
. }3 j# |" F) Q& [/ a就是给li下面的子元素strong定义一个斜体不加粗的样式, H5 v9 Y' j1 }* Y" @1 ]
3 g9 V# `4 t, @' r' m) z) {# o% w- T6.id选择器
3 y$ z; s* Z; F) T
. [! P/ P* k \* n用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
8 H+ a2 G( B$ Y0 q2 ~, e8 ?" z6 q( v$ T' S D& P( H) l
5 y7 x/ s1 U e; }* E, E, _) P+ c然后在样式表里这样定义:' q# a' `. L C' S
3 F( W1 q5 `) \3 N- K' q) j
' i: l* |9 z9 V
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
3 \7 j; o. w2 n& x0 L其中"menubar"是你自己定义的id名称。注意在前面加"#"号。: E5 E3 A) i' V4 T- c
L3 N" y" ~$ S- H% ^6 Zid选择器也同样支持派生,例如:$ P2 ]! H- ^' D9 ]
#menubar p { text-align : right; margin-top : 10px; }
2 b( `+ z, V2 W$ E, z% c这个方法主要用来定义层和那些比较复杂,有多个派生的元素。' A2 H d. b/ g8 {. E9 ?
8 ^" S# W1 |8 r2 c( i& j1 o7 }6.类别选择器
/ L+ X3 J7 j# A. y' F! [7 R" J. R, O6 m0 }3 `
在CSS里用一个点开头表示类别选择器定义,例如:# U: |( K- n$ k9 L6 D
.14px {color : #f60 ;font-size:14px ;}
9 b/ q- ?. B$ I4 {+ ?. T- I* N/ l; b8 A& }: ~) _ W+ [# E3 h3 D' u
在页面中,用class="类别名"的方法调用:6 H$ ]0 p! N/ y4 T. ~
<span class="14px">14px大小的字体</span> 3 V% s5 X& E( C
9 k; Y2 g' W R* @7 l
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
5 s0 N" ~7 S: U- l/ V, H& m
$ W4 x6 n" Q, |7.定义链接的样式
3 L9 v- Q. `5 f' SCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:" ]; W9 L, \, z& |
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
# z( ]! p& h3 h( b( c# |% `a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}6 @! J1 X7 E' [7 Y/ y9 U2 L
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}4 x) e: t8 M/ a" j6 Q
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
2 N: p# }" n- Z# u- ?. ]8 X$ l! Y" S% e; L: _; L' p
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|