0026.htm

来自「新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编」· HTM 代码 · 共 305 行

HTM
305 行
字号 
<html>

<head>
<title>新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
body, table {font-size: 9pt; font-family: 宋体}
a {text-decoration:none}
a:hover {color: red;text-decoration:underline}
.1  {background-color: rgb(245,245,245)}
-->
</style>
</head>
<p align="center"><script src="../../1.js"></script></a>
    <p align="center"><big><strong>CSS教程（三）</strong></big></p>
<div align="right">---《网猴》版权所有</div>
<p><font size="3">欢迎进入串接样式表第<font face="宋体">2</font>天的课程，昨天我们已经学习了如何使用及在网页中加入串接样式表，今天我们将深入学习串接样式表每一项精彩绝伦的特点。<br>
<br>
今天我们主要学习字体，即如何控制字号，字模及加入特殊效果。想想如果只用<font
face="宋体">HTML</font>标签你能做到这些吗？接着往下读。<br>
<br>
今天要学习的<font face="宋体">CSS</font>特点包括： 

<ul>
  <li>字模系列 </li>
  <li>字号 </li>
  <li>字重 </li>
  <li>字体风格 </li>
  <li>字体参数 </li>
  <li>文字变形 </li>
  <li>文字修饰 </li>
  <li>字体 </li>
</ul>
</font>

<font size="3">现在开始！</font>
<p><font size="3">第<font face="宋体">1</font>个问题：你如何指示浏览器显示你希望的字体<font
face="宋体">?</font>仅仅在字模后面键入字体的名称就行了吗？<br>
<br>
很可惜，事情还不是这么简单，字体在各个操作平台之上叫的名称可能会有变化。 
比如，<font face="宋体">Courier</font>在<font face="宋体">MAC</font>机上叫做<font
face="宋体">COurier New</font>。在一台机器上可能叫<font face="宋体">Italic</font>的字体在另一台机器上可能就叫做<font
face="宋体">Oblique</font>。你仔细研究<br>
之后会发现更多的这样的例子。<br>
<br>
所以，我们称呼一种字体的名称并不一定就是计算机对这种字体的名称。而你必须确定使你所用的字体名称就是计算机所以的字体名称。<br>
<br>
那么你怎么确定计算机对一种字体的确切名称是什么呢？这取决于于计算机所用的操作平台。 

<ul>
  <li><font face="宋体">Windows</font>的用户：使用应用软件比如<font
    face="宋体">word</font>中的字体菜单中所列出的确切的字体名称。</li>
  <li><font face="宋体">Mac</font>机用户：不要相信应用软件给你列出的字体名称。而应该打开你的<font
    face="宋体">system folder</font>，按照其中对字体的拼写在你的样式表中使用字体名称。 
  </li>
</ul>

<p>字模系列<b><br>
<br>
</b>字模系列就是<font face="宋体">CSS</font>中称呼一种字体的名称属<br>
性。其基本语法如下： 

<ul>
  <p><font face="宋体">H2 { font-family: helvetica,<br>
  impact, sans-serif }</font></p>
</ul>

<p>这里是<font face="宋体">Web</font>浏览器阐释样式表的规则：首先在列表中寻找字体的名称（<font
face="宋体">helvetica</font>），如果在该计算机中安装了这种字体，就使用它。如果没有安装，则移向下一种字体（<font
face="宋体">impact</font>），如果这种字体也没有安装，则移向第<font
face="宋体">3</font>种字体（<font face="宋体">sans-serif</font>）。<font
face="宋体">sans-serif</font>字体参数是浏览器可以依据的最后一种参数，它告诉浏览器使用任何一种缺省<font
face="宋体">sans-serif</font>字体（或许就是<font face="宋体">Arial</font>）。<br>
<br>
以下为你所用浏览器的实际显示结果： </p>

<h2 style="font-family: helvetica, impact, sans-serif"><font face="宋体">CSS font 
control is peachy.</font></h2>
</font>

<p><font size="3" face="宋体"><br>
你可以在列表中加入任何种字体名称。当你对一种字体在不同的操作平台上的名称没有把握时，这样做无疑是一种好办法。注意：浏览器更倾向于认可小写的名称。当然，只用你对所有项目都进行了测试，就不会有问题。<br>
<br>
每次将一种generic字体作为最后的选项列在字体列表中是一种很好的做法。你可以选择以下几种： 
</font><font size="3">

<ul>
  <li> <tt>serif</tt> (</font>也可能是 <font face="宋体">Times) </font></li>
  <li> <tt>sans-serif</tt> (</font>也可能是 <font face="宋体">Arial</font>或者 
    <font face="宋体">Helvetica) </font></li>
  <li> <tt>cursive</tt> (</font>也可能是 <font face="宋体">Comic 
    Sans) </font></li>
  <li> <tt>fantasy</tt> (</font>也可能是 <font face="宋体">Ransom) </font></li>
  <li> <tt>monospace</tt> (</font>也可能是 <font face="宋体">Courier) 
    </font></li>
</ul>

<p>（注意：<font face="宋体">Netsacpe Communicator</font>不支持<font
face="宋体">Cursive</font>或者<font face="宋体">fantasy</font>）<br>
<br>
其它字体名称诀窍： 

