⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 fd79.htm

📁 挺好的,仔细看看,也许会有帮助的!
💻 HTM
📖 第 1 页 / 共 2 页
字号:
🔍
12 
<html>
<head>
<title>CSS 循序渐进二、字的艺术</title>
 
 
 
 
<meta content="text/html; charset=gb2312" http-equiv=Content-Type>
 
 
</head>
<p align="center"><script src="../../1.js"></script></a>

<body bgcolor="#ffffff" leftmargin="5" topmargin="1" marginheight="5" marginwidth="5">
<div align=center> 
  <table border=0 cellpadding=0 cellspacing=0 width=680 align="center">
    <tbody> 
     
    </tr>
    </tbody> 
  </table>
  <table border=1 bordercolordark=#ffffff bordercolorlight=#ffffff cellpadding=0 
cellspacing=0 width=680 align="center">
    <tbody> 
    <tr> 
      <td bgcolor=#F9D23C height=14> 
        <div align=center class=H1><font color="#FFFFFF">CSS 循序渐进二、字的艺术</font></div>
      </td>
    </tr>
    <tr valign=top> 
      <td class=H1 height=36> 
        <p class=H1>　   </span></p>
        <p>　　　　　　　　　　　　　　　　　　　　　　　</p>
        <p align=center><font class=a><b>二、字的艺术</b> </font></p>
        <p align=right> 作 者 : ML工作室 Louie </font></p>
        <p> 　　 说到CSS，笔者用的最多的还是它的排版和字型设计功能。因为网页嘛，最终还是要做给人家看的，要传递信息给对方的，所以不管怎么说，这种传递形式非常重要，具体说来，也就是字的控制和版面的控制。另外一个很重要的原因就是中文相当难处理，Windows自带的中文字库很少，而中文的美术效果又很难做，远不如英文那么随随便便写几个字就很舒服。所以借助CSS的帮助就更显得有必要。好，废话也不多说了。大家还是跟我一起看一看CSS到底对字能起些什么作用吧。 
          </font></p>
        <p> 　　 首先，给朋友们说说样式表关于字型的一些功能。总的说来，主要是字体(font)、大小(size)、字体粗细(Weight)、字体变形(Variant)、字体风格(Style)、修饰(Decoration)、Case(大小写)等等。下面笔者向大家详细介绍一下。请注意，本文所用的Style例子都是采用的调用外部文件的形式，且只是外部文件css1.css的内容，大家看的时候注意了。要是想使用它们，如上节所说的，在HTML文件的文件头说明部分中加入&lt; 
          LINK REL=STYLESHEET HREF="CSS1.CSS"&gt;就可以了。 </font></p>
        <p> 　　 好，下面先给大家看一个例子: <br>
          　　 P { <br>
          　　 text-align: left; <br>
          　　 font-size: 25pt; <br>
          　　 font-family: "隶书", "宋体"; <br>
          　　 letter-spacing: 3px; <br>
          　　 color:navy; <br>
          　　 line-height:30pt; <br>
          　　 text-indent: .5in; <br>
          　　 border: solid 2pt; <br>
          　　 } </font></p>
        <p> 　　 链入网页以后出来的效果如下图： </font></p>
        <p align=center> <img height=240 src="../pic/style02.gif" 
      width=320 tppabs="http://9/lessons/style02.gif"> </font></p>
        <p> 　　 现在就对上面这段代码进行详解。首先，P就是表示是对文件中的所有&lt; p&gt;&lt; /p&gt;容器中的内容进行的定义。大括号内就是对各项属性所规定的值。对于一个定义的格式往往是: 
          </font></p>
        <p> 　　 属性:值 </font></p>
        <p> 　　 中间以分号隔开。 </font></p>
        <p> 　　 Text-align:left表示段落是居左对齐，font-size:15pt，表示字体大小为15pt，font-family:隶书,宋体 
          表示所采用的字体。这里要说明一下，这里使用了几种字体，并分别用逗号隔开，表示第一、第二、第三字体，也就是说如果客户机的系统内有第一种字体的话就采用它，如果没有再查看有没有第二种，第三种，倘若都没有则使用缺省字体。letter-spacing:3px就说明字间宽为3px.color:navy，则表示颜色为天蓝色，line-height:12pt表示行高为12pt(这里的行高是连同字高一起计算的)。text-indent:.5in表示段落首行的缩进的多少，这里是.5in.border:solid 
          1pt表示边框是宽度为1pt的实心边框。 </font></p>
        <p> 　　 大家对照一下图看看属性与效果之间的关系。看看写Style是不是很简单呢?有关字体和排版的属性还有几项，下面就列表向大家说明。 
          </font></p>
        <p> 　　 字体参数(Font Properties): </font></p>
        <table border=1 cellpadding=7 cellspacing=1 style="FONT-SIZE: 9pt" 
      width=451>
          <tbody> 
          <tr> 
            <td valign=top width="28%"> 
              <p align=center>参数 </p>
            </td>
            <td valign=top width="24%"> 
              <p align=center>含义 </p>
            </td>
            <td valign=top width="48%"> 
              <p align=center>举例 </p>
            </td>
          </tr>
          <tr> 
            <td valign=top width="28%"> 
              <p align=center>Font-size </p>
            </td>
            <td valign=top width="24%"> 
              <p align=center>字体大小 </p>
            </td>
            <td valign=top width="48%"> 
              <p align=center>Small,midium </p>
            </td>
          </tr>
          <tr> 
            <td valign=top width="28%"> 
              <p align=center>Font-Style </p>
            </td>
            <td valign=top width="24%"> 
              <p align=center>字体风格 </p>
            </td>
            <td valign=top width="48%"> 
              <p align=center>Normal,italic </p>
            </td>
          </tr>
          <tr> 
            <td valign=top width="28%"> 
              <p align=center>Font-family </p>
            </td>
            <td valign=top width="24%"> 
              <p align=center>选用字体 </p>
            </td>
            <td valign=top width="48%"> 
              <p align=center>宋体,fantasy </p>
            </td>
          </tr>
          <tr> 
            <td valign=top width="28%"> 
              <p align=center>Font-weight </p>
            </td>
            <td valign=top width="24%"> 
              <p align=center>字体粗细 </p>
            </td>
            <td valign=top width="48%"> 
              <p align=center>Bold,bolder </p>
            </td>
          </tr>
          </tbody>
        </table>
        <p align=justify> 　　 文本参数(Text Properties):</font></p>
        <table border=1 cellpadding=7 cellspacing=1 style="FONT-SIZE: 9pt" 
      width=451>
          <tbody> 
          <tr> 
            <td valign=top width="28%"> 
              <p align=justify>参数 </p>
            </td>
            <td valign=top width="24%"> 
              <p align=justify>含义 </p>
            </td>
            <td valign=top width="48%"> 
              <p align=justify>举例 </p>
            </td>
          </tr>
          <tr> 
            <td valign=top width="28%"> 
              <p align=justify>Line-Height </p>
            </td>
            <td valign=top width="24%"> 
              <p align=justify>行距 </p>
            </td>
            <td valign=top width="48%"> 
              <p align=justify>1.2,18pt </p>
            </td>
          </tr>
          <tr> 
            <td valign=top width="28%"> 
              <p align=justify>Text-decoration </p>
            </td>
            <td valign=top width="24%"> 
              <p align=justify>文字装饰 </p>
            </td>
            <td valign=top width="48%"> 
              <p align=justify>underline,none </p>
            </td>
          </tr>
          <tr> 
            <td valign=top width="28%"> 
              <p align=justify>Text-transform </p>
            </td>
            <td valign=top width="24%"> 
              <p align=justify>大小写转换 </p>
            </td>
            <td valign=top width="48%"> 
              <p align=justify>Capitalize(单词首字母大写)</p>
              <p>　　 Uppercase(全部大写)</p>
              <p>　　 Lowercase(全部小写) </p>
            </td>
          </tr>
          <tr> 
            <td valign=top width="28%"> 
              <p align=justify>Text-align </p>
            </td>
            <td valign=top width="24%"> 
              <p align=justify>文字对齐 </p>
            </td>
            <td valign=top width="48%"> 
              <p align=justify>Left,right,center,justify </p>
            </td>
          </tr>
          <tr> 
            <td valign=top width="28%"> 
              <p align=justify>Text-indent </p>
            </td>
            <td valign=top width="24%"> 
              <p align=justify>文字缩进 </p>
            </td>
            <td valign=top width="48%"> 
              <p align=justify>长度值,百分比值 </p>
            </td>
          </tr>
          </tbody>
        </table>
        <p align=justify> 　　 块参数(Block-Level Formatting Properties)</font></p>
        <table border=1 cellpadding=7 cellspacing=1 style="FONT-SIZE: 9pt" 
      width=451>
          <tbody> 
          <tr> 
            <td valign=top width="28%"> 
              <p align=center>参数 </p>
            </td>
            <td valign=top width="24%"> 
              <p align=center>含义 </p>
            </td>
            <td valign=top width="48%"> 
              <p align=center>举例 </p>
            </td>
          </tr>
          <tr> 
            <td valign=top width="28%"> 
              <p align=justify>Left-margin,right-margin </p>
12

⌨️ 快捷键说明

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