在网页文件中调用CSS文件
◇ 黑马
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>语句放在<head>和<head>之间，上述HTML代码中，以下这句就是连接CSS语法式样：
<link rel=stylesheet href="css/font_setting.css" type="text/css">
这里，<link>语句中，属性rel和type值总是固定的，href则指明CSS文件所在目录，我们应该根据事先编好的CSS文件所在目录来指定，可以是相对路径，也可以是绝对路径。
二、用class属性具体定义字体。
在HTML代码中，正文内容总是放在<body>和</body>之间。请观察上面HTML代码中的调用方式，你会发现，在<div>语句里，前四句都有“class="…"”字样（等号后面的小角双引号可要可不要），class就是用来指定标记属于何种样式的类别。第五句我们没有加入class属性，意在让大家比较一下使用和不使用class属性的效果。
现在你可以打开test.html文件查看效果了。在浏览器里，如果效果正如你所设置的那样，那么，请让黑马恭喜你！如果不是，不要担心，一定有什么错误了，如引用CSS文件的路径名和文件名错误、代码有问题等，请再阅读一遍本文，然后再修改你的代码，你会成功的。
在本地机运行成功后，你就可以上传你的CSS文件和网页文件了。一定要注意：在服务器里，CSS文件和网页文件所在的目录应该与在本地磁盘所在的目录是相一致的。
分享到：
相关推荐
当我们谈论“CSS调用其他CSS”时，我们指的是在一个CSS文件中引用或链接到另一个CSS文件，以实现样式的复用、模块化和代码组织。这在大型项目中尤其常见，因为可以将不同部分的样式分离到各自的文件中，便于维护和...
1. **全局引入**：你可以在Unigui项目的`main.js`或`entry.js`这样的入口文件中引入外部JS。这通常用于加载库或框架，如jQuery、Lodash等。例如： ```javascript import 'path/to/your/external-js-file.js'; ```...
在Web应用中，每次用户访问页面时，浏览器都需要下载所有的外部资源，包括js和css文件。如果这些文件较大，会延长加载时间，导致用户体验下降。压缩文件可以显著减少网络传输的数据量，从而加快页面加载速度。 Java...
嵌入视频和音频 调用网页多媒体文件;调用网页中的音频;用法示例;用法示例;用法示例;调用网页中的视频文件;用法示例;用法示例;总结;;小任务 ;THANKS
在网页设计中，为了增强用户体验和情感表达，经常会使用各种表情图标，而微信emoji表情由于其丰富多样，深受用户喜爱。本教程将详细介绍如何通过简单的步骤，在网页上直接显示微信emoji表情，使得网页内容更加生动...
在这个场景中，"dwgviewx"是一个关键的标签，暗示我们讨论的是一个名为DWGViewX的特定组件或控件，它允许开发者在网页上集成CAD文件的查看功能。 DWGViewX可能是一个ActiveX控件或者JavaScript库，专门用于在Web...
在C++编程中，操作CSS文件通常涉及到读取文件内容、解析CSS规则、修改样式以及重新写入文件等步骤。为了提高效率和代码的可维护性，我们可以编写专用的函数来处理这些任务。标题提到的`read_css`和`write_css`函数...
当项目js（css）文件使用越来越多，js 文件的加载也成了性能上的一个问题，此资源能够在页面全部加载完成后异步加载js等资源文件，它可以顺序加载资源列表，也可以并发加载资源列表，它包含一个方法调用接口：...
在网页开发中，CSS的优化是一项关键任务。随着网站功能的复杂性和样式的丰富性增加，CSS文件往往会变得庞大而臃肿，其中可能包含了大量的冗余或从未被引用的规则。这些无用的CSS不仅占用网络带宽，还可能导致浏览器...
在【压缩包子文件的文件名称列表】"web-design"中，我们可以推测这是一个关于网页设计的项目文件夹，可能包含了HTML文件、CSS文件、JavaScript文件以及其他资源文件，如图片、字体或音频视频文件。这些文件共同构成...
下面将详细介绍如何在ASP.NET中根据屏幕分辨率加载不同的CSS文件。 1. **服务器端检测**： - ASP.NET允许我们使用C#代码在服务器端获取用户浏览器的分辨率。可以使用`Request.Browser.ScreenPixelsWidth`和`...
在本场景中，我们探讨的是如何根据用户的屏幕分辨率来调用不同的CSS（Cascading Style Sheets）文件，以实现响应式网页设计。响应式设计能够使网站在不同设备上，如桌面电脑、平板电脑和手机上，呈现出最佳的视觉...
本文将详细探讨MUI中的JavaScript文件与CSS文件如何协同工作，以实现强大的功能和美观的界面。 一、MUI的JS文件 MUI的JavaScript文件主要负责交互逻辑和组件的动态行为。这些文件通常包括基础库、组件库以及特定...
此外，JS还可以通过CSSOM（CSS对象模型）加载、解析和修改外部CSS文件。 2. **JS与C++交互**：在浏览器环境中，JS引擎通常由C++编写，因此在引擎内部，JS与C++有着紧密的联系。不过，对于开发者来说，直接的C++和JS...
在这个文件上传界面中，css3被用来设计上传按钮的样式，以及在用户选择文件后展示的动画效果。例如，可以使用`:hover`伪类来改变鼠标悬停时按钮的外观，使用`transition`属性创建平滑的过渡效果，或者利用`@...
在上述代码中，我们创建了一个`<link>`元素用于引入CSS，然后根据窗口宽度的变化改变`href`属性，加载对应的CSS文件。注意，这通常在页面加载完成后或窗口大小改变时执行。 此外，还可以使用`matchMedia()`函数，它...
在这个例子中，`icon_font.css`是我们转换后的CSS文件，它包含了字体的引入和图标的Unicode码。`font-family`定义了我们要使用的自定义字体，`content`属性则设置了图标的内容，即对应的Unicode码。 这种方法的优点...
当需要离线使用这些资源或者进行批量处理时，如何下载CSS文件中的图片就成为了一个重要的操作。下面，我们将深入探讨这个话题，以及如何使用Java来实现这一功能。 首先，我们需要理解CSS中的图片引用方式。图片可以...
如果需要在 CSS 文件中添加额外的样式信息，那么使用 @import 更加合适，因为 @import 是 CSS 的一个标签，可以直接在 CSS 文件中使用。 五、总结 link 和 @import 都可以用来引用外部的样式文件，但它们的应用...
在PHP开发中，有时我们需要处理CSS文件中的图片资源，例如将远程图片下载到本地服务器以提高网站性能或便于管理。这个“php获取CSS文件中图片地址并保存到本地的类”提供了解决这一问题的方案。下面将详细介绍该类的...