前面咱们讲了html的行内样式以及html的页内样式,今天咱们讲html样式的最后一种:html的外部样式。
这个样式具体怎么用呢?首先我们需要创建三个文档,一个是文件夹(随便命名),一个是.css文件,还有一个是.html文件,然后将.css文件和.html文件放到前面的文件夹中。如图所示:
然后在html文件中放入以下的演示代码:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<meta>
<title>html外部样式演示</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”keywords” content=”外部样式”>
<meta name=”description” content=”这是博主为大家做的html外部样式演示案例”>
<link href=”演示.css” rel=”stylesheet” type=”text/css” />
</meta>
<body>
<font>
这是博主为大家做的html外部样式演示案例
</font>
</body>
</html>
在.css文件中放入下面的代码:
font
{
color:red;
}
注意上面.html文件中的红色字体部分,这段代码是对.css文件的调用,也就是对外部样式的引用,没有这段代码则两个文件就没有关系。
经过引用,其最终的演示效果如下图所示:
说明:
1、.html文件跟咱们前面说的几乎没有什么区别,只不过是多了一段代码:<link href=”演示.css” rel=”stylesheet” type=”text/css” /> 。href=””里放的是我们.css文件的存放路径。其他的属性不用做处理,直接复制过来就可以。
2、.css文件是专门用来修饰我们的样式的,但需要将修饰的标签写出来,并用{}括起来,里面写上自己的样式。例如博主这里的代码案例用的是<font>标签,所以在.css里写的就是<font>的样式,即字体为红色。
当然,考虑到初学html代码的同志,上述只是对html外部样式的一个简单介绍,后面还会对相关的代码及样式做介绍,例如“div+css”页面布局等等,敬请关注!
对本节博主所讲的html的外部样式调用案例,如果大家还有疑问,请咨询博主或给博主发邮件,爱你怎么整。 [嘻嘻]
本文来自网络整理,标题:HTML的外部样式演示案例,网址:https://www.seoshisha.com/jianzhan/html/waibu.html