one piece

Archive for the 'CSS' Category

利用ID选择符定义样式

Thursday, April 6th, 2006

在上一节里,提到利用class类选择符定义样式的方法;这一节,还要教你如何利用ID指定选择符定义样式,其中,两者最大的差别在与定义样式名称前的符号,用class定义为”*.样式名称”; 若用ID定义样式时为”#样式名称”。以下是ID选择符定义样式的语法

  1. <style type="text/css">
  2.  <!--
  3.  #a1 {样式属性:属性值; 样式属性:属性值;}
  4.  #a2 {样式属性:属性值; 样式属性:属性值;}
  5.  ......
  6.  #an {样式属性:属性值; 样式属性:属性值;}
  7.  -->
  8.  </style>

或者\r

  1. <style type='text/css">
  2.  <!--
  3.  标记1#a1 {样式属性:属性值; 样式属性:属性值}
  4.  标记2#a2 {样式属性:属性值; 样式属性:属性值}
  5.  ........
  6.  标记n#an {样式属性:属性值; 样式属性:属性值}
  7.  -->
  8.  </style>

下面是语法各部分的说明。\r #a1…#an
a1…an是定义ID选择符名称,通常在定义样式时,指定给样式的名称。其使用范围,是整个html文件中所有由ID选择符所引用的设置。\r 标记 1#a1…标记 N#an
标记1…标记N为HTML的标记名称,不同点在与,若在ID选择符前面加上HTML的标记时,其使用范围将只限于该标记所包含的内容。\r 样式属性
定义样式的属性名称。\r 属性值
设置样式属性的值。\r
下面的语句,将在HTML内引用P标记的a1与a2的定义样式,分别定义为楷体,红色和华文隶书蓝色。\r

  1. <style type="text/css">
  2.  <!--
  3.  p#a1 {font-family:楷体; color:red}
  4.  *.a2{font-family:华文隶书; color:blue}
  5.  -->
  6.  </style>

利用CLASS类选择符定义样式

Wednesday, April 5th, 2006

class类选择符的使用语法如下

  1. <style type="text/css">
  2.  <!--
  3.  *.a1{样式属性:属性值; 样式属性:属性值;}
  4.  *.a2{样式属性:属性值; 样式属性:属性值;}
  5.  …………\r *.an{样式属性:属性值; 样式属性:属性值;}
  6.  -->
  7.  </style>

或者\r

  1. <style type="text/css">
  2.  <!--
  3.  标记1.a1{样式属性:属性值; 样式属性:属性值;}
  4.  标记2.a2{样式属性:属性值; 样式属性:属性值;}
  5.  …………\r 标记3.an{样式属性:属性值; 样式属性:属性值;}
  6.  -->
  7.  </style>

下面是语法各部分的说明。\r
*a1 ……*an
a1….an定义为类选择符名称,通常在定义样式时指定给样式的名称。其适用范围是整个HTML文件中所以有class类选择符所引用的设置。*符号也可以用在HTML内的标记替换(即标记 1….标记 N),范例如:font.a1;此外*符号,在设置时也可以省略。\r 标记 1.a1…标记 N.AN
标记 1…标记 N为HTML的标记名称,即前面提国的*符号,也可以HTML内的标记代替。不同点在与,若在定义class类选择符前面加上HTML的标记时,其使用范围将只限与该标记所包含的内容。\r 样式属性
定义样式的属性名称。\r 属性值
设置样式属性的值。\r
下面的语句,将在HTML内引用 P 标记的A1与A2的类样式,分别定义为”楷体、红色”与”华文隶书、蓝色“。\r

  1. <style type="text/css">
  2.  <!--
  3.  p.a1 {font-family:楷体; color:red}
  4.  *.a2{font-family:华文隶书; color:blue}
  5.  -->
  6.  </style>

注意用这种方法定义样式时,要在名称前加上”.”符号;在”*”符号前则可以省略。范例1-3.htm分别说明如何定义在某一标记和整个html使用的样式的class选择符。\r 范例1-3.htm
class定义样式类的使用

图fl1-3

