快捷导航

扫一扫,访问微社区

QQ登录

只需一步,快速开始

切换风格

红色

CSS教程-如何设置CSS样式

 
星期八 发表于 2011-11-12 21:53:45 | 显示全部
CSS是 Cascading Style Sheet的缩写,有些书上把它译为 “层叠样式表”。有了CSS的控制,我们的网页便会给人一种赏心悦目、工工整整的感觉,同时字体的色彩变化也使主页变得更加生动活泼。虽然只短短的十几行代码,得到的效果却不同凡响。其基本用法是在网页中插入如下格式的一段代码:
  下面以一段比较典型的CSS代码为例介绍其具体用法。
  例:这段代码 中间的部分共七行,可看出有这样的特点:前两行的格式分别为P {……} 和 TD {……} 。后五行均是 A:命令词 {……} 的格式。其中前两行的作用是对网页文字的字体、大小、颜色等的控制,而后五行则是对链接的色彩及下划线的控制。
  1.文字控制
  例中的前两行:
  P {FONT-FAMILY: 宋体; FONT-SIZE: 9pt; LINE-HEIGHT: 12pt; color:#000000} TD {FONT-FAMILY: 宋体; FONT-SIZE: 9pt} 说明:FONT-FAMILY:宋体;(指定网页文字的字体) FONT-SIZE:9pt;(指定网页文字的字号大小,pt是表示大小的单位)LINE-HEIGHT:12pt;(指定行与行的垂直距离,即行高)color:#000000(指定网页文字的颜色,#000000 代表黑色,为十六进制数)TD {FONT-FAMILY:宋体;FONT-SIZE:9pt}(对网页表格里的文字进行控制)
  2.链接色彩变化及下划线的控制
  例中的后5行说明:
  A:hover {BACKGROUND-COLOR: #ffccff; COLOR: #0080ff}
  (hover表示鼠标指示时,链接文字背景色为#ffccff;前景色为#0080ff)
  A:link {color:#000000;TEXT-DECORATION: none}
  (link表示未被访问时,链接颜色为黑色,链接无下划线.)
  A:visited {color:gray;TEXT-DECORATION: none}
  (visited表示被访问后,链接颜色为灰色,链接无下划线.)
  A:active {color:green;text-decoration: none}
  (active表示鼠标点击时,链接颜色为绿色,链接无下划线.)
  A:hover {TEXT-DECORATION: underline}
  (hover表示鼠标指示时,链接显示下划线)
  注释:
  none——没有下划线
  underline——下划线
  overline——上划线
  line-through——中划线
  以上是比较典型的一段CSS代码,代码中的参数值可随意更换调试。有了CSS的预先设置,你会发现制作网页变得更轻松了。

有很多方法将样式表加入到HTML中,每个都带有自己的优点和缺点。新的HTML元素和属性已被加入以允许样式表与HTML文档更简易地组合起来。
连接到一个外部的样式表
嵌入一个样式表
输入一个样式表
内联样式
CLASS属性
ID属性
SPAN元素
DIV元素
关于认证的备注
--------------------------------------------------------------------------------
连接到一个外部的样式表
一个外部的样式表可以通过HTML的LINK元素连接到HTML文档中:
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print">
<LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print">
<LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>
<LINK>标记是放置在文档的HEAD部分。可选的TYPE属性用于指定媒体类型--text/css是一个层叠样式表--允许浏览器忽略它们不支持的样式表类型。为CSS文件配置服务器而将text/css当作Content-type内容发送出去也是一个好注意。
外部样式表不能含有任何像<HEAD>或<STYLE>这样的HTML的标记。样式表仅仅由样式规则或声明组成。一个单独由
P { margin: 2em }
组成的文件就可以用作外部样式表了。
<LINK>标记也有一个可选的MEDIA属性,用于指定样式表被接受的介质或媒体。允许的值有
screen (缺省值),提交到计算机屏幕;
print, 输出到打印机;
projection,提交到投影机;
aural,扬声器;
braille,提交到凸字触觉感知设备;
tty,电传打字机 (使用固定的字体);
tv,电视机;
all,所有输出设备。
多样的媒体通过用逗号隔开的列表或值all指定。
Netscape Navigator 4.x 错误地忽略除了screen值外的任何使用MEDIA值声明的连接或嵌入样式表。例如,MEDIA="screen,projection"会令到样式表被Navigator 4.x忽略,尽管展示的设备是计算机的屏幕。Navigator 4.x 也忽略使用MEDIA=all声明的样式表。
REL属性用于定义连接的文件和HTML文档之间的关系。REL=StyleSheet指定一个固定或首选的样式而REL="Alternate StyleSheet"定义一个交互样式。固定样式在样式表激活时总被应用。缺少的TITLE属性,就像例子中的第一个<LINK>标记,定义一个固定样式。
一个首选样式会自动被应用,就像例子中的第二个<LINK>标记。REL=StyleSheet和一个TITLE属性的组合指定一个首选的样式。网页制作者不能指定多于一个的首选样式。
交互样式通过REL="Alternate StyleSheet"指出。例子中的第三个<LINK>标记定义一个交互样式,用户可以选择用来代替首选样式表。
注意现在的浏览器一般都缺乏选择交互样式的能力。
单一的样式也可以通过多个样式表给出
<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">
在这个例子中,三个样式表组合成一个"Contemporary"样式,作为一个首选样式表被应用。要组合多个样式表成一个单一样式,必须在每个样式表中使用相同TITLE。
当样式被应用到很多的网页时,一个外部样式表是理想的。网页制作者使用外部样式表可以改变整个网站的外观而仅仅通过改变一个文件。同样的,大多数浏览器会保存外部样式表在缓冲区,从而如果样式表在缓冲区就避免了在展示网页时的延迟。
Microsoft Internet Explorer 3 for Windows 95/NT4并不支持来自连接的样式表中的BODY 背景图象或颜色。如果考虑到这个错误,网页制作者不妨提供另外的包括一个背景图象或颜色的结构,例如嵌入或内联样式,或使用BODY元素的BACKGROUND属性。
--------------------------------------------------------------------------------
嵌入一个样式表
一个样式表可以使用STYLE元素在文档中嵌入:
<STYLE TYPE="text/css" MEDIA=screen>
<!--
BODY { background: url(foo.gif) red; color: black }
P EM { background: yellow; color: black }
.note { margin-left: 5em; margin-right: 5em }
-->
</STYLE>
STYLE元素放在文档的HEAD部分。必须的TYPE属性用于指定媒体类型,LINK元素也一样。同样地,TITLE和MEDIA属性也可以用STYLE指定。
旧版本的浏览器,并不能识别STYLE元素,会将其当作BODY的一部分照常展示其内容,从而使这些样式表对用户是可见的。要防止这样做,STYLE元素的内容要包含一个SGML注解(<!-- comment -->)在里面,像上述例子那样。
嵌入的样式表可用于当一个文档具有独一无二的样式的时候。如果多个文档都使用同一样式表,那么外部样式表会更适用。
--------------------------------------------------------------------------------
输入一个样式表
一个样式表可以使用CSS的@import 声明被输入。这个声明用于一个CSS文件或内部的STYLE元素:
<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
@import urlhttp://www.htmlhelp.com/style.css);
@import url(/stylesheets/punk.css);
DT { background: yellow; color: black }
-->
</STYLE>
注意其它的CSS规则应该仍然包括在STYLE元素中,但所有的@import 声明必须放在样式表的开始部分。任意在样式表中指定了的规则,其自身超越在输入样式表中对立的规则。例如上例,即使一个输入的样式表包含DT { background: aqua },定义项(definition terms)依然会是黄色的背景。
被输入的样式表的顺序对于它们怎样层叠是很重要的。在上述的例子中,如果style.css输入的样式表指定了STRONG元素会显示为红色而punk.css样式表指定了STRONG元素显示为黄色的话,那么后面的规则会获胜,而STRONG元素会显示为黄色。
输入的样式表对于模块性效果很有用处。例如,一个网站可以通过使用了的选择符分类样式表。一个simple.css样式表给出公共的元素像BODY、P、H1和H2。此外,一个extra.css样式表给出较少共通的元素像CODE、BLOCKQUOTE和DFN。一个tables.css样式表可以用于定义变革元素的规则。这三个样式表在需要的时候可以使用@import 声明包括在HTML中。三个样式表也可以通过LINK元素组合。
--------------------------------------------------------------------------------
内联样式
样式可以使用STYLE属性内联。STYLE属性可以应用于任意BODY元素(包括BODY本身),除了BASEFONT、PARAM和SCRIPT。这个属性将任何数量的CSS声明当作自己的值,而每个声明用分号隔开。以下是一个例子:
<P STYLE="color: red; font-family: 'New Century Schoolbook', serif"> 这段的样式是红色的New Century Schoolbook字,如果字体可用的话。</P>
注意在STYLE中New Century Schoolbook包含在单引号中,因为双引号被用作包含样式声明。
内联的样式比其他方法更加灵活。要使用内联样式,必须使用Content-Style-Type HTTP页眉扩展对整个文档进行单独的样式表语言声明。使用内联CSS的网页制作者必须将text/css作为Content-Style-Type HTTP页眉,或在HEAD部分包括以下标记:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
因为和需要展示的内容混合在一起,内联样式会失去一些样式表的优点。同样地,内联样式默认地接受所有媒体,因为没有任何的为内联样式指定明确的媒体的语句。这种方法应该尽量少用,如当一个样式会应用在所有媒体到一个元素的个别情况。如果样式会被应用到单一元素的场合,但只能使用确认的媒体的话,使用ID属性代替STYLE属性。
--------------------------------------------------------------------------------
CLASS属性
CLASS属性用于指定元素属于何种样式的类。例如,样式表可以加入punk和warning类:
.punk { color: lime; background: P.warning { font-weight: bolder; color: red; background: white }
这些类可以使用CLASS属性在HTML中引用:
<H1 CLASS=punk>属性扩展</H1>
<P CLASS=warning>一些属性扩展会有负值的边效果,产生于支持和不支持的浏览器上...
在这个例子中,punk类可以用于任何BODY元素因为它在样式表中没有HTML元素关联。而在这个例子的样式表,warning类只能用于P元素。
一个良好的习惯是在命名类的时候,根据它们的功能而不是根据它们的外观。上述例子中的warning类也可以命名为red,但如果网页制作者决定改变这个类的样式为别的颜色,或希望为那些使用PC喇叭的人定义为aural(听觉)样式的话,那么这个名字就变得毫无意义了。
类会是应用样式到HTML文档中在结构上一样的部分的有效的办法。例如,本页使用类给CSS源代码和HTML源代码使用不同的样式。
--------------------------------------------------------------------------------
ID属性
ID属性用于定义一个元素的独特的样式。一个CSS规则如
可以通过ID属性应用到HTML中:
<P ID=wdg97>欢迎访问Web Design Group及TV water 168!</P>
整个文档当中的每个ID属性的值都必须是唯一的。其值必须是一个以字母开头紧接字母、识字或连字符。字母限于A-Z和a-z。
注意HTML 4.0允许在ID属性中有句号,但CSS1不允许在ID选择符中有句号。也要注意CSS1允许Unicode字符161-255而且忽略Unicode字符为一个数字代码,但HTML 4.0不允许这些字符在一个ID属性值当中。
当一个样式只需要在任何文档中应用一次时,使用ID是很适合的。 ID与STYLE属性相比,在于ID允许指定媒体的样式,而且也可以被应用于多个文档(虽然每个文档只用一次)。
--------------------------------------------------------------------------------
SPAN元素
SPAN元素被加入到HTML中以允许网页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用,而且它也能接受STYLE、CLASS和ID属性。
SPAN是一个内联元素,所以它可以作为HTML中的元素如EM和STRONG使用。最重要的差别在于虽然EM和STRONG带有结构的意义,但SPAN就没有这样的意义。它的存在纯粹是应用样式,所以当样式表失效时它就没有任何的作用。
一些SPAN例子如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>SPAN的例子</TITLE>
<STYLE TYPE="text/css" MEDIA="screen, print, projection">
<!--
.firstwords { font-variant: small-caps }
-->
</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS=firstwords>The first few words</SPAN>
前面是段落中少数的文字,会是小型大写字母。样式也可以内联,如改变文字的样式为
<SPAN STYLE="font-family: Arial">Arial</SPAN>.</P>
--------------------------------------------------------------------------------
DIV元素
DIV元素在功能上与SPAN元素相似,最主要的差别在于DIV ("division","部分"的简称)是一个块级元素。DIV可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类,如章节、摘要或备注。例如:
<DIV CLASS=note>
<H1>Divisions/部分</H1>
<P>DIV元素在HTML 3.2中有定义,但HTML 3.2中只有ALIGN属性能兼容。HTML 4.0在属性中加入CLASS、STYLE、和ID属性。</P>
<P>因为DIV可以包含其他块级集成,在用于建立文档的大型章节例如本备注是很有用的。</P>
<P>要求关闭标记。</P>
</DIV>
--------------------------------------------------------------------------------
关于认证的备注
少数使用了CSS样式的文档能在HTML3.2 (Wilbur)层(在WDG网站,译者注)得到认证。HTML3.2不会解释SPAN元素,也不解释CLASS、STYLE或ID属性,而且在LINK和STYLE元素中也很少支持TYPE和MEDIA属性。
这些有关的样式元素和属性对不支持的浏览器不会有害,因为它们能安全地忽略。文档使用这些元素和属性可以被认证防御于HTML 4.0。


回复

使用道具 举报

评论列表 ( 评论6 ) 显示全部 倒序浏览

  • 星期八

    楼主| 2011-11-12 21:54:09
    颜色
    语法: color: <颜色>
    初始值:由浏览器决定
    适用于:所有对象
    向下兼容:是
    颜色属性允许网页制作者指定一个元素的颜色。查看单位可以知道颜色值的描述. 一些颜色规则的例子包括:
    H1 { color: blue }
    H2 { color: H3 { color:
    为了避免与用户的样式表之间的冲突,背景和颜色属性应该始终一起指定。
    --------------------------------------------------------------------------------
    背景颜色
    语法: background-color: <值>
    允许值:<颜色> | transparent (透明)
    初始值:transparent (透明)
    适用于:所有对象
    向下兼容:否
    背景颜色属性设定一个元素的背景颜色。例如:
    BODY { background-color: white }
    H1 { background-color:
    为了避免与用户的样式表之间的冲突,无论任何背景颜色被使用的时候,背景图象都应该被指定。而大多数情况下,background-image: none都是合适的。
    --------------------------------------------------------------------------------
    背景图象
    语法: background-image: <值>
    允许值: <统一资源定位URLs> | none (无)
    初始值: none (无)
    适用于: 所有对象
    向下兼容: 否
    背景图象属性设定一个元素的背景图象。例如:
    BODY { background-image: url(/images/foo.gif) }
    P { background-image: urlhttp://www.htmlhelp.com/bg.png) }
    为了那些不载入图象的浏览者,当定义了背景图象后,应该也要定义一个类似的背景颜色。 网页制作者也可以使用略写的背景属性,通常会比背景图象属性获得更好的支持。
    --------------------------------------------------------------------------------
    背景重复
    语法: background-repeat: <值>
    允许值:repeat | repeat-x | repeat-y | no-repeat
    初始值:repeat
    适用于:所有对象
    向下兼容: 否
    背景重复属性决定一个指定的背景图象如何被重复。值为repeat-x时,图象横向重复,当值为repeat-y时图象纵向重复。例如:
    BODY { background: white url(candybar.gif); background-repeat: repeat-x }
    在以上例子中, 图象只会被横向平铺
    --------------------------------------------------------------------------------
    背景附件
    语法:background-attachment: <值>
    允许值: scroll | fixed
    初始值: scroll
    适用于: 所有对象
    向下兼容: 否
    背景附件属性决定指定的背景图象是跟随内容滚动,还是被看作油画固定不动。例如,以下指定一个固定的背景图象:
    BODY { background: white url(candybar.gif); background-attachment: fixed }
    --------------------------------------------------------------------------------
    背景位置
    语法: background-position: <值>
    允许值: [<百分比> | <长度>]{1,2} | [top | center | bottom] || [left | center | right]
    初始值: 0% 0%
    适用于: 块级及替换元素
    向下兼容: 否
    图象位置属性给出指定背景图象的最初位置。这个属性只能应用于块级元素和替换元素。(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT。)
    安排背景位置最容易的方法是使用关键字:
    横向的关键字 (left, center, right)
    纵向的关键字 (top, center, bottom)
    百分比和长度也可用作安排背景图象的位置。百分比和元素字体大小有关。虽然使用长度是允许的,但因为它们处理不同的显示分辨率有不可避免的缺点,所以不被推荐。
    当使用百分比或长度时,需首先指定横向位置,接着是纵向位置。一个值,例如20% 65%,指定图象的左起20%上起65%的那点会被放在元素的左起20%上起65%的那点的所在位置。一个值如5px 10px,指定图象的左上角会被放在元素的左起5像素上起10像素的位置。
    如果仅给出横向的值,纵向位置的值为50%。长度和百分比的组合是允许的,负值也行。例如,10% -2cm是允许的。虽然,百分比和长度是不能够和关键字组合。
    --------------------------------------------------------------------------------
    背景
    语法: background: <值>
    允许值: <背景颜色> || <背景图象> || <背景重复> || <背景附件> || <背景位置>
    初始值: 未定义
    适用于: 所有对象
    向下兼容: 否
    背景属性是一个更明确的背景—关系属性的略写。以下是一些背景的声明:
    BODY { background: white urlhttp://www.htmlhelp.com/foo.gif} }
    BLOCKQUOTE { background: P { background: url(../backgrounds/pawn.png) TABLE { background:
    当一个值未被指定时,将接受其初始值。例如,在上述的前三条规则,背景位置属性将被设置为0% 0%
    为了避免与用户的样式表之间的冲突,背景和颜色应该一起被指定。





    字体族科
    语法: font-family: [[<族科名称> | <种类族科>],]* [<族科名称> | <种类族科>]
    允许值:
      <族科名称>
        任意字体族科名称都可以使用
      <种类族科>
        serif (e.g., Times)
        sans-serif (e.g., Arial or Helvetica)
        cursive (e.g., Zapf-Chancery)
        fantasy (e.g., Western)
        monospace (e.g., Courier)
    初始值: 由浏览器决定
    适用于: 所有对象
    向下兼容: 是
    字体族科可以用一个指定的的字体名或一个种类的字体族科。很明显,定义一个指定的字体名不会比定义一个种类的字体族科合适。多个族科的赋值是可以使用的,而如果确定了一个指定的字体赋值,就应该有一个种类族科名随后,以防第一个选择不存在。
    字体族科声明的例子如下:
    P { font-family: "New Century Schoolbook", Times, serif }
    留意头两个赋值指定了字体的类型: New Century Schoolbook和Times。可是,因为它们两者都是serif字体,字体族科的种类作为后备列了出来,以防系统没有两者但有另一个serif合资格的字体。
    任何包含空格的字体名都必须用单引号或双引号引住。
    字体族科也可以用字体属性给出。
    --------------------------------------------------------------------------------
    字体风格
    语法: font-style: <值>
    允许值: normal | italic | oblique
    初始值: normal
    适用于: 所有对象
    向下兼容: 是
    字体风格属性以三个方法的其中一个来定义显示的字体: normal (普通),italic (斜体) 或oblique (倾斜)。样式表的字体风格声明例子如下:
    H1 { font-style: oblique }
    P { font-style: normal }
    --------------------------------------------------------------------------------
    字体变形
    语法: font-variant: <值>
    允许值: normal | small-caps
    初始值: normal
    适用于: 所有对象
    向下兼容: 是
    字体变形属性决定了字体的显示是normal (普通) 还是small-caps (小型大写字母)。当文字中所有字母都是大写的时候,小型大写字母(值)会显示比小写字母稍大的大写字符。稍后版本的CSS将会支持附加的变形,如收缩、扩张、小写数码或其它自定义的变形。字体变形的定义例子如下:
    SPAN { font-variant: small-caps }
    --------------------------------------------------------------------------------
    字体加粗
    语法: font-weight: <值>
    允许值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
    初始值: normal
    适用于: 所有对象
    向下兼容: 是
    字体加粗属性用作说明字体的加粗。当其它值绝对时,bolder和lighter值将相对地成比例增长。
    注意: 因为不是所有的字体都有九个有效的加粗显示,一些加粗的会在指定下组合。如果指定的加粗无效,会按以下原则选择:
    500 会被 400代替,反之亦是 100-300 会被指定为下一较细的加粗,如果有的话,否则就是下一较粗的加粗 600-900 会被指定为下一较粗的加粗,如果有的话,否则就是下一较细的加粗 一些字体加粗的定义例子如下:
    H1 { font-weight: 800 }
    P { font-weight: normal }
    --------------------------------------------------------------------------------
    字体大小
    语法: font-size: <绝对大小> | <相对大小> | <长度> | <百分比>
    允许值:
     <绝对大小> xx-small | x-small | small | medium | large | x-large | xx-large
     <相对大小> larger | smaller
     <长度>
     <百分比> (in relation to parent element)
    初始值: medium
    适用于: 所有对象
    向下兼容: 是
    字体大小属性用作修改字体显示的大小。绝对长度(使用的单位为pt-像素和in-英寸) 需要谨慎地考虑到其适应不同浏览环境时的弱点。对于一个用户来说,绝对长度的字体很有可能会很大,或很小。
    一些大小指定的定义如下:
    H1 { font-size: large }
    P { font-size: 12pt }
    LI { font-size: 90% }
    STRONG { font-size: larger }
    网页制作者需要清楚Microsoft Internet Explorer 3.x 会错误地将em 和ex单位当作像素,这很可能会令到使用了这些单位的文本不可读。浏览器还会错误地将百分比值视为相对于选中部分的缺省字体大小,而不是上级元素的字体大小。这种做法像
    H1 { font-size: 200% }
    这是危险的,其大小将被视为IE的一级标题的缺省字体大小的两倍,而不是两倍于上级元素的字体大小。在这种情况中,BODY 通常会被视为上级元素,而且很可能定义一个medium的字体大小,然而,在IE中一级标题的缺省字体大小可能被认为是xx-large。
    注意到了这些错误后,网页制作者在使用字体大小属性时,应该小心使用百分比的值,而且应该尽量避免使用em和ex这两个单位。
    --------------------------------------------------------------------------------
    字体
    语法: font: <值>
    允许值: [ <字体风格> || <字体变形> || <字体加粗> ]? <字体大小> [ / <行高> ]? <字体族科>
    初始值: 未定义
    适用于: 所有对象
    向下兼容: 是
    字体属性用作不同字体属性的略写,特别是行高。例如,
    P { font: italic bold 12pt/14pt Times, serif } 指定该段为bold(粗体)和italic(斜体)Times或serif字体,12点大小,行高为14点。





    语法: line-height: <值>
    -允许值: normal | <数字> | <长度> | <百分比>
    -初始值: normal
    -适用于: 所有元素
    -向下兼容: 是
    行高属性可以接受一个控制文本基线之间的间隔的值。当值为数字时,行高由元素字体大小的量与该数字相乘所得。百分比的值相对于元素字体的大小而定。不允许使用负值。
    行高也可以由带有字体大小的字体属性产生。
    行高属性可以用于双行距的文本:
    P { line-height: 200% }
    Microsoft Internet Explorer 3.x 会错误地将em和ex单位当作像素。这错误很可能会令到文本不可读,所以网页制作者需要避免引起这个随处可能发生的错误; 使用百分比单位往往是一个好的选择





    文字间隔
    语法: word-spacing: <值>
    允许值: normal | <长度>
    初始值: normal
    适用于: 所有元素
    向下兼容: 是
    文字间隔属性定义一个附加在文字之间的间隔数量。该值必须符合长度格式,允许使用负值。
    例如:
    P EM { word-spacing: 0.4em }
    P.note { word-spacing: -0.2em }
    --------------------------------------------------------------------------------
    字母间隔
    语法: letter-spacing: <值>
    允许值: normal | <长度>
    初始值: normal
    适用于: 所有元素
    向下兼容: 是
    字母间隔属性定义一个附加在字符之间的间隔数量。该值必须符合长度格式,允许使用负值。一个设为零的值会阻止文字的调整。
    例如:
    H1 { letter-spacing: 0.1em }
    P.note { letter-spacing: -0.1em }
    --------------------------------------------------------------------------------
    文本修饰
    语法: text-decoration: <值>
    允许值: none | [ underline || overline || line-through || blink ]
    初始值: none
    适用于: 所有元素
    向下兼容: 否
    文本修饰属性允许通过五个属性中的一个来修饰文本: underline (下划线),overline (上划线),line-through (删除线),blink (闪烁),或缺省地使用无。
    例如: 使用下列语句可以使连接不再有下划线:
    A:link,A:visited,A:active { text-decoration: none }
    --------------------------------------------------------------------------------
    纵向排列
    语法: vertical-align: <值>
    允许值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比>
    初始值: baseline
    适用于: 内部元素
    向下兼容: 否
    纵向排列属性可以用作一个内部元素的纵向位置,相对于它的上级元素或相对于元素行。(一个内部元素是没有行在其前和后断开的,例如,在HTML中的EM,A,和IMG)
    该值可以是一个相对于元素行高属性的百分比,它会在上级基线上增高元素基线的指定数量。允许使用负值。
    该值也可以是一个关键字。以下的关键字将影响相对于上级元素的位置
    baseline (使元素和上级元素的基线对齐)
    middle (纵向对齐元素基线加上上级元素的x-高度——字母" x "的高度——的一半的中点)
    sub (下标)
    super (上标)
    text-top (使元素和上级元素的字体向上对齐)
    text-bottom (使元素和上级元素的字体向下对齐)
    影响相对于元素行的位置的关键字有
    top (使元素和行中最高的元素向上对齐)
    bottom (使元素和行中最低的元素向下对齐)
    纵向排列属性对于排列图象特别有用。以下是一些例子:
    IMG.middle { vertical-align: middle }
    IMG { vertical-align: 50% }
    .exponent { vertical-align: super }
    --------------------------------------------------------------------------------
    文本转换
    语法: text-transform: <值>
    允许值: none | capitalize | uppercase | lowercase
    初始值: none
    适用于: 所有元素
    向下兼容: 是
    文本转换属性允许通过四个属性中的一个来转换文本:
    capitalize (使每个字的第一个字母大写)
    uppercase (使每个字的所有字母大写)
    lowercase (使每个字的所有字母小写)
    none (使用原始值)
    例如:
    H1 { text-transform: uppercase }
    H2 { text-transform: capitalize }
    文本转换属性仅仅被用于表达某种格式的要求。这并非很适当的做法,例如,用文本转换使一些国家的名字的第一个字母大写,而其它字母小写。

    回复 支持 反对 使用道具 举报
  • 星期八

    楼主| 2011-11-12 21:54:59
    文本排列
    语法: text-align: <值>
    允许值: left | right | center | justify
    初始值: 由浏览器决定
    适用于: 块级元素
    向下兼容: 是
    文本排列属性可以应用于块级元素(P,H1,等),使元素文本得到排列。这个属性的功能类似于HTML的段、标题和部分的ALIGN属性。
    以下是一些例子:
    H1 { text-align: center }
    P.newspaper { text-align: justify }
    --------------------------------------------------------------------------------
    文本缩进
    语法: text-indent: <值>
    允许值: <长度> | <百分比>
    初始值: 0
    适用于: 块级元素
    向下兼容: 是
    文本缩进属性可以应用于块级元素(P,H1,等.),以定义该元素第一行可以接受的缩进的数量。该值必须是一个长度或一个百分比。若百分比则视上级元素的宽度而定。通用的文本缩进用法是用于段的缩进:
    P { text-indent: 5em }
    文字间隔
    语法: word-spacing: <值>
    允许值: normal | <长度>
    初始值: normal
    适用于: 所有元素
    向下兼容: 是
    文字间隔属性定义一个附加在文字之间的间隔数量。该值必须符合长度格式,允许使用负值。
    例如:
    P EM { word-spacing: 0.4em }
    P.note { word-spacing: -0.2em }
    --------------------------------------------------------------------------------
    字母间隔
    语法: letter-spacing: <值>
    允许值: normal | <长度>
    初始值: normal
    适用于: 所有元素
    向下兼容: 是
    字母间隔属性定义一个附加在字符之间的间隔数量。该值必须符合长度格式,允许使用负值。一个设为零的值会阻止文字的调整。
    例如:
    H1 { letter-spacing: 0.1em }
    P.note { letter-spacing: -0.1em }
    --------------------------------------------------------------------------------
    文本修饰
    语法: text-decoration: <值>
    允许值: none | [ underline || overline || line-through || blink ]
    初始值: none
    适用于: 所有元素
    向下兼容: 否
    文本修饰属性允许通过五个属性中的一个来修饰文本: underline (下划线),overline (上划线),line-through (删除线),blink (闪烁),或缺省地使用无。
    例如: 使用下列语句可以使连接不再有下划线:
    A:link,A:visited,A:active { text-decoration: none }
    --------------------------------------------------------------------------------
    纵向排列
    语法: vertical-align: <值>
    允许值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比>
    初始值: baseline
    适用于: 内部元素
    向下兼容: 否
    纵向排列属性可以用作一个内部元素的纵向位置,相对于它的上级元素或相对于元素行。(一个内部元素是没有行在其前和后断开的,例如,在HTML中的EM,A,和IMG)
    该值可以是一个相对于元素行高属性的百分比,它会在上级基线上增高元素基线的指定数量。允许使用负值。
    该值也可以是一个关键字。以下的关键字将影响相对于上级元素的位置
    baseline (使元素和上级元素的基线对齐)
    middle (纵向对齐元素基线加上上级元素的x-高度——字母" x "的高度——的一半的中点)
    sub (下标)
    super (上标)
    text-top (使元素和上级元素的字体向上对齐)
    text-bottom (使元素和上级元素的字体向下对齐)
    影响相对于元素行的位置的关键字有
    top (使元素和行中最高的元素向上对齐)
    bottom (使元素和行中最低的元素向下对齐)
    纵向排列属性对于排列图象特别有用。以下是一些例子:
    IMG.middle { vertical-align: middle }
    IMG { vertical-align: 50% }
    .exponent { vertical-align: super }
    --------------------------------------------------------------------------------
    文本转换
    语法: text-transform: <值>
    允许值: none | capitalize | uppercase | lowercase
    初始值: none
    适用于: 所有元素
    向下兼容: 是
    文本转换属性允许通过四个属性中的一个来转换文本:
    capitalize (使每个字的第一个字母大写)
    uppercase (使每个字的所有字母大写)
    lowercase (使每个字的所有字母小写)
    none (使用原始值)
    例如:
    H1 { text-transform: uppercase }
    H2 { text-transform: capitalize }
    文本转换属性仅仅被用于表达某种格式的要求。这并非很适当的做法,例如,用文本转换使一些国家的名字的第一个字母大写,而其它字母小写。
    --------------------------------------------------------------------------------
    文本排列
    语法: text-align: <值>
    允许值: left | right | center | justify
    初始值: 由浏览器决定
    适用于: 块级元素
    向下兼容: 是
    文本排列属性可以应用于块级元素(P,H1,等),使元素文本得到排列。这个属性的功能类似于HTML的段、标题和部分的ALIGN属性。
    以下是一些例子:
    H1 { text-align: center }
    P.newspaper { text-align: justify }
    --------------------------------------------------------------------------------
    文本缩进
    语法: text-indent: <值>
    允许值: <长度> | <百分比>
    初始值: 0
    适用于: 块级元素
    向下兼容: 是
    文本缩进属性可以应用于块级元素(P,H1,等.),以定义该元素第一行可以接受的缩进的数量。该值必须是一个长度或一个百分比。若百分比则视上级元素的宽度而定。通用的文本缩进用法是用于段的缩进:
    P { text-indent: 5em }
    初始值: 0 适用于: 块级元素
    向下兼容:
    文本缩进属性可以应用于块级元素(P,H1,等.),以定义该元素第一行可以接受的缩进的数量。该值必须是一个长度或一个百分比。若百分比则视上级元素的宽度而定。通用的文本缩进用法是用于段的缩进:
    P { text-indent: 5em }

    显示
    语法: display: <值>
    允许值: block | inline | list-item | none
    初始值: block
    适用于: 所有对象
    向下兼容: 否
    显示属性允许使用四个值中的一个来定义一个元素:
    block (在元素的前和后都会有换行)
    inline (在元素的前和后都不会有换行)
    list-item (与block相同, 但增加了目录项标记)
    none (没有显示)
    每个元素都典型地由浏览器基于HTML规格建议的展示形式给出一个缺省的显示值。
    显示属性可能并不安全,因为它使用另外的不合适的格式显示元素。使用值none将关闭指定元素及其子元素的显示!
    --------------------------------------------------------------------------------
    空白
    语法: white-space: <值>
    允许值: normal | pre | nowrap
    初始值: normal
    适用于: 块级元素
    向下兼容: 是
    空白属性将决定如何处理元素内的空格. 该属性的值取以下三个中的一个:
    normal (将多个空格折叠成一个)
    pre (不折叠空格)
    nowrap (不允许换行,除非遇到<BR>标记)
    --------------------------------------------------------------------------------
    目录样式类型
    语法: list-style-type: <值>
    允许值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
    初始值: disc
    适用于: 带有显示值的目录项元素
    向下兼容: 是
    目录样式项属性指定目录项标记的类型,当目录样式图象值为none或当图象载入选项被关闭时使用。
    例如:
    LI.square { list-style-type: square }
    UL.plain { list-style-type: none }
    OL { list-style-type: upper-alpha } /* A B C D E etc. */
    OL OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */
    OL OL OL { list-style-type: lower-roman } /* i ii iii iv v etc. */
    --------------------------------------------------------------------------------
    目录样式图像
    语法: list-style-image: <值>
    允许值: <url> | none
    初始值: none
    适用于: 带有显示值的目录项元素
    向下兼容: 是
    当图象载入选项打开时,目录样式图象属性在指定目录项标记使用哪个图象代替由目录样式类型属性指定的标记。
    例如:
    UL.check { list-style-image: url(/LI-markers/checkmark.gif) }
    UL LI.x { list-style-image: url(x.png) }
    --------------------------------------------------------------------------------
    目录样式位置
    语法: list-style-position: <值>
    允许值: inside | outside
    初始值: outside
    适用于: 带有显示值的目录项元素
    向下兼容: 是
    目录样式位置属性可以取值inside(内部) or outside(外部),其中outside是缺省值。整个属性决定关于目录项的标记应放在那里。如果使用inside值,换行会移到标记下,而不是缩进。应用的例子如下:
    Outside rendering:
    * List item 1
    second line of list item
    Inside rendering:
    * List item 1
    second line of list item

    回复 支持 反对 使用道具 举报
  • 星期八

    楼主| 2011-11-12 21:55:43
    目录样式
    语法: list-style: <值>
    允许值: <目录样式类型> || <目录样式位置> || <url>
    初始值: 未定义
    适用于: 带有显示值的目录项元素
    向下兼容: 是
    目录样式属性是目录样式类型、目录样式位置,和目录样式图象属性的略写。
    例如:
    LI.square { list-style: square inside }
    UL.plain { list-style: none }
    UL.check { list-style: url(/LI-markers/checkmark.gif) circle }
    OL { list-style: upper-alpha }
    OL OL { list-style: lower-roman inside }





    上边界
    语法: margin-top: <值>
    允许值: <长度> | <百分比> | auto
    初始值: 0
    适用于: 所有元素
    向下兼容: 否
    上边界属性用一个指定的长度或百分比值来设置元素的上边界。百分比值参考上级元素的宽度。允许使用负值边际。 例如,以下的规则将消除文件的上边界。
    BODY { margin-top: 0 }
    注意如果边界在垂直方向邻接(重叠)了,会改用其中最大的那个边界值。
    --------------------------------------------------------------------------------
    右边界
    语法: margin-right: <值>
    允许值: <长度> | <百分比> | auto
    初始值: 0
    适用于: 所有元素
    向下兼容: 否
    右边界属性用一个指定的长度或百分比值来设置元素的右边界。百分比值参考上级元素的宽度。允许使用负值边际。 例如:
    P.narrow { margin-right: 50% }
    注意如果边界在水平方向邻接(重叠)了,不会改用其它边界值
    --------------------------------------------------------------------------------
    下边界
    语法: margin-bottom: <值>
    允许值: <长度> | <百分比> | auto
    初始值: 0
    适用于: 所有元素
    向下兼容: 否
    下边界属性用一个指定的长度或百分比值来设置元素的下边界。百分比值参考上级元素的宽度。允许使用负值边际。 例如:
    DT { margin-bottom: 3em }
    注意如果边界在垂直方向邻接(重叠)了,会改用其中最大的那个边界值。
    --------------------------------------------------------------------------------
    左边界
    语法: margin-left: <值>
    允许值: <长度> | <百分比> | auto
    初始值: 0
    适用于: 所有元素
    向下兼容: 否
    左边界属性用一个指定的长度或百分比值来设置元素的左边界。百分比值参考上级元素的宽度。允许使用负值边际。 例如:
    ADDRESS { margin-left: 50% }
    注意如果边界在水平方向邻接(重叠)了,不会改用其它边界值。
    --------------------------------------------------------------------------------
    边界
    语法: margin: <值>
    允许值: [ <长度> | <百分比> | auto ]{1,4}
    初始值: 未定义
    适用于: 所有元素
    向下兼容: 否
    边界属性用一到四个值来设置元素的边界,每个值都是长度、百分比或者自动。百分比值参考上级元素的宽度。允许使用负值边际。
    如果四个值都给出了,它们分别被应用于上、右、下和左边界。如果只给出一个值,它被应用于所有边界。如果两个或三个值给出了,省略了的值与对边相等。
    例子:
    BODY { margin: 5em } /* 所有边界设为5em */
    P { margin: 2em 4em } /* 上和下边界为2em,左和右边界为4em */
    DIV { margin: 1em 2em 3em 4em } /* 上边界为1em,右边界为2em,下边界为3em,左边界为4em */
    注意如果边界在垂直方向邻接(重叠)了,会改用其中最大的那个边界值。而水平方向则不会。 使用边界属性可以一次性地设置所有边界;也可以选择使用上边界、下边界、左边界和右边界属性。
    --------------------------------------------------------------------------------
    上补白
    语法: padding-top: <值>
    允许值: <长度> | <百分比>
    初始值: 0
    适用于: 所有对象
    向下兼容: 否
    上补白属性描述上边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。
    --------------------------------------------------------------------------------
    右补白
    语法: padding-right: <值>
    允许值: <长度> | <百分比>
    初始值: 0
    适用于: 所有对象
    向下兼容: 否
    右补白属性描述右边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。
    --------------------------------------------------------------------------------
    下补白
    语法: padding-bottom: <值>
    允许值: <长度> | <百分比>
    初始值: 0
    适用于: 所有对象
    向下兼容: 否
    下补白属性描述下边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。
    --------------------------------------------------------------------------------
    左补白
    语法: padding-left: <值>
    允许值: <长度> | <百分比>
    初始值: 0
    适用于: 所有对象
    向下兼容: 否
    左补白属性描述左边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。
    --------------------------------------------------------------------------------
    补白
    语法: padding: <值>
    允许值: [ <长度> | <百分比 ]{1,4}
    初始值: 0
    适用于: 所有对象
    向下兼容: 否
    补白属性是上补白、右补白、下补白和左补白属性的略写。
    一个元素的补白是边框和元素的内容之间的间隔的数值。可以给出从一到四的值,每个值可以是长度或百分比。百分比值参考上级元素的宽度。不能使用负值。 如果四个值都给出了,它们分别应用于上、右、下和左补白。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等。
    例如,以下的规则设置上补白为2em,右补白为4em,下补白为5em,左补白为4em:
    BLOCKQUOTE { padding: 2em 4em 5em }
    --------------------------------------------------------------------------------
    上边框宽度
    语法: border-top-width: <值>
    允许值: thin | medium | thick | <长度>
    初始值: medium
    适用于: 所有对象
    向下兼容: 否
    上边框宽度属性用于指定一个元素上边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或长度的影响,可以用于实现成比例的宽度。不允许使用负值。
    也可以用在上边框、边框的宽度或边框的属性略写。
    --------------------------------------------------------------------------------
    右边框宽度
    语法: border-right-width: <值>
    允许值: thin | medium | thick | <长度>
    初始值: medium
    适用于: 所有对象
    向下兼容: 否
    右边框宽度属性用于指定元素的右边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或长度的影响,可以用于实现成比例的宽度。不允许使用负值。
    也可以用在右边框、边框的宽度或边框的属性略写。
    --------------------------------------------------------------------------------
    下边框宽度
    语法: border-bottom-width: <值>
    允许值: thin | medium | thick | <长度>
    初始值: medium
    适用于: 所有对象
    向下兼容: 否
    下边框宽度属性用于指定元素的下边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或长度的影响,可以用于实现成比例的宽度。不允许使用负值。
    也可以用在下边框、边框的宽度或边框的属性略写。
    --------------------------------------------------------------------------------
    左边框宽度
    语法: border-left-width: <值>
    允许值: thin | medium | thick | <长度>
    初始值: medium
    适用于: 所有对象
    向下兼容: 否
    左边框宽度属性用于指定元素的左边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或长度的影响,可以用于实现成比例的宽度。不允许使用负值。
    也可以用在左边框、边框的宽度或边框的属性略写。
    --------------------------------------------------------------------------------
    边框宽度
    语法: border-width: <值>
    允许值: [ thin | medium | thick | <长度> ]{1,4}
    初始值: 未定义
    适用于: 所有对象
    向下兼容: 否
    边框宽度属性用一到四个值来设置元素的边界,值是一个关键字或长度。不允许使用负值长度。 如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等。
    这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。
    也可以使用略写的边框属性。
    --------------------------------------------------------------------------------
    边框颜色
    语法: border-color: <值>
    允许值: <颜色>{1,4}
    初始值: 颜色属性的值
    适用于: 所有对象
    向下兼容: 否
    边框颜色属性设置一个元素的边框颜色。可以使用一到四个关键字。如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等。
    也可以使用略写的边框属性。

    回复 支持 反对 使用道具 举报
  • 星期八

    楼主| 2011-11-12 21:56:29
    边框样式
    语法: border-style: <值>
    允许值: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
    初始值: none
    适用于: 所有对象
    向下兼容: 否
    边框样式属性用于设置一个元素边框的样式。这个属性必须用于指定可见的边框。
    可以使用一到四个关键字。如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。
    如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等。
    也可以使用略写的边框属性。
    --------------------------------------------------------------------------------
    上边框
    语法: border-top: <值>
    允许值: <上边框宽度> || <边框式样> || <颜色>
    初始值: 未定义
    适用于: 所有对象
    向下兼容: 否
    上边框属性是一个用于设置一个元素上边框的宽度、式样和颜色的略写。
    注意只能给出一个边框式样。
    也可以使用略写的边框属性。
    --------------------------------------------------------------------------------
    右边框
    语法: border-right: <值>
    允许值: <右边框宽度> || <边框式样> || <颜色>
    初始值: 未定义
    适用于: 所有对象
    向下兼容: 否
    右边框属性是一个用于设置一个元素右边框的宽度、式样、和颜色的略写。
    注意只能给出一个边框式样。
    也可以使用略写的边框属性。
    --------------------------------------------------------------------------------
    下边框
    语法: border-bottom: <值>
    允许值: <下边框宽度> || <边框式样> || <颜色>
    初始值: 未定义
    适用于: 所有对象
    向下兼容: 否
    下边框属性是一个用于设置一个元素的下边框的宽度、式样和颜色的略写。
    注意只能给出一个边框式样。
    也可以使用略写的边框属性。
    --------------------------------------------------------------------------------
    左边框
    语法: border-left: <值>
    允许值: <左边框宽度> || <边框式样> || <颜色>
    初始值: 未定义
    适用于: 所有对象
    向下兼容: 否
    左边框属性是一个用于设置一个元素左边框的宽度、式样和颜色的略写。
    注意只能给出一个边框式样。
    也可以使用略写的边框属性。
    --------------------------------------------------------------------------------
    边框
    语法: border: <值>
    允许值: <边框宽度> || <r边框式样> || <颜色>
    初始值: 未定义
    适用于: 所有对象
    向下兼容: 否
    边框属性是一个用于设置一个元素边框的宽度、式样和颜色的略写。
    边框声明的例子包括:
    H2 { border: groove 3em }
    A:link { border: solid blue }
    A:visited { border: thin dotted A:active { border: thick double red }
    边框属性只能设置四种边框;只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值,网页制作者必须用一个或更多的属性,如:上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。
    --------------------------------------------------------------------------------
    宽度
    语法: width: <值>
    允许值: <长度> | <百分比> | auto
    初始值: auto
    适用于: 块级和替换元素
    向下兼容: 否
    每个块级或替换元素都可以用一个长度或“auto”值来指定其宽度。(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT.) 宽度属性的初始值为“auto”,即为该元素的原有宽度(有就是元素自己的宽度,例如一个图象的宽度)。百分比参考上级元素的宽度。不允许使用负的长度值。
    这个属性能用作给出一些INPUT元素的公共长度,好象SUBMIT和RESET按钮:
    INPUT.button { width: 10em }
    --------------------------------------------------------------------------------
    高度
    语法: height: <值>
    允许值: <长度> | auto
    初始值: auto
    适用于: 块级和替换元素
    向下兼容: 否
    每个块级或替换元素都可以用一个长度或“auto”值来指定其高度。(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT.) 高度属性的初始值为“auto”,即为该元素的原有高度(有就是元素自己的高度,例如一个图象的高度)。不允许使用负的长度值。
    与宽度属性一样,高度可以应用于设定图象的比例:
    IMG.foo { width: 40px; height: 40px }
    在大多数情况下,我们都建议网页制作者使用图象编辑软件按比例伸缩图象,因为浏览器不可能高质量地伸缩图象,也因为使用这个属性缩小图象会导致用户下载了一个不必要的庞大文件。虽然如此,通过宽度和高度属性伸缩图象依然是用户—定义样式表中一个有用的用作克服视觉问题的选择。
    --------------------------------------------------------------------------------
    飘浮
    语法: float: <值>
    允许值: left | right | none
    初始值: none
    适用于: 所有元素
    向下兼容: 否
    漂浮属性允许网页制作者将文本环绕在一个元素的周围. 这同HTML 3.2中IMG元素的ALIGN=left和ALIGN=right一样,但CSS1允许所有对象“漂浮”,而不像HTML 3.2那样仅仅允许图象和表格。
    --------------------------------------------------------------------------------
    清除
    语法: clear: <值>
    允许值: none | left | right | both
    初始值: none
    适用于: 所有元素
    向下兼容: 否
    清除属性指定一个元素是否允许有元素漂浮在它的旁边。值left移动元素到在其左边的漂浮的元素的下面;同样的值right移动到其右边的漂浮的元素下面。其他的还有缺省的none值,和移动元素到其两边的漂浮的元素的下面的none值。这个属性类似于HTML 3.2的函数<BR CLEAR=left|right|all|none>,但它能应用于所有元素。





    基本语法
    规则选择符 --
    任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如:
    P { text-indent: 3em } 当中的选择符是P。
    类选择符 --
    单一个选择符能有不同的CLASS(类),因而允许同一元素有不同样式。例如,一个网页制作者也许希望视其语言而定,用不同的颜色显示代码 :
    code.html { color: code.css { color:
    以上的例子建立了两个类,css和html,供HTML的CODE元素使用。CLASS属性是用于在HTML中以指明元素的类,例如:<P CLASS=warning>
    每个选择符只允许有一个类。 例如,code.html.proprietary是无效的。类的声明也可以无须相关的元素:
    .note { font-size: small } 在这个例子,名为note的类可以被用于任何元素。
    一个良好的习惯是在命名类的时候,根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small,但如果网页制作者决定改变这个类的样式,使得它不再是小字体的话,那么这个名字就变得毫无意义了。
    ID 选择符 --
    ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用,因为他具有一定的局限。一个ID选择符的指定要有指示符"
    <P ID=svp94O>文本缩进3em</P>
    关联选择符
    关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性,而且因为层叠顺序的规则,它们的优先权比单一的选择符大。
    例如, 以下的上下文选择符
    P EM { background: yellow }
    是P EM。这个值表示段落中的强调文本会是黄色背景;而标题的强调文本则不受影响。
    声明属性
    一个属性被指定到选择符是为了使用它的样式。属性的例子包括颜色、边界和字体。

    声明的值是一个属性接受的指定。例如,属性颜色能接受值red。
    组合
    为了减少样式表的重复声明,组合的选择符声明是允许的。例如,文档中所有的标题可以通过组合给出相同的声明:
    H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif }
    继承
    实际上,所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值,除非另外更改。例如,一个BODY定义了的颜色值也会应用到段落的文本中。
    有些情况是内部选择符不继承周围的选择符的值,但理论上这些都是特殊的。例如,上边界属性是不会继承的;直觉上,一个段落不会有同文档BODY一样的上边界值。
    注解
    样式表里面的注解使用C语言编程中一样的约定方法去指定。CSS1注解的例子如以下格式:
    /* COMMENTS CANNOT BE NESTED */
    伪类和伪元素
    伪类和伪元素是特殊的类和元素,能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如,visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分,例如段落的第一个字母。
    伪类或伪元素规则的形式如
    选择符:伪类 { 属性: 值 } 或 选择符:伪元素 { 属性: 值 }
    伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用,如下:
    选择符.类: 伪类 { 属性: 值 } 或 选择符.类: 伪元素 { 属性: 值 }
    定位锚伪类
    伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示,甚至不同字体大小和风格。
    一个有趣的效果是使当前(或“可激活”)连接以不同颜色、更大的字体显示。然后,当网页的已访问连接被重选时,又以不同颜色、更小字体显示。这个样式表的示例如下:
    A:link { color: red }
    A:active { color: blue; font-size: 125% }
    A:visited { color: green; font-size: 85% }
    首行伪元素
    通常在报纸上的文章,例如Wall Street Journal中的,文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能,将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:
    P:first-line { font-variant: small-caps; font-weight: bold }
    首个字母伪元素
    首个字母伪元素用于加大(drop caps)和其他效果。含有已指定值选择符的文本的首个字母会按照指定的值展示。一个首个字母伪元素可以用于任何块级元素。例如:
    P:first-letter { font-size: 300%; float: left }
    层叠顺序
    当使用了多个样式表,样式表需要争夺特定选择符的控制权。在这些情况下,总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。
    ! important
    规则可以用指定的! important 特指为重要的。一个特指为重要的样式会凌驾于与之对立的其它相同权重的样式。同样地,当网页制作者和读者都指定了重要规则时,网页制作者的规则会超越读者的。以下是! important 声明的例子:
    BODY { background: url(bar.gif) white;
    background-repeat: repeat-x ! important }
    Origin of Rules (Author's vs. Reader's)
    正如以前所提及的,网页制作者和读者都有能力去指定样式表。当两者的规则发生冲突,网页制作者的规则会凌驾于读者的其它相同权重的规则。而网页制作者和读者的样式表都超越浏览器的内置样式表。
    网页制作者应该小心地使用! important 规则,因为它们会超越用户任何的! important 规则。例如,一个用户由于视觉关系,会要求大字体或指定的颜色,而且这样的用户会有可能声明确定的样式规则为! important,因为这些样式对于用户阅读网页是极为重要的。任何的! important 规则会超越一般的规则,所以建议网页制作者使用一般的规则以确保有特殊样式需要的用户能阅读网页。
    选择符规则: 计算特性
    基于它们的特性级别,样式表也可以超越与之冲突的样式表,一个较高特性的样式永远都凌驾于一个较低特性的样式。这只不过是计算选择符的指定个数的一个统计游戏。
    统计选择符中的ID属性个数。
    统计选择符中的CLASS属性个数。
    统计选择符中的HTML标记名格式。
    最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数。( 注意,你需要将数字转换成一个以三个数字结尾的更大的数。)相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。以下是一个按特性分类的选择符的列表:
    UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特性 = 013 */
    LI.red {xxx} /* a=0 b=1 c=1 --> 特性 = 011 */
    LI {xxx} /* a=0 b=0 c=1 --> 特性 = 001 */
    特性的顺序
    为了方便使用,当两个规则具同样权重时,取后面的那个
    回复 支持 反对 使用道具 举报
  • 星期八

    楼主| 2011-11-12 21:57:24
    我把我在使用CSS中的一些小经验以及一些网友来信提问的问题整理出来,供诸位参考。
    1、CSS在网页制作中一般有三种方式的用法,那么具体在使用时该采用哪种用法?
      当有多个网页要用到的CSS,采用外连CSS文件的方式,这样网页的代码大大减少,修改起来非常方便;只在单个网页中使用的CSS,采用文档头部方式;只有在一个网页一、两个地方才用到的CSS,采用行内插入方式。
    2、CSS的三种用法在一个网页中要以混用吗?
      三种用法可以混用,且不会造成混乱。这就是它为什么称之为“层叠样式表”的原因,浏览器在显示网页时是这样处理的:先检查有没有行内插入式CSS,有就执行了,针对本句的其它CSS就不去管它了;其次检查头部方式的CSS,有就执行了;在前两者都没有的情况下再检查外连文件方式的CSS。因此可看出,三种CSS的执行优先级是:行内插入式、头部方式、外连文件方式。
    3、在Dreamweaver3中如何使外部文件式CSS?
      在Dreamweaver3中使用外连文件式CSS并没有特殊要求,同样是用记事本创建一个*.css文件,在网页的〈head〉与〈/head〉之间加上一句这样的代码:〈link rel="stylesheet" href="在这里填上你的CSS文件地址(相对路径+文件名)" type="text/css"〉 就行了。
    4、如何用Dreamweaver3快速创建CSS外连式文件?
      对于一个初接触CSS的网页设计人员来讲,要用记事之类的编辑器,去创建一个CSS外连式文件是相当困难的。由于Dreamweaver3对CSS支持的很好,用它来帮助就轻松多了。具体可以这样操作:
      1)先在纸上写好在网站的网页中可能要用到的格名称,然后在Dreamweaver3的编辑窗中调出CSS面板,一个一个地定义,并在一个空白页上适当地写一点相关内容,边定义边试用,效果不满意,立即修改;
      2)全部定义好后,再用记事本创建一个空的CSS外连式文件,把在〈head〉与〈/head〉之间的那段定义好的CSS复制到CSS文件中去,就大功告成了。整个过程就是点鼠标,方便吧?
    5、在Dreamweaver3中采用行内插入式CSS要手动写代码吗?
      不用!先用CSS面板定义好要用的CSS,然后,在要插入CSS的标记插入:style="",再把你刚才定义的CSS从〈head〉后面拖到这个双引号中来,把花括号以外的部分删去就行了。
    6、在方档头部方式和外连文件方式的CSS中都有“〈!--”和“--〉”,好象没什么用,不要可以吗?
      这一对东东的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持CSS,它将忽略其中的内容。虽然现在使用不支持CSS浏览器的人已很少了,由于互联网上几乎什么可能都会发生,所以还是留着为妙。
    7、如何给一部分文字加背景色?
      给文字加上不同颜色,在DW3中只要在属性面板上选取文字的颜色就行了,非常方便,但要给部分文字加不同的背景色却没有相应的功能,我们可以先做一个定义背景色的CSS(如:bgstyle),在DW3中点几下鼠就完成了。如一个定义淡黄色背景的CSS是这样的:
    〈style type="text/css"〉
    〈!--
    .bgstyle { background: #FFFFCC}
    --〉
    〈/style〉
      在要用时选取那段文字,再在CSS面板上点一下“bgstyle”就行了。
    8、如何给部分文字加背景图像?
      与加背景色操作类似,中是在背景在选择加载图象就是了,一个定义好的加背景图象的CSS例子的代码是这样的:
    〈style type="text/css"〉
    〈!--
    .imgbgstyle { background-image: url(logo.gif)}
    --〉
    〈/style〉
      在要用时选取那段文字,再在CSS面板上点一下“imgbgstyle”就行了。
    9、如何使页面的背景在文字“滚动”时背景图案静止不动?
      要使背景图案不随文字“滚动”的CSS是这样的:
    〈style type="text/css"〉
    〈!--
    BODY { background: purple url(bg.jpg);
        background-repeat:repeat-y;
        background-attachment:fixed  
        }
    --〉
    〈/style〉
    10、如何定义字间距?
      在DW3中CSS的属性定义对话框(Style Definition for .style1)的“Block”上的“letter spaceing”属性定义的就是字间距,它指的是每一个字符之间的额外间距,经长度为单位,正负值均可,当取负值时产生字符挤在一起的效果。下面代码是一个定义好的字间距CSS例子:
    〈style type="text/css"〉
    〈!--
    .style1 { letter-spacing: 3px}
    --〉
    〈/style〉
    11、如何给文字加上划线、下划线、删除线和闪烁?
      在DW3中CSS的属性定义对话框(Style Definition for .style1)的“Type”上的“decoration”属性定义的就是这些内容,要注意的是闪烁属性有些版本的浏览器不支持,少用为好。下面是一个定义好上述效果的CSS例子:
    〈style type="text/css"〉
    〈!--
    .style1 { text-decoration: underline overline line-through blink}
    --〉
    〈/style〉
      其中: “underline”是定义下划线;“overline ”是定义上划线;“ line-through”定义的是删除线;“blink”定义的是文字闪烁。
    12、如何使网页具有“首行缩进”功能?
      由于DW3输入空格不方便,利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话框(Style Definition for .style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”,所谓“首行”是指每段内容的第一行,也就是直接按回车键就形成了一个新的段落。缩进最好以“em”(字符)为单位,比如:汉字编排要求每段开始缩进两个汉字,设置好的CSS如下所示:
    〈style type="text/css"〉
    〈!--
    .style1 { text-indent: 2em}
    --〉
    〈/style〉
      在DW3要注意:在DW3中CSS的属性定义对话框(Style Definition for .style1)的“Block”上的“text-indent”右面的缩进单位选择框中“ems”指的就是“em”。
    13、在用表格进行排版时,能使某一方向上的内容离开表格线一点吗?
      可以!在DW3中CSS的属性定义对话框(Style Definition for .style1)的“Box”上的“margin”定义的就是内容离开边缘的距离,分别可定义四个方向:“top”“bottom”“left”“right”。下面就是定义在左边离开“10px”的CSS例子代码:
    〈style type="text/css"〉
    〈!--
    .style1 { margin: 0px 0px 0px 10px}
    --〉
    〈/style〉
    14、能给某部分内容加边框吗?
      用CSS可以给某部分内容加边框,在DW3中CSS的属性定义对话框(Style Definition for .style1)的“Border”定义的就是边框线,“top”“bottom”“left”“right”四边可分别定义线的粗细和颜色,这些定义好后不要忘记在下面的“Style”中定义线型,否则将看不边框线,因为默认的线型是“none”。下面是一个定义了上边框为:蓝色细线;左边框为:绿色中粗线的CSS例子:
    〈style type="text/css"〉
    〈!--
    .style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
    --〉
    〈/style〉
    回复 支持 反对 使用道具 举报
  • 弱智老师

    2011-11-13 08:54:59
    路过,学习了,谢谢楼主分享
    回复 支持 反对 使用道具 举报
  • 您需要登录后才可以回帖 登录 | 注册入村

    首页

    论坛

    导读

    我的

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