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

3491 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
# a0 C8 T+ t! g4 R! j8 ?
1 B# v, X9 W# Z( U+ o6 R$ F3 Z. U1.基本语法规范
- b' r0 M0 H9 ~' B6 q) a分析一个典型CSS的语句:, ?( W) E) T. s/ Q
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

- K9 ?$ f, X+ t& S& i其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
* j; [+ V1 Y& X6 B- A. o/ d" f9 q样式声明写在一对大括号"{}"中; 6 C* N! m1 A' Y& N3 ~
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; . |- c) o5 Y+ P) R! S1 Z
"#FF0000"和"#FFFFFF"是属性的值(value)。
6 v/ {! g" P& S- K5 [5 O$ n' K, _! i; F- r
2.颜色值
6 ]& w# o/ i# N9 t. ~; i2 N/ q" g* {) C0 R" ?' T
颜色值可以用RGB值写,例如:
3 G. w1 K$ ~* D3 w  P+ u" a& O
% ~& T3 d" c0 N: z8 P- V
color : rgb(255,0,0)

* P3 D. a# G9 ]+ ?,也可以用十六进制写,就象上面例子) C5 C3 Z$ {8 K& u# u, |
: f5 |( b7 T+ S, d' r/ S
color:#FF0000

2 g$ _2 s# Q# Q如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
" u3 k- [4 i) ?1 ?, p: X8 v, n' h9 u8 U  l
3.定义字体
6 I, l8 S( N2 Jweb标准推荐如下字体定义方法
: d8 T; W3 |: ]
  A4 X+ ~% {: F- h
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

1 e# `- A' z9 d% E字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 8 U' q6 T) F$ }4 r. _
Lucida Grande字体适合Mac OS X;
+ ~& n, x' J+ _! t* g& |& F2 t' YVerdana字体适合所有的Windows系统; ; J' X0 D! c- G9 v& I- M
Lucida适合UNIX用户
: i$ @8 z/ ~8 }) e"宋体"适合中文简体用户; + S; T9 c1 v% ^
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;$ b3 k* Q. D8 Q) _7 y0 |
( `. N2 u0 R/ V, Z
4.群选择器. y2 [; ^  _* |4 h: i1 A: u4 `
9 C( s$ `5 r4 P' {7 ^9 b
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
. A1 s9 Y1 E: L  W
! P% d; g& E) W) c- \8 r2 t. W
p, td, li { font-size : 12px ; }

6 J) T  o: n; B* {就是给li下面的子元素strong定义一个斜体不加粗的样式  J$ r. t) _$ `+ q% w& Q
0 w. z3 l9 v2 r6 `) a: G
6.id选择器7 k$ p" E$ |# T' U& r& F7 E

* f* ]3 _# U! F4 `用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层9 p2 B$ P- o2 l: x- X+ B0 k
<div id="menubar"></div
# d* B  B$ P2 |, n* T$ _
/ [# @# X  Q" N5 C$ [; j3 V
然后在样式表里这样定义:, P/ h# P: d! k

( X  _7 T* Q& B3 Y2 Y, @
; z5 H- F8 G8 E- i; o
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
) {$ l( U" @: S5 x7 d8 b( I5 y
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
& _+ y' G8 b, v( l: ~2 [' j) Y  X+ B! J- p3 o1 m
id选择器也同样支持派生,例如:' ^& x/ D$ C! }
#menubar p { text-align : right; margin-top : 10px; }

2 |. i5 l- V8 i1 Z6 Q. h, I- f! u8 h+ _这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
; o  _0 a/ m  V$ K& I: e; ^
* C) D+ D: d* B+ Q" [. B% V6.类别选择器# q( E, V! M; S+ c3 h! u
0 M0 @& L( W$ o" }2 i, b
在CSS里用一个点开头表示类别选择器定义,例如:
  ~, y! V/ r* l8 H+ h! c
.14px {color : #f60 ;font-size:14px ;}

4 i1 Q: g) G; o1 y$ G# Q
. L4 \: f) t/ o) t7 X# }; w7 U在页面中,用class="类别名"的方法调用:
5 x! C1 }7 I! a9 D' Y7 F
<span class="14px">14px大小的字体</span>

- k7 V/ ~, W4 m: Q$ a! ^& C7 |
) {) q! |' k4 e8 V) ~, Z5 n5 p这个方法比较简单灵活,可以随时根据页面需要新建和删除。& {& u' {. l7 G, g8 C; \
8 J2 U; D3 V+ a2 `4 \$ w
7.定义链接的样式" a9 v8 i0 f9 X( L
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
- s  P% U7 ~: j8 q( w' ?2 G# V% z
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}; v4 @/ M- y$ q7 d3 P- f% p
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
  r# f+ X& p- aa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}+ N! {* I; Q7 L6 L
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
0 _' |3 [& F0 p' t

9 R& T3 A8 N& D以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--- C  j2 A6 ^6 M% v
a                        { text-decoration: none; color: {LINK} }
1 _9 b, p+ N1 u( b9 Z9 ]a:hover                        { text-decoration: underline }$ O' [* Y  m5 a% D" X. K% t
body                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }. k0 J# f/ o/ B
table                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }
1 E! \1 L: }- `; l1 linput,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
6 m) }0 J: {( z( xform                        { margin: 0; padding: 0}
: D  E' K; s; _0 M/ @select                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
6 R; g' x1 y# L/ v.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }1 m. D1 r" R+ P- E* s1 ~+ x) i* i
.nav a                        { color: {TEXT} }
; v' S2 f, ~7 M% o2 u.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }
% g  I& q/ U8 v7 G.header a                { color: {HEADERTEXT} }0 w6 k0 E% V* x$ S& t
.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }
* ]4 \+ _/ z" l0 x. F  q( q8 n.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} }
$ ~! z" ?' K6 [.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }
4 d: k; ]4 y8 Q6 H$ O.smalltxt                { font: {SMFONTSIZE} {SMFONT} }
% t' N0 b' \& |0 n8 k.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }
& r+ c+ g3 \6 ~4 ^  H- R) Z.outertxt a                { color: {TEXT} }
7 w2 w! a  e. a7 n" Z" k.bold                        { font-weight: {BOLD} }
, L3 T% X8 f1 C4 o% B- V9 u.altbg1                        { background: {ALTBG1} }
" j1 M; ~5 }  n( L7 x.altbg2                        { background: {ALTBG2} }* b* L8 n5 v" O7 S, j7 R
.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }& d. u% j6 b  s+ ~9 u3 Z
.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}4 F; ]2 X8 p  C/ ?
.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} }
: n+ x+ r2 m7 m% ^. F  F2 B. m.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}' H& g) v. w6 J* |( v5 b3 F6 P& L$ Z
.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}6 @0 l# {9 F4 f, p
.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}: L# o, z, C) M7 f& Q# c
.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }* }9 b6 X* k2 L/ [6 b7 I7 h- a
.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
$ `! {$ Z9 _- U+ l3 j1 c, W* b9 I.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
0 N& w4 u9 @. Z& q.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}# b" u4 Y! J& h% N# A, `0 S
.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
8 G0 I, I9 {# i1 i3 v" D6 N8 b6 V5 t3 i2 J1 n
--></style>
" Z8 ?  a( |1 o. i3 D% w! `- q
; ~1 e3 v7 A, C- y1 R
上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

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

GMT+8, 2026-1-22 21:28 , Processed in 0.090895 second(s), 6 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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