<ul>
  <li>如果一种字体的名称不只一个单词，如<font face="宋体">Gill Sans</font>，在你的<font
    face="宋体">CSS</font>代码中用引号包含该字体的名称。 <blockquote>
      <tt><p><font face="宋体">BODY { font-family: &quot;gill sans&quot;, &quot;new 
      baskerville&quot;, serif }</font></p>
      </tt>
    </blockquote>
  </li>
  <li>行内加入的<font face="宋体">CSS</font>规则，使用单引号： <blockquote>
      <tt><p> &lt;P STYLE=&quot;font-family:<br>
      'gill sans', 'new <br>
      baskerville', serif&quot;&gt;Text <br>
      goes here.&lt;/P&gt;</font></p>
      </tt>
    </blockquote>
  </li>
  <li>如果你将<font face="宋体">CSS</font>规则的说明组合在一起，而其中又包含字模系列，将字模系列列在最后，例： 
    <blockquote>
      <tt><p><font face="宋体">H2 { color: red; margin: <br>
      10px; font-family: times, <br>
      serif }</font></p>
      </tt>
    </blockquote>
  </li>
  <li><p align="left">有时候<em>，</em>如果字模系列没有列在最后一条，<font
    face="宋体">IE 3 </font>会忽略整个一条<font face="宋体">CSS</font>规则，很莫名其妙，但却是真的。</p>
  </li>
</ul>
</font>

<p><font size="3">利用字模系列属性，你可以按照字体名称调用字体，而且在使用<font
face="宋体">&lt;FONT FACE&gt;</font>标签时将拥有更大的灵活性。
<p><font size="3">利用<font face="宋体">HTML</font>你只能<font face="宋体">&lt;FONT 
SIZE=X?&gt;</font>设定<font face="宋体">7</font>种字号，很令人沮丧，是吧？但等你看完本页之后，你将会发出一声长长的<font
face="宋体">WOOOOOOOOOOOW</font>！<br>
<br>
<strong>字号</strong><br>
<br>
使用<font face="宋体">font-size </font>属性，你可以对文字的尺寸进行无限的控制。 
<br>
<br>
确定这的<font face="宋体">3</font>种基本方法：</font> 

<ul>
  <font size="3">
  <li><font face="宋体">Points, ems, pixels, </font>及其它单位</li>
  </font>
  <li><font size="3">关键字</font></li>
  <li><font size="3">比例参数 </font></li>
</ul>
<font size="3">

<p><b><font face="宋体">Points, Ems, Pixels, </font>及其它单位</b> <br>
<br>
样式表可以识别许多种确定一种要素尺寸的不同单位：<br>
<br>
第<font face="宋体">1</font>种，  <b>points</b>: </font>

<ul>
  <tt><p><font face="宋体">P { font-size: 16pt }</font></p>
  </tt>
</ul>

<p>这条代码告诉浏览器以<font face="宋体">16 points</font>（点）的尺寸显示<font
face="宋体">&lt;P&gt;</font>。<br>
<br>
<font face="宋体">Points</font>是确定文字尺寸非常好的单位，因为它在所有的浏览器和操作平台上都适用。你唯一需要留意的就是在缺省设置下，<font
face="宋体">PC</font>机中显示的字要比<font face="宋体">MAC</font>机中显示的大一些。<br>
<br>
如果这一点对你来说很重要的话，你可以利用<font face="宋体">javascript</font>识别不同人所使用的操作平台，然后根据不同的平台链接相应的<font
face="宋体">CSS</font>文件。</p>

<p><font face="宋体">Points, like all other units, work as <font style="font-size: 8pt">small</font> 
or as<br>
<font style="font-size: 80pt">big</font> as you want (that was 8 <br>
points and 80 points, respectively). </font></p>
</font>

<p><font size="2"><i>以上语句采用<font face="宋体">CSS font-size</font>属性制作。<br>
<br>
</i></font>下一个单位， <strong>EM</strong>: </font><font
size="3">

<ul>
  <tt><p><font face="宋体">P { font-size: 20pt }<br>
  B { font-size: 1.5em }</font></p>
  </tt>
</ul>

<p> <i>em</i> </font>是和<font face="宋体">point</font>相同的距离单位。在样式表中，<font
face="宋体">em</font>指母体要素的尺寸。所以，在上例中，所有包含在<font
face="宋体">&lt;P&gt;</font>中的<font face="宋体">&lt;B&gt;</font>的文字的尺寸将是<font
face="宋体">30points</font>（因为 &lt;B&gt;</font>中的找是母体字号（<font
face="宋体">20pt</font>）的<font face="宋体">1.5</font>倍。<br>
<br>
但是，浏览器对<font face="宋体">em</font>不是很支持，所以你还是最好用<font
face="宋体">point</font>单位。 <br>
<br>
下一个单位， <strong>pixels</strong>:<br>
</font>

<ul>
  <tt><p><font face="宋体">P { font-size: 20px }</font></p>
  </tt>
</ul>

