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

3933 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。; v) s8 p& v8 n! Y6 h5 p: F) r, }4 b+ d

9 S/ @. s( {$ G1.基本语法规范1 `% Q5 I5 v- p- L% c
分析一个典型CSS的语句:
9 [+ p4 U$ u9 g7 Z, o  @
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

3 H3 X* P" P9 H4 T, l1 n其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; $ ~( w; Z% K. @* z/ b2 T5 p
样式声明写在一对大括号"{}"中;
( e; N) O& m/ _- c) [! jCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 7 }% [- ?( h/ @& }# b
"#FF0000"和"#FFFFFF"是属性的值(value)。4 z# e6 @, ?0 s3 v8 `1 A7 U6 }) o7 f

% {; X) b: f9 p6 H7 A0 i2.颜色值
& p2 }( F* Q8 m0 l. K
0 [; \) C6 G5 C5 k, ~* ?1 i9 m! \1 @颜色值可以用RGB值写,例如:
  k; V6 d1 `& J/ p0 v  s; z2 p2 f& F6 K
color : rgb(255,0,0)

5 N3 ^; e8 ~, L! Y& O8 S,也可以用十六进制写,就象上面例子
3 K& }8 B3 ?: S/ E/ g( U1 `. D9 ]( |1 t# M- t6 ^- A; i: }
color:#FF0000

6 r4 b+ O3 f( K. |如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
  W8 @8 g6 f5 V0 H/ Q2 c6 G% h  d' o% k7 t5 g
3.定义字体8 n  M: V6 `( c) P1 A9 U
web标准推荐如下字体定义方法# |! e& M$ l4 r
. B8 j" A' ?* }. @0 l6 g" l& ]0 `
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

- ]; C4 g; |% j$ }- f字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; / W2 P& G7 L1 ^
Lucida Grande字体适合Mac OS X; # x0 A0 T4 s; [/ s$ H2 x( n
Verdana字体适合所有的Windows系统;
/ ^! |& C  l* d; y% {/ f8 vLucida适合UNIX用户 + c5 n( x2 F2 }9 y
"宋体"适合中文简体用户; 9 D( I/ @, p  f! {
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;- M/ c' d4 Y$ Q) t/ _
' C; y+ z& y9 O3 W: H$ ^
4.群选择器) ^& b( _' Y0 V. q1 A% G
2 K8 ?* a7 D- x! H7 B; [
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
" O: I' @, P4 O) g& m5 N% k/ S7 i3 r4 r/ `
p, td, li { font-size : 12px ; }
/ D6 L5 l; P# H! G0 Q
就是给li下面的子元素strong定义一个斜体不加粗的样式
9 O: G# T' Q& q6 x4 G. H( j
, G" t/ r0 `* l4 O8 o6.id选择器
& o( O& Y$ ]# s- ^' p, G% L2 n( ~" j* v* Y
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层( U2 F+ J$ p; E$ i! V1 L6 o
<div id="menubar"></div

9 f* _% t6 u; P* |5 X- q5 R5 t8 r. T
然后在样式表里这样定义:5 M* v% E* Y$ j& H3 ]% f
) K- s4 I! g8 n* N6 D& o
8 Y. U& k2 ^- S, N& f
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

1 n+ Y9 q- Q* v其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
7 H1 d4 ?+ X2 g+ s' g2 _& D) W( ]1 Y. i/ d( X* |% b
id选择器也同样支持派生,例如:
0 X0 D) @) j2 @3 v# E
#menubar p { text-align : right; margin-top : 10px; }

9 i3 x8 ]& i$ Q0 H* @2 v# v这个方法主要用来定义层和那些比较复杂,有多个派生的元素。9 b$ n: O( @0 y. ~
- Z& I3 t& i4 v) S+ [' F
6.类别选择器6 U/ t* s+ k3 W7 c# ]
& O7 Y* }4 t4 h' {, w
在CSS里用一个点开头表示类别选择器定义,例如:
0 A8 m3 z% W$ P0 f1 p8 D0 W7 B
.14px {color : #f60 ;font-size:14px ;}
8 @/ H: q5 r' X8 B0 Q& l
0 ~3 _2 T5 ^4 X& s& |5 J
在页面中,用class="类别名"的方法调用:
$ P  a# V$ k+ M& R5 l5 A* U
<span class="14px">14px大小的字体</span>

3 W; n" {5 {$ p* t0 j0 Q7 g& [! [! x% r* a) o
这个方法比较简单灵活,可以随时根据页面需要新建和删除。0 R2 A1 m1 b2 d

0 z! Z7 ^2 V0 n* F& O9 O" G7.定义链接的样式  @" W, N8 ?+ y4 A' z
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
5 f* ~5 M7 W3 o4 G" s, s
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
; j% E. K8 l$ X; ]. Wa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
: g6 _. B2 p2 i: @- F4 _a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}0 E* t0 o1 s2 A* e4 T) w3 p+ T
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}

+ j6 Q0 h1 h8 r) Y) s3 ]6 A/ H$ I7 }% h. J$ q4 x
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--
; C8 \- L( W/ Ca                        { text-decoration: none; color: {LINK} }; c1 D/ h, A6 w. M7 `
a:hover                        { text-decoration: underline }
8 h: X/ M; F4 ~: Jbody                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }
$ ^9 x! G9 W6 P9 U: \# X2 X3 h, z, Dtable                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }
3 o9 s+ u6 e6 k  M2 finput,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
, _% L3 X, E$ K  N" F. Q0 rform                        { margin: 0; padding: 0}
) V) d$ p: k6 c! w" o7 _: hselect                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
4 K( f3 p# @$ h! n.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }' h, C  w/ }" v# o+ D
.nav a                        { color: {TEXT} }
! J; Q& m1 f! [7 j2 X.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }
, t2 N* `: C4 T* k( O.header a                { color: {HEADERTEXT} }
1 `6 g" c) o2 y  p6 P* G.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }
$ u) d5 t8 W0 _' d! W/ V.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} }
$ g1 U, A) O; o" t9 U( C1 e.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }2 J% d1 W4 u+ w$ A* }& @7 B
.smalltxt                { font: {SMFONTSIZE} {SMFONT} }2 _2 Z) |% E+ s0 H  z
.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }
! t8 H* B: `+ D: C- Z.outertxt a                { color: {TEXT} }
1 A+ y* d/ Z, @& O2 B.bold                        { font-weight: {BOLD} }
! B+ C8 d9 p9 u6 ^% Y2 K! P4 c+ p.altbg1                        { background: {ALTBG1} }
+ t5 w# L7 d) c8 i4 t.altbg2                        { background: {ALTBG2} }
7 \# A' x2 L6 U: b# e4 l) p4 B& \.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }+ f' B" B" f! }( `& q, |
.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}' b. T" K9 z) S7 E7 V
.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} } 3 M+ B4 G4 u* @& X8 v( K/ ?' ^
.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}
8 p+ A# ~& z" p2 X- D.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}" f, F9 o# i. Q" t
.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
1 k% Q: Q; W; k6 J0 L.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }5 {4 k. E4 `% r: A& {$ F
.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}! }2 t* F8 \% ^( L: [: P; \
.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}  H( _4 I% N2 H2 D
.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
+ O  D/ K7 q% X2 W.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}6 w- @9 A, W, b/ D
7 W. g0 z& \. h
--></style>
' r: {' K2 z' _! P! Y
6 W& B8 M4 m: S. }0 q" t
上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

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

GMT+8, 2026-4-23 03:55 , Processed in 0.113665 second(s), 6 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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