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

3751 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。) Q" r2 p' C, D( ?% a2 D7 \3 V; V
7 k, V& Z( U) J
1.基本语法规范0 }5 H1 t+ w) O% v% ^
分析一个典型CSS的语句:2 Z; `0 ~2 r8 L- G! h3 \/ \
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
; @% d8 |. p+ _  z( P
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
2 c, ?3 K/ }# E/ Y5 K样式声明写在一对大括号"{}"中; 8 X- s& i1 _- b4 ]. H6 H7 s0 N, P
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; $ R+ e; ~  c. Y
"#FF0000"和"#FFFFFF"是属性的值(value)。# G. s# E0 h6 H

/ h+ p$ r: Z! ]7 _8 v# `2.颜色值
/ X) v: K' M9 L5 k: ^' r+ D  ?) @: p8 L
( L: ?5 i$ p) l5 Y9 |! [  g颜色值可以用RGB值写,例如:
2 v- n) }: o) F. |7 J1 Y* |
1 ~& \  @% m4 K) E: B9 N
color : rgb(255,0,0)

  o! Z, {8 G' |4 r: l,也可以用十六进制写,就象上面例子( D+ f% ?) S6 a/ ~/ E/ F5 w

4 `- [: ~& w# N4 y; V3 g( I
color:#FF0000

! Z4 ?+ z. J. e3 }2 D( T* P9 b& \如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。8 G' T7 J& Z6 T
: P8 f/ J) Q2 I0 r
3.定义字体. n) ~- r* ~: I0 o
web标准推荐如下字体定义方法, k# Z! {6 D) H& V5 L/ t; h2 a
6 o1 S' t: q. {" O6 @  R
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

/ H: ~6 s- t/ |, n3 p字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; / ~' a  @/ z: [. l0 k1 V
Lucida Grande字体适合Mac OS X;
! l+ ~8 P  l" z' ?Verdana字体适合所有的Windows系统;
9 L/ \( V9 q; |" f. SLucida适合UNIX用户
& R' z# d5 K; u8 J5 N9 c7 S"宋体"适合中文简体用户; " |: c% F, [( Q. B2 k7 y1 k
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;+ R- @" `% Y' H$ w3 d/ R

6 T8 y: s3 D, t5 t$ J! t# o4.群选择器  b% Z; n" j7 I$ {3 ^: }
  l* \, o- B- U* \9 w" l% e; E' ]
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:1 ^$ ^( G; A% X' g  {

! N" A7 ]! o( ?2 J
p, td, li { font-size : 12px ; }
. y4 E1 u3 a' _# J( A6 z
就是给li下面的子元素strong定义一个斜体不加粗的样式
* i5 a4 H' s" Y1 u) q7 \# K; F+ C' n  j- q
6.id选择器) `" [* a  r  W$ N" G

0 c2 G& a! {; |用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
( y. ~7 _/ g, p# l$ D, g: Q
<div id="menubar"></div
8 ^& Y: R5 C! ^3 ~7 g; R3 e6 G! v( G

" y/ g. V  s. I  A" ?5 Q" F* R& e9 b然后在样式表里这样定义:
0 N" A- D4 `6 n5 ]" P3 G5 p5 X/ z1 ^& d8 K1 n: S& x; c

" K1 _& u' n* S& e' z, X" B& U
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

; H6 R) i8 E- O/ l# F' ]其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
' C2 f$ p6 Q. D. z( f7 T! _
1 X" P$ k" c8 h$ r: k. Oid选择器也同样支持派生,例如:2 x, m1 ^0 U/ n& D
#menubar p { text-align : right; margin-top : 10px; }

7 U. J: i$ o* A7 V' p这个方法主要用来定义层和那些比较复杂,有多个派生的元素。/ e, ^' Y0 }7 h, J) E( G$ U

/ d. t9 w5 i2 V5 `( k4 U0 {5 c+ G6.类别选择器
1 _( b$ Y. s% c" U8 `
' b! q9 S+ H# ?3 |8 r$ l, M在CSS里用一个点开头表示类别选择器定义,例如:
: p$ a& B- F0 _4 C
.14px {color : #f60 ;font-size:14px ;}

* g& K" U9 j# P# \- p2 x6 B4 x
% x* N0 x4 n% [, x在页面中,用class="类别名"的方法调用:
# K2 O- D: x3 C
<span class="14px">14px大小的字体</span>

' E* _& f' E8 o$ x& p  u" `( z* V; ^- A7 a- c% \( Q5 k
这个方法比较简单灵活,可以随时根据页面需要新建和删除。' d! _7 U7 d: f; t  e7 t
) ?/ O; g8 o1 X$ @+ ]& B, e
7.定义链接的样式6 I7 S6 H! k& q9 v. n
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
! U1 [* q% z1 f- V. H
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}4 p. ?, Z# H% R
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}. L) f% R4 g& w0 a$ ~; a. F' M! U; T$ N
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
$ p+ T7 e* I( s8 ea:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
' P: A( j1 q, v; g2 N+ [

$ g+ k: K5 i+ _0 E4 d* b以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--
/ T4 p! n9 a0 k! T* {( ba                        { text-decoration: none; color: {LINK} }3 m5 n8 s6 {, k0 e% w' ^- e
a:hover                        { text-decoration: underline }# Z4 q; g/ m9 @7 b% S
body                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }% Z8 m# J6 S) L5 H# ]8 Z  `$ r) X
table                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }* B0 K" I6 D- z( z
input,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
& {6 t! Z! w) J4 Nform                        { margin: 0; padding: 0}2 o, G. N0 p4 t  q# G
select                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
8 Z* o" m' h' F.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }6 u. J0 o2 d) D, G+ v' `) d. i
.nav a                        { color: {TEXT} }
6 e$ Q. g5 I7 {.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }6 n5 j: ?% u& V; h
.header a                { color: {HEADERTEXT} }
, m+ g* P' j" Y8 R3 T.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }
5 F4 U4 N( r' M  A' t  [3 k% s+ A.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} } & b! J1 A- ~3 B- S
.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }
- J" u0 R  o1 B. I1 ?6 W7 B4 p$ _5 }.smalltxt                { font: {SMFONTSIZE} {SMFONT} }3 k9 l2 v4 y) j) F3 A/ s( A
.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }
  Z* _- u- f7 n# e+ j7 E.outertxt a                { color: {TEXT} }# p- [$ n; j4 o% @: O) s# B( }
.bold                        { font-weight: {BOLD} }  U" c7 W" m" V% T
.altbg1                        { background: {ALTBG1} }9 }* T3 K& O( i! F" ]1 o
.altbg2                        { background: {ALTBG2} }% X1 k; h1 _8 {( Q
.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }& [3 p5 D0 [: D/ 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}
/ b3 W* O4 W$ U7 Z, I5 l4 A/ X.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} }
3 L3 L: z2 s0 T.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}
% W7 D4 }, O3 V  N+ W* g% `2 v! Q6 Y5 L.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
, I4 K8 L; q8 K* N2 E) u.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}0 Z9 H# u4 x3 Y( s
.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }% |2 l/ j) h4 q+ H
.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}" _4 W9 h5 l$ S' M
.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}" L& R5 h! U8 d- _: r# _
.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}9 ?1 j8 n/ T# u, ?
.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}; h- v/ m! y" m
- x2 m0 g( ~5 T5 l
--></style>

2 d/ m6 q$ a# H% j9 ?0 m* C! i# F. r6 D: ~4 V+ k( k
上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

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

GMT+8, 2026-3-16 01:40 , Processed in 0.108650 second(s), 6 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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