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

3617 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。; ~/ r9 r$ ?- s

8 N, y& q1 n" S1.基本语法规范
  g) R: f) e) r8 H" q; O分析一个典型CSS的语句:# ?" E$ |; j$ M  G% E0 _5 {3 n8 D, E
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

7 _7 }0 a+ q/ M其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
" C% F# s& L4 ^8 {. A# ?9 f样式声明写在一对大括号"{}"中; ; E6 S. e- v" D9 E3 G$ P
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; & i$ j9 o: a; [0 T7 r$ t0 Y
"#FF0000"和"#FFFFFF"是属性的值(value)。' k% H8 p" C) I9 _8 r/ R. {

4 w+ A: l: V3 g2.颜色值* k; t7 ~6 G. u7 y! u
" }1 ~( W2 k& v1 g4 ]: V
颜色值可以用RGB值写,例如:9 Z9 k  |; R/ Y1 B  u+ @
7 I3 c- p3 G( }, \
color : rgb(255,0,0)

+ Y6 T/ p- l' [- z1 i,也可以用十六进制写,就象上面例子
4 Y. {' d0 e  ]* A
0 C; z5 H+ c5 p
color:#FF0000
- ^' A8 v, v, T$ N0 j
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
0 L2 @+ ^3 f* f2 Y7 g) ]8 ^, S/ ^4 t5 U5 y
3.定义字体. u' q9 X) V9 t. d9 z- B9 N! X
web标准推荐如下字体定义方法' C6 Y: `/ F/ M
9 W# i& H+ o; d. l$ g; r# _: z; S
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

  D- Q' T# ~3 ~1 ^5 a1 S字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
. u4 I. E6 r, tLucida Grande字体适合Mac OS X; , B' N# m' e/ |  x# D& c9 Q) j
Verdana字体适合所有的Windows系统; 8 `8 u  N# s- z* i5 b
Lucida适合UNIX用户 6 F' d2 K; U7 ~  e, ~  R( C
"宋体"适合中文简体用户; 1 F) C: W' d9 X, x
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
" W; k) w; g& [7 Y1 o  t8 r) d7 e* b" c3 @% X) i
4.群选择器
$ ?% u3 m, X8 [5 H0 a# H: Q
3 D/ c, M+ e1 k, L+ R当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
. \* Y( a" P- p' k+ I, {; n( g. O& ?- C/ i0 o1 l2 J
p, td, li { font-size : 12px ; }
+ Y# V' m1 |# y* Q0 Z1 ~7 R4 u' n
就是给li下面的子元素strong定义一个斜体不加粗的样式
4 j+ V6 \* n0 R! B+ J) u
* C$ H' I) O, M9 |7 W& m6.id选择器% Y6 p; \0 d1 K. L0 s4 r# r

0 U5 u) T4 j" S7 I) w9 l- q用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层; a5 \) v" ~" l9 n" k0 y
<div id="menubar"></div

2 j; y" G. b5 j" M1 c/ {( |) e! D! x6 I2 @6 H0 C$ l
然后在样式表里这样定义:
% _$ K* }. }! b* S; D! u4 d2 t: Q5 m) v6 @* C

- \3 \) O7 T3 n3 g  d
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

( N+ r+ R# \0 @4 ?% V/ p- l& N( V其中"menubar"是你自己定义的id名称。注意在前面加"#"号。4 m. ]6 E8 r, f
7 f- x8 R% [& }
id选择器也同样支持派生,例如:0 c0 F" \+ m+ o! R9 ^: J
#menubar p { text-align : right; margin-top : 10px; }

  K* ~$ B' o9 m$ U- P3 U$ s; R这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
0 c. C4 M; U8 H1 t& X- H  s" F' _" _# t# @
6.类别选择器5 J% M+ V7 M9 z
% M% {3 o/ J3 g6 y* b: {- F8 k
在CSS里用一个点开头表示类别选择器定义,例如:5 G: m& L2 E+ m. r- R, }
.14px {color : #f60 ;font-size:14px ;}

3 o2 G% @$ ?) N4 C4 T. j
# J$ n9 i- G. S8 |# P0 B! }在页面中,用class="类别名"的方法调用:7 P/ K9 |* H' @, Y5 y
<span class="14px">14px大小的字体</span>

3 y4 `: `1 G  u9 J) h% h$ G* g# R' s1 h" i" m6 [* k
这个方法比较简单灵活,可以随时根据页面需要新建和删除。* I' k; @1 ~! T9 e4 T' U1 Z

4 I2 t9 ^. m+ W! q6 i7.定义链接的样式
: Y1 F  \3 G6 a, v0 }- V( RCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
9 J1 S- f8 q9 [3 d$ w+ K
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
/ Y, i+ Q, T3 K% C7 b6 ^a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}4 F1 Y. ]3 G! u3 ]+ K; r. v4 V2 m* v
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}* [3 B( U9 a8 i; q# B; O% v& Z5 i
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}

6 E% B: T$ Z' ?* ^6 b
( H) T6 u* S4 Q, u以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--  \* A5 s9 F7 L3 M/ S2 r
a                        { text-decoration: none; color: {LINK} }* e: h( C) E+ _) T; o0 s
a:hover                        { text-decoration: underline }
# p2 Y2 p  a& ~, h% Ibody                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }
% p6 H* |: P) r  u6 ctable                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }( `2 L0 p/ l1 k$ Q5 R
input,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }+ T: I8 ~9 X( Q
form                        { margin: 0; padding: 0}; ~; x5 D+ {# s/ a0 j/ A4 V8 k6 T5 n
select                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }0 M5 O9 g* f4 U7 \+ S/ V
.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }
+ A5 q* O7 @% L1 a.nav a                        { color: {TEXT} }; g. |7 a. F( W- v
.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }8 ]# l: ~) G2 F3 ^8 I4 M% n% S
.header a                { color: {HEADERTEXT} }
1 @0 G6 z. @+ h, b4 W0 o3 ^.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }6 x4 X* l, f+ q; W% D
.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} }
; L1 [. [( X% A7 w2 O! M! P% D.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }
4 m# T7 q/ ?" p.smalltxt                { font: {SMFONTSIZE} {SMFONT} }& T( k% b8 p, W
.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }1 K4 d/ i- A. c8 J4 e+ V% E; ~6 G
.outertxt a                { color: {TEXT} }; ]" g0 W/ r! d/ n' ^; ?& f8 R
.bold                        { font-weight: {BOLD} }% J5 @  w3 _$ H6 \5 X) z% u3 S
.altbg1                        { background: {ALTBG1} }4 L/ D$ ~/ O0 A+ L5 c
.altbg2                        { background: {ALTBG2} }
, V1 U$ N. ~+ h* C* s% i+ w& o8 Y.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }+ O; }- @" J( r. a
.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}
1 V. k( Q. d9 Y9 J( o9 l.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} } 5 o4 V* w! c0 a# l) o( K, T
.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}
& w1 T/ |) G* `' v: o.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}8 j2 G! {$ a- n( m. o# ^
.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
7 F# Y! X) N3 }- k, M.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }9 o. ?+ b, I& Y5 m8 \) S
.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}  A! a& }0 ^) k! O
.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
6 }# a, ]# {* C; H.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
7 P0 }/ t. q6 ?! u: M2 W% S.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}: ~% O' F1 @% T) f7 ~+ i9 T
6 A3 Z  p% H: I8 G* D: o& p
--></style>

* L: s0 J2 y7 y; ~& r- y. E8 g' @/ H+ Y1 M
上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

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

GMT+8, 2026-2-14 10:53 , Processed in 0.092212 second(s), 7 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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