HTML的外部样式演示案例

前面咱们讲了html的行内样式以及html的页内样式,今天咱们讲html样式的最后一种:html的外部样式。

这个样式具体怎么用呢?首先我们需要创建三个文档,一个是文件夹(随便命名),一个是.css文件,还有一个是.html文件,然后将.css文件和.html文件放到前面的文件夹中。如图所示:

HTML的外部样式演示案例所需文件
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文件的调用,也就是对外部样式的引用,没有这段代码则两个文件就没有关系。

经过引用,其最终的演示效果如下图所示:

HTML外部样式的演示效果图
HTML外部样式的演示效果图

说明:

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

(0)
上一篇 2017年7月5日 下午4:11
下一篇 2017年7月6日 下午4:12

发表评论

登录后才能评论

18721508948

2692003558@qq.com

微信