在HTML网页文件中调用CSS文件

来源：互联网发布：php拆分gif 编辑：程序博客网时间：2024/04/29 18:46

CSS作为效率高、灵活性强而被广泛地应用于网页制作中。难得的是，CSS既可以以各种方式嵌入HTML文件中，也可以以文件的形式独立存在被而不同的HTML文件随时调用。本文将讨论CSS文件如何编写以及CSS文件如何被HTML网页文件调用。

以设置字体为例，我们现在来看看CSS文件是怎样编写的。

我们首先要用到HTML语法标签中的分区标识div和段落标识符p。这里我们使用div，使用p情况是一样的。其次，我们得掌握的语法标记，它并不复杂，看一下下面的例子就明白了：div{color:red;font-size:11pt;font-family:宋体}

上例中，我们把字体设置为：颜色——红；大小——11个点阵；字体——宋体。这样，往后在HTML网页文件中凡包含在<div>和</div>之间的文字，只要不另外作font设置，这些文字将以宋体显示，字体颜色为红，大小是11个点阵。

我们还可以从上面的例子中得知，CSS语法的编写要点是：

标记{内容1;内容2;内容3;……;内容n}

上例代码中，div即是一个“标记”，大括号里面的即是“内容”，“内容”里用小角冒号“:”隔开参数和参数值，而每一个“内容”之间用小角分号“;”隔开，理论上，“内容”可以是任意多的，根据你的需要尽管设置好了。值得注意的是，“标记”我们也可以自定义，比如：div.red，div.blue，p.red，p.blue，也可以把“.”前面的div和p去掉，简单记成.red，.blue。至于CSS语法的其他相关知识，请参阅有关材料。

好了，我们可以编写CSS文件了。请在你的网页文件夹的根目录里建立一个名为css文件夹（注意用小写，有些空间不支持大写文件/文件夹名），这个文件夹将存放我们将要编写的CSS文件。下面是一个完整的CSS文件清单，你可以用记事本编写，编写完后通过“另存为”把文件保存为font_setting.css（你也可以保存为其他的名称，但后缀名一定是.css并在HTML文件中引用时使用正确的CSS文件名）。

.red{color:red;font-size:18pt;font-family:华文行楷}
.blue{color:blue;font-size:26pt;font-family:华文彩云}
.yellow{color:yellow;font-size:30pt;font-family:华文仿宋}
.pink{color:pink;font-size:40pt;font-family:华文隶书}

在以上CSS文件内容清单里，我们定义了四种字体设置：红、蓝、黄、粉红，每种颜色的字体和字体大小也不一样。你还可以根据需要设置更多的字体设置，记得所定义的“标记”前面一定得有小角符号“.”，如“.red”（red可用其他的名称）。

CSS文件编写好了，下面的工作就是如何在HTML文件中调用它来控制我们的字体了。现在我们在我们的网页文件夹的根目录下建立一个网页文件，文件名为test.html，它的内容清单如下：

<html>
<head>
    <title>CSS测试</title>
        <link   rel=stylesheet   href="css/font_setting.css"   type="text/css">
    </head>
<body>
<div   class="red">css文件调用测试</div>
<div   class="blue">css文件调用测试</div>
<div   class="yellow">css文件调用测试</div>
<div   class="pink">css文件调用测试</div>
<div>css文件调用测试</div>
</body>
</html>

上面的网页代码要点分析：

一、用<link>连接CSS文件。

这里，<link>语句中，属性rel和type值总是固定的，href则指明CSS文件所在目录，我们应该根据事先编好的CSS文件所在目录来指定，可以是相对路径，也可以是绝对路径。

二、用class属性具体定义字体。

在HTML代码中，正文内容总是放在<body>和</body>之间。请观察上面HTML代码中的调用方式，你会发现，在<div>语句里，前四句都有“class="…"”字样（等号后面的小角双引号可要可不要），class就是用来指定标记属于何种样式的类别。第五句我们没有加入class属性，意在让大家比较一下使用和不使用class属性的效果。

现在你可以打开test.html文件查看效果了。在浏览器里，如果效果正如你所设置的那样，那么，请让黑马恭喜你！如果不是，不要担心，一定有什么错误了，如引用CSS文件的路径名和文件名错误、代码有问题等，请再阅读一遍本文，然后再修改你的代码，你会成功的。

在本地机运行成功后，你就可以上传你的CSS文件和网页文件了。一定要注意：在服务器里，CSS文件和网页文件所在的目录应该与在本地磁盘所在的目录是相一致的。