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

3465 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。+ ^) z+ L" S: W6 f( w& o

- K; |1 A0 N* `6 M1.基本语法规范
/ d7 @: ?  I+ t: A/ y! P$ G分析一个典型CSS的语句:
' C9 u, h) S& Y3 d1 u0 t8 r4 G1 W$ ~7 j
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

! g* ]) }; ^, L& ~其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 5 U) c4 u, B6 _- z) Z1 p
样式声明写在一对大括号"{}"中; ) a4 E' A8 @4 V
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; ' F- n5 g5 Y  {6 a" y0 f
"#FF0000"和"#FFFFFF"是属性的值(value)。
8 M8 b) ?( m6 p# H& w/ k
* c- l: [& h0 e& h  q; h% I. ^7 W% u2.颜色值
5 ~. j( p9 S% j, p' B1 b
. G7 Y& f8 O  F" s, h  `+ J颜色值可以用RGB值写,例如:
7 M; Q% P) F) I. b; [( X% G6 T- g3 o
color : rgb(255,0,0)
& Z& D. ~0 D& \. S1 U0 O& `$ K
,也可以用十六进制写,就象上面例子
/ Q0 i# U1 [" p2 {
# r  Q/ Z6 R, o2 O) ~* u5 }5 ~! A
color:#FF0000
* n: v0 {+ S7 B3 V8 P3 z7 p5 y" e
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。& L  Q6 r$ L0 q; R+ r& [

. u9 d# m/ I, s3 m$ A3.定义字体! L5 G$ p# |% z/ w! z
web标准推荐如下字体定义方法
$ N3 C+ Y/ y0 Q6 y" y7 e% z% H5 m: l# Y2 h. V2 @7 a: p9 U
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

8 T* @9 p8 n* s, n1 [字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
1 w' [# b$ E0 T  @. [( e0 CLucida Grande字体适合Mac OS X; ( a7 R. {' W7 J+ j% e
Verdana字体适合所有的Windows系统;
! v: ~1 J( y# O/ NLucida适合UNIX用户
! L  f. M7 x0 i, }+ C4 c. o* J5 k"宋体"适合中文简体用户;
" k' [5 _# d2 v, V  G如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
7 d& T0 G+ q2 o* l/ q
; U" I' {1 c0 P7 p! t4.群选择器
) y  v7 ?( S2 a5 P5 M: I- \, r4 D! t: y4 M8 B
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
( R* @( F- T+ S/ S  W$ K0 J# d- y; ]2 P8 W
p, td, li { font-size : 12px ; }

- a- h' w5 P0 ?% ~; I! s9 h9 b& M就是给li下面的子元素strong定义一个斜体不加粗的样式
6 Y) D1 e& C6 v; z
( d' _# a. e& I" M5 U0 M6.id选择器
- p+ r( f. V7 l. g
$ E) j" |! N/ U# c* V- z用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
; n: q$ v3 X! P2 O
<div id="menubar"></div

9 k9 u  b: L) d/ J% s4 q5 R3 W2 _( M/ A; X6 i) L/ d& M
然后在样式表里这样定义:
+ F" Z1 n5 o$ l2 S) y- f. W
" C! L/ T  M6 p
$ ]! `, D9 _$ {4 c& g) }
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

9 C3 F9 Z0 N4 M0 w. X其中"menubar"是你自己定义的id名称。注意在前面加"#"号。  a9 |; L7 |, [$ C0 `% A8 U* Y
! }, g$ O) ~  p( s3 D* |
id选择器也同样支持派生,例如:1 |' T3 `9 R; G" U) _$ b
#menubar p { text-align : right; margin-top : 10px; }
" R8 }# H- ?2 S
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。1 Z( ?: E7 ~1 T

# i' x3 ^# g0 o6.类别选择器/ `: C  S2 z2 J; v4 P; I: L) d( h- O. V

6 }( t  [" z, X在CSS里用一个点开头表示类别选择器定义,例如:
& H! S$ h7 ^- P- V% _$ T. {
.14px {color : #f60 ;font-size:14px ;}

/ B0 ]9 n9 y1 `: m
, i( [8 q' {" l) L+ a+ P1 k在页面中,用class="类别名"的方法调用:
& B. X, h! Z4 B' `
<span class="14px">14px大小的字体</span>

3 ?7 o, ~6 H* x! d* b8 S
' ^- R8 i& z6 Q! v5 B9 h$ m这个方法比较简单灵活,可以随时根据页面需要新建和删除。/ }' J* y3 C! ]# D  r
" P9 p, [" T; @( _4 j8 j( h& a6 `
7.定义链接的样式& o) ~5 |! \$ I* I/ U5 l- L( J
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
5 M! g$ k1 X5 ]9 r! h5 ^, [
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
- [1 b: e$ `' W4 g+ |a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}( Q, }5 n% S$ U1 h! G: o
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}; a" ]3 B9 L( q6 i; ~! c
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
1 p9 ^, y, Q2 h2 x2 s, K" f
+ I5 }1 {1 o9 }# X0 {6 k6 E; I
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--# k" s) w3 G# l  C
a                        { text-decoration: none; color: {LINK} }, n" [& j/ k+ Q% E, {8 T3 O# y$ Z
a:hover                        { text-decoration: underline }
8 t" }1 M4 {% _: U, `" t) e8 o+ dbody                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }2 ~5 f5 H0 b0 z$ ?4 I2 l
table                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }
% o3 G0 d6 y2 U7 ]8 Y6 t% z8 sinput,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }4 G5 v& B' _- W4 R5 X& u, U2 i. y
form                        { margin: 0; padding: 0}
  o) Y1 C$ I1 X# W" S. n4 \select                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }' y( w" D& m7 y& K5 T, R
.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }
8 g  U: C# ?- I; T9 u.nav a                        { color: {TEXT} }9 W  v, \0 n; x( v$ i* \3 R
.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }
; |2 q7 n- F" C$ \% l.header a                { color: {HEADERTEXT} }# x( v- l/ k+ Y' Q
.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }: Y* s' q" P0 Y! w/ e
.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} }   j* _/ J) ]& y/ V( P
.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }4 s0 t9 T+ _* ]' @
.smalltxt                { font: {SMFONTSIZE} {SMFONT} }
3 l: x3 z7 Q8 S7 x.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }
& g9 G0 X. D% c6 e9 `5 g; u  H) x3 ?.outertxt a                { color: {TEXT} }
6 F( Q0 P$ @& K. R.bold                        { font-weight: {BOLD} }
) _3 l0 W7 g# ^.altbg1                        { background: {ALTBG1} }$ @1 c1 X2 _+ w) f: C  [
.altbg2                        { background: {ALTBG2} }* G5 A1 M) o. e
.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }
; ]1 x  `& @; Z4 S.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}& Q* j+ E2 R" T/ y* v% a  ]) w
.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} }
( x& S2 D8 I% ]* e  d6 ].popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}
  n+ w2 L. v$ |0 M2 _.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}2 S: W. e2 m" @; Z' V! h4 m7 x: e
.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
0 F6 F/ t+ l" F* t8 G  s.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }
  [$ n: H& c# z" d) K! V" f& S5 ]( P.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
% Y0 o$ P4 b( A  b.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
5 z) s% f& }% \.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}1 P  O6 r6 d9 n9 a) b" _; S  V
.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}" y6 g$ y* j" f
2 f5 S# Z7 D' t0 t. h
--></style>
  ~/ v, k/ J7 U, `% N
# e& ]7 j. S1 F3 a" {
上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

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

GMT+8, 2026-1-18 08:26 , Processed in 0.104539 second(s), 6 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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