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

3903 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。" n" W5 L, S8 m1 N# h. j, [

6 f, `- t  {5 C" y" s' e+ s1.基本语法规范
; O( X+ M6 i! u# Q+ c% Y分析一个典型CSS的语句:
) M& |$ L+ X+ V" n+ D, ]9 ]
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

: q8 [- L5 r  {* b. h# s其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
6 b! J$ _' b9 y+ v# c$ @样式声明写在一对大括号"{}"中;
% j! W0 d% H( i" a5 r7 d% BCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
( Y- n5 R; t$ J6 W"#FF0000"和"#FFFFFF"是属性的值(value)。) L7 |5 ?2 e7 P- \& t+ c
! }: N- d- Z6 O! Y3 o5 Z' s
2.颜色值
: V6 l- d& t5 _9 M/ v5 a9 c8 K
3 W* r4 p/ m5 K+ T3 Y8 Y$ A颜色值可以用RGB值写,例如:! j  \) Q* H1 I9 ?) i
# Z6 f( U6 I3 u6 S
color : rgb(255,0,0)
( t- _0 C! A5 p! }0 a
,也可以用十六进制写,就象上面例子
  ~- ^0 R$ ^, j2 l: k) o0 Q& s' Y2 u% |. c. |
color:#FF0000

+ A0 ^% F: Q/ S如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。: g* \1 H$ {: L) d
- L. Q4 N  R% Z( E- D2 S0 O+ K
3.定义字体
: j$ r6 B. _& d' M6 q+ ], rweb标准推荐如下字体定义方法+ f) r2 g4 r2 @& p7 u2 p
9 ?$ Y' M5 w/ o' F+ G# c% W
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
2 ^0 G. j$ s- X: W2 t# g+ |2 N
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
/ L5 N8 [. C7 I$ i6 c# TLucida Grande字体适合Mac OS X;   Q: Z7 T6 c, g0 T
Verdana字体适合所有的Windows系统; & `# k3 s8 y/ f& l
Lucida适合UNIX用户
3 b; B+ y6 x! A. z5 A  p"宋体"适合中文简体用户; ! m/ M' E+ e9 W/ d; I
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
. p. o3 W3 E& P1 ]) \' j4 Q- e0 T& g3 r/ y' k0 b" H
4.群选择器
/ Q4 c9 J1 ~! B/ H/ q  X# z( I
$ ~5 U9 T: _- z当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:2 q! F) G+ c$ F( ^1 j3 C4 y" H. h

& ]0 O3 z3 |; {) I% u3 b
p, td, li { font-size : 12px ; }

) }6 H& |1 u# ~8 \) P: f$ A就是给li下面的子元素strong定义一个斜体不加粗的样式; V8 k4 c$ O" \1 b6 o; v  U

2 H* l* S3 `& ^/ M6.id选择器
6 p; F9 Z2 [3 I8 M- v' ]$ [
; N/ ?2 @2 v6 N# w/ x& E用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
( V' R; _3 Z: U5 x3 y
<div id="menubar"></div

/ Q) W) B( s4 W' j. o; {% ]4 _; Y( g4 x7 L. |# J9 m! E$ `0 A
然后在样式表里这样定义:
* J, o* T, G% f6 ?4 m0 `; c% q4 v; X
3 v4 m/ }6 S" }; S5 w3 Q( X8 ?2 S
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

/ w! V/ G* h6 C: t其中"menubar"是你自己定义的id名称。注意在前面加"#"号。  j* y$ q$ ^! V; J. h, U( E
# Q. j& R% c; L+ U* ^5 |
id选择器也同样支持派生,例如:, G4 H" q4 d' Q* j8 W
#menubar p { text-align : right; margin-top : 10px; }
" l) G6 r- B" o7 Q! O2 r
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。2 I  ]0 }: d, L( W+ I

, n: d- A* W9 C' L6.类别选择器) }3 {# i& T: W  Y* `' u

4 i4 }4 U$ z! v8 T" y在CSS里用一个点开头表示类别选择器定义,例如:& q* `* q) J- i, a) H: X! M6 w
.14px {color : #f60 ;font-size:14px ;}

% n$ @+ `+ }6 W2 J9 Y
- C1 L( ~# D0 C. r' R/ c* j在页面中,用class="类别名"的方法调用:
4 K0 ^9 l- B, H0 I0 }
<span class="14px">14px大小的字体</span>
+ m! ~. z; Q9 |/ L% ^0 \
* p  j5 l, C$ A4 k( `
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
- `6 ]" b( M6 U
# e) E0 v/ I4 \& V7.定义链接的样式
. r+ U% h6 b& G- ?# u6 y3 bCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
. ?) W5 W: o& n
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}1 o; ^# a& r; }3 f8 C* y4 o
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}* l9 Q9 T7 r- O. H3 N
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
5 _3 ?% Y3 r, J! Q( Oa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
  |3 I# d3 ]6 N4 J9 F

1 L+ G, g. }3 S" J$ m6 r以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--# I1 v7 W# v% w& y) p
a                        { text-decoration: none; color: {LINK} }5 U( S8 a' ^6 E- `
a:hover                        { text-decoration: underline }1 D5 l7 u+ M! z0 `+ t" n
body                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }
8 Z# \" e0 l4 k/ K0 etable                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }% |* J, d% V4 B  f' r' i+ b8 V
input,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }1 T9 P/ K  A8 j
form                        { margin: 0; padding: 0}4 `3 a7 T9 J3 G. N3 G/ m9 C
select                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
# N% C! k( ~6 j  p# ^" A! o7 u.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }
" S+ ]2 z( G% ~5 v* x  A6 L: b$ N.nav a                        { color: {TEXT} }6 t( o9 d% l  R  W0 N
.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }
3 I5 u/ s. n# D" ^.header a                { color: {HEADERTEXT} }
* h) l  f! C  ?& w2 K& E.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }
  \! N5 D# m& r.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} } + A& [: s  N; D$ f7 j
.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }7 [1 n; {' h- \5 G
.smalltxt                { font: {SMFONTSIZE} {SMFONT} }3 r: [: p) C8 y7 V
.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }( [6 g- v1 a- |, O4 G3 v
.outertxt a                { color: {TEXT} }4 A0 {5 M6 {: y$ c! J9 ^
.bold                        { font-weight: {BOLD} }
6 A& Y( G) J1 F$ f" b/ Q.altbg1                        { background: {ALTBG1} }% A- q) i1 b( Q! e0 ?+ ~4 j; \
.altbg2                        { background: {ALTBG2} }1 C+ c. |5 V& L; I
.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }
. J- _' p8 G( g5 b' D0 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}
  r. [& v! ]# _.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} }
+ r9 Q  s) X+ i$ \.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}
0 p4 G+ j. m$ S7 G: g( M: y8 Y.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}% o5 P# [1 x' P8 l' v/ o" p
.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}2 a, k3 j( j# L
.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }
6 f. a7 b, ~) K  w.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
& `- w" ~( w) F! B, Z- d& E.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}6 [4 u0 d4 Y$ Z5 d* G
.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}( y+ v" L; q2 h5 [) O) L% W& {
.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}. _8 x6 V6 F9 T% A2 I9 A. D  G
5 Q! B; h: T3 m1 ~  f
--></style>

  s9 ^1 ]' `6 K7 {# c$ |3 ?( k5 O8 \( d1 ?) O
上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

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

GMT+8, 2026-4-18 00:34 , Processed in 0.089079 second(s), 7 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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