技术部 收藏本版 今日: 0 主题: 115

3920 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。1 X7 s6 K7 @7 _' S; q) _7 h+ K
" h+ d$ l; B# ^4 i& a
1.基本语法规范
# I/ {& E( ~' T1 c分析一个典型CSS的语句:
' h  T- D4 A: y  w
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

, O5 i( R% W& X% G: y+ K' J4 K& N其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 8 W4 G8 y* a# S& e
样式声明写在一对大括号"{}"中;   g2 M+ M/ v2 {$ f* i( t. V
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; ' A, a% c7 a7 @3 k) c" z+ ~/ \9 H
"#FF0000"和"#FFFFFF"是属性的值(value)。% i. e! s% v0 p5 U5 q

5 W6 m4 x. O. F2.颜色值
+ q& b% M5 Y# |2 \- f3 o$ R6 l. d5 Q' ^+ l2 h
颜色值可以用RGB值写,例如:
5 D. ^& x1 O, j9 ^" c" e  J1 i/ a3 n: B8 O
color : rgb(255,0,0)
+ g& V1 |1 O3 k7 i
,也可以用十六进制写,就象上面例子
* s8 `: f8 x, Z+ S! G0 S1 O  B" F8 o$ d# x
color:#FF0000
% b7 E2 ?- J& _* L' _6 @; v
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。, P& ]- @; v. s8 k5 m! v* u

, V8 z+ d+ @. N8 _/ ~/ H; T) x% z5 H3.定义字体
9 V- J7 G3 L6 }- N. ]9 n3 Oweb标准推荐如下字体定义方法1 h/ r* Z8 c9 v& T# d- a
. F+ g7 e! o% H( b- w
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

4 G" a2 Z: m) z( j0 V% n# @字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
+ a( L9 T+ E8 D& i- VLucida Grande字体适合Mac OS X; + q9 B" y, m; a+ f" Z8 @2 ^  X2 h- L
Verdana字体适合所有的Windows系统;
9 [( k& f: L! K1 N# r; DLucida适合UNIX用户 4 F5 s7 B/ g/ x- f$ H$ f- z  G
"宋体"适合中文简体用户; ) f4 a0 ?. w# t9 w7 c0 x
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;4 S& ~/ g( C; [; R3 m  s( E

$ K% O! b: E4 Z* H5 E4.群选择器
& u7 e. X, C2 d  ~$ W( y6 @3 y, i1 y4 C- f' u4 N
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
+ `! n; i! L: q3 U( A; D) p- O( x7 M. l6 O8 F3 I
p, td, li { font-size : 12px ; }
' b. _0 d, [* n8 V- Q+ _+ m
就是给li下面的子元素strong定义一个斜体不加粗的样式
) \' v. }$ o3 e# ?( E- N1 |
! Z: B, v) u, ?; P  C6.id选择器
& Y2 I% C' Q& i8 K+ p* G% v0 t4 r) j* i5 s* M1 s
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层$ @5 F7 F( |" h$ B; E& X+ V
<div id="menubar"></div

1 |- d, Q7 ?# y: t% f# N/ x# W* I! F3 a5 }# D+ b- Q  k+ q; L' T
然后在样式表里这样定义:, r: A. o! n7 v' j: B
! o+ b4 ^; }; t, x# H" ^7 y. A

: k# [3 n. t! w1 {! c2 o
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

: G( e8 D$ Z% x. S9 l4 O" J  K0 r1 h; G其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
- c, E( e: T4 n) n+ G4 e, L; `$ x7 E$ n+ J7 p1 m0 o. B
id选择器也同样支持派生,例如:
: o' E) R0 G7 K! D$ S7 T
#menubar p { text-align : right; margin-top : 10px; }
8 u/ L/ v) L% p
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。( C! n- Q8 V: o" X& a

# S/ g2 ]8 y! R+ c6.类别选择器
) n0 W# K$ k  R$ I0 X( L: [( Z) D# a$ {/ [1 _
在CSS里用一个点开头表示类别选择器定义,例如:
# N; e8 C; C0 \1 v2 i) K: b
.14px {color : #f60 ;font-size:14px ;}
* l% K2 J. D* _. d+ Z; s

1 B* ^! j- G2 p在页面中,用class="类别名"的方法调用:2 D7 F) D6 L9 ]  B0 j2 K% ~
<span class="14px">14px大小的字体</span>

: `& Y" k% ^( A+ i- U' g1 {) o; k& {! ^. s7 O& x
这个方法比较简单灵活,可以随时根据页面需要新建和删除。- U- B  b! `, ~, x* X
; N& U7 S  m2 p& `
7.定义链接的样式+ v4 K0 Q; P) {7 @' K( D( ?
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
! ?3 e% q7 X* ]  F# t2 l2 N
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}+ @5 v2 n  u, `2 n$ _
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}6 W# p% z# Y4 Q. _& @
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
! P/ U; m) k$ S3 Ha:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
$ f/ U+ R$ r, e9 U8 j& z

& C( t( u+ X1 b1 h8 K& S以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--
% g% p  p) J* u5 `a                        { text-decoration: none; color: {LINK} }4 ^" j! {3 r" J2 Z: k3 M, ?
a:hover                        { text-decoration: underline }
6 Y! d- x7 }- I$ s7 obody                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }
( Q; m% Y- B8 btable                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }
& @- a1 b9 [& h9 I- oinput,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }0 N9 W& z: G: I3 l' o
form                        { margin: 0; padding: 0}
/ }2 C! ]: j8 W/ _- Qselect                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }' S7 Q- \. u; A. V3 }! l
.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }
( R2 A- H$ U, l* p- {.nav a                        { color: {TEXT} }
1 P3 S' h- _/ O) N- ?* m" h4 j.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }
4 d  B3 ?9 x4 M: j* X.header a                { color: {HEADERTEXT} }, c: ?5 c% K' m: t- O' E
.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }
3 N' s' Y" U$ ?6 m.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} }
+ J$ m' Q" c! w" v# ~. y5 n- x.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }7 T7 x+ C! R2 [0 q& t
.smalltxt                { font: {SMFONTSIZE} {SMFONT} }7 y' V0 p  `. a/ k3 _; p/ k
.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }: c" F/ {3 ]& S7 E1 F* ^9 l
.outertxt a                { color: {TEXT} }
! y, e) v, O, N* z% J, W6 B1 @/ k4 L.bold                        { font-weight: {BOLD} }8 H4 Y$ X0 u( }* C
.altbg1                        { background: {ALTBG1} }) x1 G# E4 x# V
.altbg2                        { background: {ALTBG2} }$ p3 a7 Z% m5 K6 V" a# W+ P  D* p
.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }4 g2 z* |: _  ^% m2 p: U+ O
.popupmenu_popup {BORDER-RIGHT: {BORDERCOLOR} 1px solid; BORDER-TOP: {BORDERCOLOR} 1px solid; BACKGROUND: #ffffff; BORDER-LEFT: {BORDERCOLOR} 1px solid; COLOR: {CATTEXT}; BORDER-BOTTOM: {BORDERCOLOR} 1px solid}
+ n3 j4 O# j# ]$ O.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} }
4 d% [/ r) V+ [$ C, F.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}3 d$ S) X! f8 _3 N! }
.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}& u7 Y: w0 `2 B
.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}4 ~9 ^$ X% x0 i5 n! g
.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }
- e/ d) J6 b) ]2 d5 j# r.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
: O% V6 [' m9 v- l.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
$ d3 J1 _1 X5 C' s7 H$ x.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}) k9 r, n( \$ @( A, P( W6 W
.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}. T$ X: O4 \( S' A) J+ k3 b
5 ^* r, L4 J, |4 y. D) d, V3 I4 i
--></style>

' ~/ c4 n6 q" P/ X# t8 M0 S
% W$ ~; ]8 j5 N: c7 W& ^8 g$ c上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

傲天阁游戏公会
联系我们
咨询电话 : 020-88888888
事务 QQ : 85075421
电子邮箱 : admin@admin.com

小黑屋|手机版|Archiver|傲天阁游戏公会 ( 粤ICP备14058347号 )|免责声明

GMT+8, 2026-4-21 10:22 , Processed in 0.099654 second(s), 6 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表