应用CSS完全手册！

■ FONT-FAMILY属性：

　　每部机器上都装有多种字体，浏览器会使用默认的字体浏览网页，比如简体中文版WINDOWS汉字默认是宋体，英文默认是ARIAL。 使用FONT-FAMILY属性则可以规定浏览器用什么字体解读网页。

 ■ FONT-FAMILY语法实例：

h2 {font-family:times,impact,sans-serif}

说明如下:

　　helvetica是浏览器首先寻找的字体名称，如果有就使用它。在helvetica字体没有找到的情况下，则会寻找impact字体，如果找到就使用它。如果以上两种字体都没有找到，则指示浏览使用sans-serif（通用字体）。在你不能保证你列出的字体浏览者一定会安装时，将一种通用字体加在字体列表中是一种好的做法。因此我们提倡使用最基本的字体制作网页，比如中文用宋体，英文用ARIAL，这样使得你的网页不会因为浏览器没能使用合适的字体解读而变样。

■ 其它相关内容：

• 通用字体有以下几类，其中cursive和fantasy不被NC支持：
  • "serif"(比如Times);
  • "sans-serif"(比如Helvetica);
  • "cursive"(比如Comic Sans);
  • "fantasy"(比如Western);
  • "monospace"(比如Courier)
• 其他使用事项：
  • 如果一种字体的名称中有空格，如"Times New Roman"，在CSS语句中要用引号包含该字体。
  • 例：Body {font-family:"Times New Roman",serif}
  • 如果该语句已在双引号里，则字体名降级为单引号。
  • 例：<P style="font-family:'Times New Roman',serif">
  • 如果该语句包括其它CSS规则，字体说明应放在最后。
  • 例:H2 {color:red;margin:10px;font-family:"Times New Roman",serif}

  ■ 继承：

  　　继承：就是在子元素没有定义样式的情况下，它将采用上一级元素的样式定义。

  　　优先级：根据继承来理解优先级也就容易。最近的样式优先级最高。 比如:

  　　CSS在<heda>声明 I{font-family:impact}；

  　　但在HTML语句中又如下定义：<P> 要显示的文字在<I><font face="Times">这里</font></I></P> 在此例中样式表要求用IMPACT字体，而FONT标记要求用TIMES字体，最终浏览器使用的会是TIMES。作为CSS标准制定者，要求将CSS优先，他们认为像以上的例子中应该用IMPACT字体。可以浏览器产商照顾使用者的旧习惯，使用了FONT标记中的字体，尽管FONT已不被提倡。
  
  　　■ 更好的方法--关联：
  
  　　我并讲不出抛弃FONT标记的理由，只知道这是潮流。显然CSS提供更好的方法避免你在像上面的例子一样使用FONT标记，那就是： 关联。 可以在HEAD部分的CSS定义中加入如下行： P I {font-family:times} /*P和I之间的空格不能少*/

  　　在HTML中： <P>要显示的文字在<I>这里</I></p>

  　　虽然你没有使用FONT FACE，但根据HEAD部分的CSS定义，P标记里的I标记使用的字体一定是TIMES。要提起注意的是那行CSS样式只作用于P标记里的I标记。

  ■ 大小控制方法：

  　　以下是控制文字大小的三种方法：

  • 使用大小单位，pt(点),px(像素),em,及其他单位；
  • 使用关键字(xx-small,x-small,small,medium,large,x-large,xx-large)；
  • 使用比例参数(150%等)。

  例如：
  
  

  • p {font-size:12pt};
  • p {font-size:large};
  • p {font-size:200%};

   ■ 字体风格：

  • 斜体 p {font-style:italic};
  • 粗体 p {font-weight:bold};

  　　在字重的设定方面，还有lighter(更轻)和bolder(更重)，还可以使用数字100,200到900最重。

  　　字体风格和字重都有一个共同的参数normal，一旦设为normal也就取消了字重和风格设置。

  ■ FONT-VARIANT：

  　　FONT-VARIANT 可以将正常文字尺寸缩小一半后转为大写：

  • h2 {font-variant:small-caps}

   ■ TEXT-TRANSFORM：

  　　完全控制字母大小写：

  • 全部大写：h2 {text-transform:uppercase};
  • 全部小写：h2 {text-transform:lowercase};
  • 单词第一个字母大写：h2 {text-transform:capitalize};
  • 取消所有设定：h2 {text-transform:none};

   ■ TEXT-DECORATION：

  　　哪天你突发奇想，希望链接没有下划线，现在你可以做到：

  • 文字下划线：A:link{text-decoration:underline};
  • 文字上划线：A:link{text-decoration:overline};
  • 文字删除线：A:link{text-decoration:line-through};
  • 文字闪烁：A:link{text-decoration:blink};
    
    
    
    
    没有相关教程

Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved.
闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18