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

4646 3

重点教程一:CSS

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

6 ^- p1 p1 r" u1.基本语法规范
9 w  p! L* h6 M8 s分析一个典型CSS的语句:
' g6 z9 a6 C- [
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
2 q0 u$ L* @4 d! g. i
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ! k! |, _% X; i* h( L) o9 J
样式声明写在一对大括号"{}"中;
" s6 O% k( W, `$ tCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 7 n- [) t9 n6 i; b( d: X
"#FF0000"和"#FFFFFF"是属性的值(value)。* ^5 u( ~* O/ ~( \
% ^2 `9 v3 n  E! d  {, @7 `
2.颜色值( e* O1 P9 U, k7 }' B- g9 u* N* ]
+ Y# E" B: \5 a5 ^- e9 z. ?% @
颜色值可以用RGB值写,例如:! |7 V( B, C2 o7 ]
! |2 y6 D# B+ n4 k% `
color : rgb(255,0,0)
4 D* G; a1 U4 Y& `* i9 o$ y( A8 i$ x
,也可以用十六进制写,就象上面例子  v! f3 p9 @7 n! J; L0 l/ _

) a" j' w5 }8 k6 S
color:#FF0000

" b: s  C1 q( ?# i4 C, g; w如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。8 `" d3 ]0 X+ u0 ]9 ~! h1 ^
5 i5 l. t" V: h; e8 q4 K
3.定义字体4 q" U+ X$ {* o7 ?( k- M$ U9 z' N7 _
web标准推荐如下字体定义方法+ U: S1 f$ l" q

/ g" K0 y. j7 y$ M8 i
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
7 q! t1 L5 t$ X) _$ e/ ]8 y' A' L
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
, M! V- x: |1 P: O2 ~3 T2 @# tLucida Grande字体适合Mac OS X; - n! `' x: m- `' q4 ]
Verdana字体适合所有的Windows系统;
+ g5 o5 t4 N7 w7 O9 k6 a+ GLucida适合UNIX用户
. p2 Y; \* M$ a1 `! f"宋体"适合中文简体用户;
5 F9 Z) T8 ]& _2 c3 [- t" I6 V) j如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;& |, y( A3 {' ]* d* Z4 b6 ~( F( F

8 [2 D8 W% Q! F/ r4.群选择器0 R6 |) C4 A6 d4 J, t

# U8 E  i" p7 Q- L  A当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
8 G+ H4 Q) }0 `; G2 n
$ W! f. M1 `: d
p, td, li { font-size : 12px ; }

/ q1 S' p4 [- I5 Y0 g( \. B4 f6 ^就是给li下面的子元素strong定义一个斜体不加粗的样式
2 ~! o0 E2 @( U) `3 C7 [! N5 E7 ~% n7 L$ Q3 s4 m" ]
6.id选择器
/ N2 b9 w" d  @; ~- E3 m+ m$ a0 a" Q( ^* L9 Y  J5 \; U- f& _
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层* R8 F  `- t" r
<div id="menubar"></div

! ~( }! p* V, H1 W0 q, c; t, ]' K+ z# A7 h2 _6 }& l+ M
然后在样式表里这样定义:% ^- j* m% O$ A  Z# v4 i) W9 d

7 U) K. x0 m5 Z* a0 U* F3 d8 [- \. Q# E
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
  x  p* o+ N+ S0 P% G7 T8 L2 h& @% l
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。, G! T; T$ \/ p$ t

$ W. G" D  ^/ L' m% T9 _1 U; Bid选择器也同样支持派生,例如:
2 |3 F5 K4 w( _: P9 _4 Q
#menubar p { text-align : right; margin-top : 10px; }

$ G) N1 _/ p& d/ |  Q0 Q这个方法主要用来定义层和那些比较复杂,有多个派生的元素。% s7 x4 x" d5 {0 F3 Y
) `4 R/ X1 B" J+ v7 K* S- _
6.类别选择器  G) S; ?8 ]: g% D9 L