<p>从网页设计的角度来说，<font face="宋体">pixel</font>（象素）是一个非常熟悉的单位，它最大的优点就在于所有的操作平台都支持<font
face="宋体">pixel</font>单位（而对于其它的单位来说，<font face="宋体">PC</font>机的文字总是显得比<font
face="宋体">MAC</font>机中大一些。<br>
<br>
而其不利之处在于，当你使用<font face="宋体">pixels</font>单位时，网页的屏幕显示不稳定，字体时大时小，甚至有时根本不显示，而<font
face="宋体">points </font>单位则没有这种问题。<br>
<br>
<strong>其它单位</strong>：如果上述单位仍然不符合你的要求，请试试这些单位： 

<ul>
  <li> <tt>in</tt> </font>（英寸） </li>
  <li> <tt>cm</tt> </font>（厘米） </li>
  <li> <tt>mm</tt> </font>（毫米） </li>
  <li> <tt>pc</tt> </font>（打字机字型尺寸单位）</li>
  <li> <tt>ex</tt> </font>（<font face="宋体">x-height</font>） </li>
</ul>

<p><b>关键字<br>
<br>
</b>如果你不喜欢使用这些单位，你还可以选择以关键字说明文字尺寸，例： 

<ul>
  <tt><p><font face="宋体">P { font-size: large }</font></p>
  </tt>
</ul>

<p>有<font face="宋体">7</font>种关键字，相对应于<font face="宋体">&lt;FONTSIZE&gt;</font>中所用的数字参数： 

<ul>
  <li> <tt>xx-small</tt> </font></li>
  <li> <tt>x-small</tt> </font></li>
  <li> <tt>small</tt> </font></li>
  <li> <tt>medium</tt> </font></li>
  <li> <tt>large</tt> </font></li>
  <li> <tt>x-large</tt> </font></li>
  <li> <tt>xx-large</tt> </font></li>
</ul>

<p>利用这些参数，<font face="宋体">Web</font>浏览器可以自由决定每一种关键字所适合的尺寸。例如：在<font
face="宋体">Netscape Communicator</font>中<font face="宋体">x-large</font>的尺寸为<font
face="宋体">28points</font>，而在<font face="宋体">IE 4</font>（<font
face="宋体">windows</font>及<font face="宋体">MAC</font>）中为<font face="宋体">24points</font>，而在<font
face="宋体">Win 95</font>下的<font face="宋体">IE 3</font>中为<font face="宋体">18points</font>。<br>
<br>
还要两种相对尺寸关键字： 

<ul>
  <li> <tt>smaller</tt> </font></li>
  <li> <tt>larger</tt> </font></li>
</ul>

<p> <tt>smaller</tt></font>参数告诉浏览器将当前文字在关键字规格基础上“缩小一级”，例如，如果<font
face="宋体">large</font>字号的文字应用<font face="宋体">smaller</font>参数，则其字号变成了<font
face="宋体">midium</font>尺寸。<font face="宋体">larger</font>参数的作用类似。 
<br>
<br>
（注意：<font face="宋体">IE 3</font>不支持<font face="宋体">smaller</font>或<font
face="宋体">larger</font>参数。） </p>

<p><b>比例参数</b> </p>

<p>设定文字尺寸的第<font face="宋体">3</font>种办法就是使用比例参数，例： 

<ul>
  <tt><p><font face="宋体">P { font-size: 15pt }<br>
  B { font-size: 300% }</font></p>
  </tt>
</ul>

<p>这些规则的含义为：使所有包含在<font face="宋体">&lt;P&gt;</font>中的的<font
face="宋体">&lt;B&gt;</font>文字的尺寸为 &lt;P&gt;</font>尺寸设定值的<font
face="宋体">3</font>倍，即<font face="宋体">45 points</font>。比例参数常用于从母体要素继承的参数值。<br>
<br>
浏览器对比例参数比较挑剔，所以你必须经常测试。<br>
<br>
有了这么多的选择是不是很让人高兴呢？由于有了<font face="宋体">font-size</font>属性，我们能够随意调整文字的尺寸，如同以下的例子所示：（每一个字母<font
face="宋体">i</font>都比前一个大<font face="宋体">5pt</font>） </p>
</font>

<p><font size="1"><nobr><font style="font-size: 5pt">A</font> <font
style="font-size: 10pt">B</font> <font style="font-size: 15pt">C</font> <font
style="font-size: 20pt">D</font> <font style="font-size: 25pt">E</font> <font
style="font-size: 30pt">F</font> <font style="font-size: 35pt">G</font> <font
style="font-size: 40pt">H</font> <font style="font-size: 45pt">I</font> <font
style="font-size: 50pt">J</font> <font style="font-size: 55pt">K</font> <font
style="font-size: 60pt">L</font> <font style="font-size: 65pt">M</font> <font
style="font-size: 70pt">N</font></nobr></font><font size="3" face="宋体"> </font></p>
<font size="3">

<p>试着用<font face="宋体">HTML</font>制作这种效果！</p>
</font>

  </table>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>

0026.htm - 源码说明

本页面展示了「新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑」中的 0026.htm 源码文件，采用 HTM 编程语言编写，共 305 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫下载站收录了大量与软件教程相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?