通行证│用户名: 密码: 验证码: 验证码,看不清楚?请点击刷新验证码 电信网通铁通移动   在线
资源搜索:
热门搜索:Linux VB C语言 PhotoShop Flash TCP/IP
   首页 | 文章 | 软件 | 动画 | 资源 | 励志 | 骗术 | 论坛 | 邮箱 | 会员中心 | 军事 | 科技 | 博客 | 图片 | 商城 | 最新更新 | 800g资源 | 爱心黑客
您现在的位置: 爱国者黑客 >> 资源 >> WEB开发 >> HTML >> CSS教程 >> 文章正文
5日精通样式表一
责任编辑:admin   更新日期:2005-8-6
继承的规则。如果找不到继承的规则,则浏览器转向执行第3步。

  • 按照样式表规则在HTML中的显示顺序执行。

    P { color: green }
    P { color: red }

    当无法适用上述规则时,浏览器将根据规则在代码中显示顺序执行。在上例中,<P>作为讲座一红色显示,因为它是最后给出的规则。

  • 注意:正式的串接样式表规定对于串接 顺序有更详细的规定。但由于执行规定Netscape Communicator Internet Explorer都不支持,所以本文中不再细述。

    最后一个问题:如果样式表规则同HTML标签冲突时,如何处理?我们看一下这个例子:

      I { font-family: impact }

      <P>I think <I><FONT FACE="Times">
      East of Eden</FONT></I> is Stein
      beck's best novel.</P>

    该例中样式表规则要求浏览器使用Impact,但是传统的HTML<FONT FACE>标签要求用Times字体,一个很明显的传统。

    根据正式的样式表规定,应该优先执行样式表规则。

    但是最主要的几种浏览器Netscape 和IE 4.0 都规定应优先执行HTML。唉.......

    你看到了吧,浏览器不能如我们希望的那样应用串接样式表。节哀顺变吧。
    我必须得作这个简短而又尖刻的评价:串接样式表很伟大,但浏览器却不怎么样。

    Internet Explorer 3.0是第一个试图支持样式表的浏览器,它的尝试是很有勇气的,特别是在尚未确定样式表的正式标准的时候更显得可贵。但也因为如此,IE 3.0支持了CSS的大部分属性,但也存在一些小毛病。

    你可能以为等Netscape CommunicatorIE 4.0问世的时候将会更坚定地支持CSS。很可惜。似乎微软和网景关系的开发者对CSS的某些属性都作了自己的阐释。而双方的阐释彼此互不支持。

    结果如何呢?应用样式表就象是行走在地雷区一般。大部分的东西都很正常,但有些不是。甚至有些东西都能运转,但在不同的浏览器上的显示却不同。

    在以后4天的学习中,我将尽力说明不同的浏览器各自支持什么属性。但是其中的细节就需要你自己亲自去趟这个雷区了。将利用样式表制作的产品放到不同的浏览器和平台上进行测试是非常有必要的。这是避免令人不愉快的结果的唯一办法。

    同时,我们应该大声疾呼,让微软和网景公司明白必须统一对串接样式表的支持,只有这样才能实现标准化的设计。
    今天我们探索了样式表的神奇魅力及其基本使用方法。

    为什么使用串接样式表?因为它能对网页的设计施以绝对的控制。它还是维护和更新一个网站最有效的途径。它能使网页的体积更小下载速度更快。

    CSS如何应用呢?通过每一项样式表规则应用。样式表规则由选择和说明两项构成。规则可以被植入、链接、输入HTML或加入HTML文件行内。每种网网页中加入样式表的方法都有各自的优势。

    下面的4天中,我们将深入学习样式表的各项属性,了解它的威力。以下是大致的学习计划:

    • 2日:字体 第3日:图文和布局 第4日:颜色和背景
    • 5日:定位

    明天见!
    欢迎进入串接样式表第2天的课程,昨天我们已经学习了如何使用及在网页中加入串接样式表,今天我们将深入学习串接样式表每一项精彩绝伦的特点。

    今天我们主要学习字体,即如何控制字号,字模及加入特殊效果。想想如果只用HTML标签你能做到这些吗?接着往下读。

    今天要学习的CSS特点包括:

    • 字模系列 字号 字重 字体风格 字体参数 文字变形 文字修饰
    • 字体

    现在开始!
    1个问题:你如何指示浏览器显示你希望的字体?仅仅在字模后面键入字体的名称就行了吗?

    很可惜,事情还不是这么简单,字体在各个操作平台之上叫的名称可能会有变化。 比如,CourierMAC机上叫做COurier New。在一台机器上可能叫Italic的字体在另一台机器上可能就叫做Oblique。你仔细研究
    之后会发现更多的这样的例子。

    所以,我们称呼一种字体的名称并不一定就是计算机对这种字体的名称。而你必须确定使你所用的字体名称就是计算机所以的字体名称。

    那么你怎么确定计算机对一种字体的确切名称是什么呢?这取决于于计算机所用的操作平台。

    • Windows的用户:使用应用软件比如word中的字体菜单中所列出的确切的字体名称。
    • Mac机用户:不要相信应用软件给你列出的字体名称。而应该打开你的system folder,按照其中对字体的拼写在你的样式表中使用字体名称。

    字模系列

    字模系列就是CSS中称呼一种字体的名称属
    性。其基本语法如下:

      H2 { font-family: helvetica,
      impact, sans-serif }

    这里是Web浏览器阐释样式表的规则:首先在列表中寻找字体的名称(helvetica),如果在该计算机中安装了这种字体,就使用它。如果没有安装,则移向下一种字体(impact),如果这种字体也没有安装,则移向第3种字体(sans-serif)。sans-serif字体参数是浏览器可以依据的最后一种参数,它告诉浏览器使用任何一种缺省sans-serif字体(或许就是Arial)。

    以下为你所用浏览器的实际显示结果:

    CSS font control is peachy.

    如果你的浏览器不支持CSS属性,请点击这里查看其显示效果。

    你可以在列表中加入任何种字体名称。当你对一种字体在不同的操作平台上的名称没有把握时,这样做无疑是一种好办法。注意:浏览器更倾向于认可小写的名称。当然,只用你对所有项目都进行了测试,就不会有问题。

    每次将一种generic字体作为最后的选项列在字体列表中是一种很好的做法。你可以选择以下几种:

    • serif (也可能是 Times) sans-serif (也可能是 Arial或者 Helvetica) cursive (也可能是 Comic Sans) fantasy (也可能是 Ransom)
    • monospace (也可能是 Courier)

    (注意:Netsacpe Communicator不支持Cursive或者fantasy

    其它字体名称诀窍:

    • 如果一种字体的名称不只一个单词,如Gill Sans,在你的CSS代码中用引号包含该字体的名称。

      BODY { font-family: "gill sans", "new baskerville", serif }

      行内加入的CSS规则,使用单引号:

      <P STYLE="font-family:
      'gill sans', 'new
      baskerville', serif">Text
      goes here.</P>

      如果你将CSS规则的说明组合在一起,而其中又包含字模系列,将字模系列列在最后,例:

      H2 { color: red; margin:
      10px; font-family: times,
      serif }

    • 有时候如果字模系列没有列在最后一条,IE 3 会忽略整个一条CSS规则,很莫名其妙,但却是真的。

    利用字模系列属性,你可以按照字体名称调用字体,而且在使用<FONT FACE>标签时将拥有更大的灵活性。
    利用HTML你只能<FONT SIZE=X?>设定7种字号,很令人沮丧,是吧?但等你看完本页之后,你将会发出一声长长的WOOOOOOOOOOOW

    字号

    使用font-size 属性,你可以对文字的尺寸进行无限的控制。

    确定这的3种基本方法:

    • Points, ems, pixels, 及其它单位
    • 关键字
    • 比例参数

    Points, Ems, Pixels, 及其它单位

    样式表可以识别许多种确定一种要素尺寸的不同单位:

    1种, points:

      P { font-size: 16pt }

    这条代码告诉浏览器以16 points(点)的尺寸显示<P>

    Points是确定文字尺寸非常好的单位,因为它在所有的浏览器和操作平台上都适用。你唯一需要留意的就是在缺省设置下,PC机中显示的字要比MAC机中显示的大一些。

    如果这一点对你来说很重要的话,你可以利用javascript识别不同人所使用的操作平台,然后根据不同的平台链接相应的CSS文件。若想学习制作方法,请点击learnhow

    上一页  [1] [2] [3] [4] [5] 下一页

  • 上一篇文章:
  • 下一篇文章:
  • 热门文章
    Olldbg常见问题
    汇编语言的艺术(组合语言的艺术)--观
    汇编语言的艺术(组合语言的艺术)--准
    汇编语言的艺术(组合语言的艺术)--基
    汇编语言的艺术(组合语言的艺术)--基
    汇编语言---程式设计 (4)
    虚拟8086模式
    SYS命令使用说明
    javascript + CSS 实现动态菜单显
    推荐文章
    自制Windows XP SP2自动安装光盘
    SQLServer注入工具改进版 v1.02
    使用photoshop CS进行自然美肤
    Photoshop绘制诺基亚手机
    PHOTOSHOP制作秋日之梦
    PHOTOSHOP鼠绘名模王爱萍
    Photoshop制作晶莹飞溅的水珠
    教你用PHOTOSHOP做放大镜
    鼠绘美女及服装修画全过程