, N, p9 d- N4 k: p$ E3 r! R( v/ c0 n在CSS里用一个点开头表示类别选择器定义,例如:
; m& y; q* [( H* j" O. M+ X
.14px {color : #f60 ;font-size:14px ;}
( k* f! p+ S+ c( W
$ a, H  A  K; |3 R+ L: U
在页面中,用class="类别名"的方法调用:. ~; m/ z, c9 y) S/ ~0 N3 z
<span class="14px">14px大小的字体</span>
9 B% C) v. B2 _, M+ \$ G" {, G4 n
( O9 L8 q: a2 r4 ^! z3 n. Z
这个方法比较简单灵活,可以随时根据页面需要新建和删除。7 ~2 \, \" p9 z" T9 O

: |. n1 M4 w: o; N+ n- ?7.定义链接的样式
0 U8 V; l  y% Q2 s8 Z( BCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
: ]; ~  T+ d, N* u8 d+ Q
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}4 w3 F9 X  G) \0 N4 e/ [" E
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}* Q3 |' |! l" @. I7 h3 N5 V: F
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
; M" Z! c' o9 Ua:active {font-weight : bold ;text-decoration : none ;color : #90 ;}

4 v7 ?( X' o. x& a* p
# B) s9 _* y/ L以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--
: L' v6 v8 |. A/ Za                        { text-decoration: none; color: {LINK} }1 [# R9 Q: L' n. t, y( i% e/ W. b
a:hover                        { text-decoration: underline }  ], M) K8 L4 B  c3 ~
body                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }
* g* x8 n- X4 k5 |& \table                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }
% a4 M& Z6 i+ c) ?+ `input,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }5 y8 q0 @1 x: s4 ~1 z; Y: T- U5 @
form                        { margin: 0; padding: 0}
6 C! ?6 r) {! t' v  M* I* m; Eselect                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
2 l' S6 D8 _3 q& Z.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }
, l: x1 k, D+ L) z* P+ A; B) n.nav a                        { color: {TEXT} }
; S. ^9 l9 J# C7 \3 \8 Q/ {.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }8 l; Q9 p. F* C/ F/ m  E% k
.header a                { color: {HEADERTEXT} }
  f9 w0 G* ]# b.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }  ?5 @* l  u8 N5 w
.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} } 0 }; y& l! S. n, ?- u; P5 \+ v  b
.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }
# @; x6 g' ~7 A0 v" |6 g.smalltxt                { font: {SMFONTSIZE} {SMFONT} }' ?$ S7 V# r+ H9 L1 X# |
.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }
: |/ \$ b' F8 A( g) }.outertxt a                { color: {TEXT} }6 X1 }* X4 D0 ]( X
.bold                        { font-weight: {BOLD} }
& I! F6 F2 g  k4 |6 x8 M5 h- w.altbg1                        { background: {ALTBG1} }
2 j3 c1 P* x* x% s5 k4 A.altbg2                        { background: {ALTBG2} }% v! G  n0 Q/ N/ d
.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }
, W% J/ n- Y+ N! V+ F0 B.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}# E6 m) e/ y$ P) L% ]
.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} } , D- w; U: K6 K- a( a& N- g
.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}
# T2 v! _9 }8 s$ P5 |" H.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}: p9 I  Y2 k6 g4 g" Y8 |
.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
5 R: n) C+ f) a.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }
! K" o( o  h8 L* D: e.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}3 x7 d5 Z. Q) E" R1 G
.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}6 L% ]  o) k6 k* {9 l; P, z5 f
.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}; e% a% u2 M4 _/ j( a! T- |. k
.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
0 K$ x; @; K7 T1 S+ i* t0 T8 u1 ^) T3 F; J2 i3 [. e, Y
--></style>
1 y. y; I' F' n7 u3 I- A- P
, |2 @6 }& b# D/ {7 J
上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

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

GMT+8, 2026-8-22 01:36 , Processed in 0.097928 second(s), 7 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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