程序说明
在程序第6行和第7行,我们利用class类选择符定义样式,其中第6行是针对P标记,定义A1类样式;而第7行定义A2类样式,其适用范围是整个HTML文件。\r 第12行在P标记内利用class引用a1的样式,将显示为红色楷提样式;第13行虽然在H1标记中引用A1的样式,但因为A1的样式只限与P标记,所以此行文字采用默认值样式,并不会显示任何的效果;第14行在H1标记中引用A2的样式,因A2的样式使用范围在整个HTML文件,所以此行文件将显示A2所定义的蓝色华文录书样式。\r 执行结果如图fl1-3-1所示:

图fl1-3-1

组合选择符

Wednesday, April 5th, 2006

除了在style元素内,分别定义歌种选择符的样式外,您还可以一次完成在不同的选择符内定义相同的样式,好处在与减少样式表的空间和重复设置的麻烦。语法如下:

  1. <style type="text/css">
  2.  <!--
  3.  选择符 1, 选择符 2,……选择符 N {样式属性:属性值; 样式属性:属性值;}
  4.  --!>
  5.  </style>

下面是语法各部分的说明.
选择符 1….选择符 N
定义样式的选择符(Selector)
样式属性
定义样式的属性名称。\r 属性值
设置样式属性的值。\r 范例1-21.htm将把html的h1与h2选择符的样式,定义为相同的”楷体、红色“。\r

  1. <style type="text/css">
  2.  <!--
  3.  h1,h2 {font-family:楷体; color:red}
  4.  -->
  5.  </style>

范例1-21.htm:组合选择符的使用

图fl1-21

程序说明
整个程序的重点在于第6行利用组合选择符的方法,将H1与H2定义成相同的样式。\r 执行结果如图fl1-21-1

图fl1-21-1

定义内部样式表

Tuesday, April 4th, 2006

在HTML文件内定义样式表
在标记中,用设置STYLE属性的方法,只能控制一个标记的样式,实在让人看不出CSS对网页设计有什么特别的效果,在这一节,将告诉您如何在

  1. <style></style>

元素(Element)中定义样式,在整个html文件中,要使用该样式的标记可以直接调用。下面是

  1. <style></style>

元素的定义语法:

  1. <style type="text/css">
  2.  <!--
  3.  选择符1 {样式属性:属性值; 样式属性:属性值;}
  4.  /*注释内容*/
  5.  选择符2 {样式属性:属性值; 样式属性:属性值;}
  6.  ........
  7.  选择符N {样式属性:属性值; 样式属性:属性值;}
  8.  -->
  9.  </style>

(more…)

直接定义标记的style属性

Tuesday, April 4th, 2006

直接在html标记内,插入style属性,定义要显示的样式,这是最简单的样式定义方法,不过,利用这种方法定义样式时,效果只可以控制该标记,其语法如下:<标记名称 style="样式属性:属性值; 样式属性:属性值;>
范例1-1.htm设置

  1. <h1>

标记除了本身所具有的特性外,也将具有蓝色楷体字体。\r

  1. < h1 style="font-family:楷体; color:blue">

范例1-1.htm:使用时直接定义style属性\r

图fl1-1

程序说明
在程序第6行,直接在

  1. <h1>

标记内定义为style属性,此航海文字将显示红色楷体的字体;而第8行,虽然也是

  1. <h1>

标记,但因为没有任何定义,所以只显示原来在HTML内定义的H1标题的大小。\r 执行结果如图fl1-1-1所示:

图fl1-1-1

样式表的定义与使用-写在前面

Friday, March 31st, 2006

在CSS里可以使用四中不同的方法,将样式表的功能加到网爷里,让网页显得更多采多姿。\r 方法如下:\r 直接定义标记的STYLE属性
定义内部样式表
嵌入外部样式表
连接外部样式表
上面四种方法,可分成内部样式表。

应注意的事项-CSS文件的应用

Thursday, March 30th, 2006

