在html网页文件中调用css文件

上传人:第*** 文档编号:38885876 上传时间:2018-05-09 格式:DOC 页数:2 大小:16.53KB
返回 下载 相关 举报
在html网页文件中调用css文件_第1页
第1页 / 共2页
在html网页文件中调用css文件_第2页
第2页 / 共2页
亲,该文档总共2页,全部预览完了,如果喜欢就下载吧!
资源描述

《在html网页文件中调用css文件》由会员分享,可在线阅读,更多相关《在html网页文件中调用css文件(2页珍藏版)》请在金锄头文库上搜索。

1、在在 HTML 网页文件中调用网页文件中调用 CSS 文件文件 CSS 作为效率高、灵活性强而被广泛地应用于网页制作中。难得的是,CSS 既可以以各种方 式嵌入 HTML 文件中,也可以以文件的形式独立存在被而不同的 HTML 文件随时调用。本 文将讨论 CSS 文件如何编写以及 CSS 文件如何被 HTML 网页文件调用。以设置字体为例,我们现在来看看 CSS 文件是怎样编写的。我们首先要用到 HTML 语法标签中的分区标识 div 和段落标识符 p。这里我们使用 div,使用 p 情况是一样的。其次,我们得掌握的语法标记,它并不复杂,看一下下面的例 子就明白了:divcolor:red;f

2、ont-size:11pt;font-family:宋体上例中,我们把字体设置为:颜色红;大小11 个点阵;字体宋体。这样, 往后在 HTML 网页文件中凡包含在和之间的文字,只要不另外作 font 设置,这 些文字将以宋体显示,字体颜色为红,大小是 11 个点阵。我们还可以从上面的例子中得知,CSS 语法的编写要点是:标记内容 1;内容 2;内容 3;内容 n上例代码中,div 即是一个“标记”,大括号里面的即是“内容”, “内容”里用小角冒号“:” 隔开参数和参数值,而每一个“内容”之间用小角分号“;”隔 开,理论上, “内容”可以是任意 多的,根据你的需要尽管设置好了。值得注意的是, “

3、标记”我们也可以自定义,比 如: div.red,div.blue,p.red,p.blue,也可以把“.”前面的 div 和 p 去掉,简单记成.red,.blue。 至于 CSS 语法 的其他相关知识,请参阅有关材料。好了,我们可以编写 CSS 文件了。请在你的网页文件夹的根目录里建立一个名为 css 文件夹(注意用小写,有些空间不支持大写文件/文件夹名) ,这个文件夹 将存放我们将要 编写的 CSS 文件。下面是一个完整的 CSS 文件清单,你可以用记事本编写,编写完后通过 “另存为”把文件保存为 font_setting.css(你也可以保存为其他的名称,但后缀名一定是.css 并在

4、HTML 文件中引用时使用正确的 CSS 文件名) 。.redcolor:red;font-size:18pt;font-family:华文行楷 .bluecolor:blue;font-size:26pt;font-family:华文彩云 .yellowcolor:yellow;font-size:30pt;font-family:华文仿宋 .pinkcolor:pink;font-size:40pt;font-family:华文隶书在以上 CSS 文件内容清单里,我们定义了四种字体设置:红、蓝、黄、粉红,每种颜 色的字体和字体大小也不一样。你还可以根据需要设置更多的字体设置,记得所定义的“

5、标 记”前面一定得有小角符号“.”,如“.red”(red 可用其他的名称) 。CSS 文件编写好了,下面的工作就是如何在 HTML 文件中调用它来控制我们的字体了。 现在我们在我们的网页文件夹的根目录下建立一个网页文件,文件名为 test.html,它的内容清单如下:CSS 测试css 文件调用测试 css 文件调用测试 css 文件调用测试 css 文件调用测试 css 文件调用测试上面的网页代码要点分析:一、用连接 CSS 文件。语句放在和之间,上述 HTML 代码中,以下这句就是连接 CSS 语法 式样:这里,语句中,属性 rel 和 type 值总是固定的,href 则指明 CSS

6、文件所在目录, 我们应该根据事先编好的 CSS 文件所在目录来指定,可以是相对路径,也可以是绝对路径。二、用 class 属性具体定义字体。在 HTML 代码中,正文内容总是放在和之间。请观察上面 HTML 代码中 的调用方式,你会发现, 在语句里,前四句都有“class=“”字样(等号后面的小角双 引号可要可不要) ,class 就是用来指定标记属于何种样式的 类别。第五句我们没有加入 class 属性,意在让大家比较一下使用和不使用 class 属性的效果。现在你可以打开 test.html 文件查看效果了。在浏览器里,如果效果正如你所设置的那 样,那么,请让黑马恭喜你!如果不是,不要担心,一定有什么错误了,如引用 CSS 文件 的路径名和文件名错误、代码有问题等,请再阅读一遍本文,然后再修改你的代码,你会 成功的。在本地机运行成功后,你就可以上传你的 CSS 文件和网页文件了。一定要注意:在服 务器里,CSS 文件和网页文件所在的目录应该与在本地磁盘所在的目录是相一致的。

展开阅读全文
相关资源
相关搜索

当前位置:首页 > 办公文档 > 其它办公文档

电脑版 |金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号