1-2-2CSS文件的应用
CSS所编辑出的文件与HTML相同,都属于纯文本文件,差别在于扩展格式的不同,HTML文件的扩展名为(.htm和.html);而CSS文件的开展名则为(.css),不过若您是在HTML中编辑CSS的话,存盘格式依然是(.htm 或.html)。本教材后半段内容所要介绍的CSS用法,并不需要利用特别的编辑工具来编写源代码,仅需利用像HTML的Notepad文件编辑器即可。图1-3是利用Notepad文件编辑器来,所编写的.htm或.html源代码,热而黑色框线的部分即是在.htm或.html文件中所定义的CSS源代码。\r
图1-3

图1-4是利用Notepad文件编辑妻,所编写的CSS源代码。通常CSS的文件,都是利用连接或者插入的方式,应用到html文件里。\r
图1-4

CSS不只可以使用在HTML上,还可以用在别的文件上,如XML或者 JacaScript。\r 若你想了解CSS的发展和近况,或者更多关于CSS的内容时,可以参考W3C(World Wide Wed Consortium),网址是http://www.w3.org/TR/REC-CSS1以及http://www.w3.org/TR/REC-CSS1审核通过并推荐使用的规格书。

应注意的事项-支持CSS的浏览器

Thursday, March 30th, 2006

1-2-1支持CSS的浏览器
IE(Internet Explorer)与NC(Netscape)浏览器等..对CSS所支持的样式并不完全相同。所以对与设计好的样式表,浏览器通常仅会读区其看得懂的部分,对与那些看不懂的语法,将略国不显示效果。范例如:要设定样式层次(Layer)的效果时,若利用(LaYER)标记引用样式时,就仅能被NC所支持,在IE中就显示不出效果;但若利用

<div>

标记引用时则两者均支持此样式。\r 吸早您或许会有疑问,两者所支持的样式并不相同,那我们该选哪一种来使用呢?我建议您,使用IE会比较得心应手。为什么呢?这个问题可以从两个方面来讨论:哪一种浏览器支持的功能比较多?哪一种浏览器比较多人使用?\r 基本上。IE支持CSS的功能比NC还有丰富,而且也陆陆续续地新增其他功能;再者,日前大部分的计算机用户,使用IE的比率比NC还多,所以使用IE较能避免与使用者浏览器不兼容的情况发生。这就是为什么建议您使用IE的原因了。

第1章.CSS简介-CSS的优点

Thursday, March 30th, 2006

1-1-3CSS的优点
下面就是我们学习CSS所整理出来的三个优点。当然!在CSS里也不只有这几项优点,相信您学完后,一定也会深有感受,或者发掘出更多CSS的好处。\r 一组样式可以调用在多个对象上
CSS强大的功能,就是您只要定义一组样式后,就可以随心所欲地调用在与任一段,或者任何文件中。相当的使用方式。\r 语法易学易懂
基本上CSS的语法比HTML的语法还容易学,所以一旦您已学会HTML后,接下来的CSS对你而言就不是什么难题。除此之外,因为CSS还可以简单地设定并存成格式为.css的文件,所以鱼肚程序时,也比HTML来得方便。\r 丰富的样式效果
CSS的样式设定功能,比HTML还来得多,且几呼所以HTML文件中可以看到的样式,CSS都有提供。不仅如此,它还提供一些HTML没有的网页效果,范例如:第4章的滚动条效果。结合HTML与CSS的应用,真是让您的网页增色不少呢!

第1章.CSS简介-为什么要有CSS

Thursday, March 30th, 2006

1-1-2为什么要有CSS
若利用html语法编写网页,你会发现编写网页并不难。而对与一个网站经营者来说,困难的地方在于怎样管理。打个比方,如果有一天我们希望将网页中所有的标题都改成红色。这时学过HTML的您,觉得改怎么办呢?二话不说,马上利用Notepad调出所有的HTML文件,一个一个地改,没错这的确是您目前所能想到的唯一办法,但这不是很累人吗?难道没有更简单的方式吗?有!答案就是CSS。\r 而CSS的概念,就是将样式的定义与HTML文件中分离出来,只要建立一个定义样式的CSS文件,并让所有HTML调用这个CSS文件所定义的样式,以后要更改HTML中某段落的样式时,只要到CSS文件中,更改样式的定义即可。如图1-2所示:

图1-2

Google
 
Web www.sb123.org
Page 1 of 212»