2013/11/19 11:45:06 阅读()
对于青岛网站建设公司的朋友对html一般都很熟悉。尤其是在进行青岛网站制作时。青岛网站建设的设计人员在进行青岛网站制作时经常能够碰到要在html中导入css的情况。当然在写代码的朋友应该也有好几种方法,下面青岛网络公司小编讲整理的自己使用的四种html引入css的方法分享一下,其实这个文章也是在网络上看到。加上了点自己的看法。一般就以下四种方法。
一、行内式:直接在页面的标签里加<div style="border:1px red solid;">测试信息</div>
例如:
<H1 style="color:white;backgroud-color:blue">行内式引入CSS</H1>
这种方法仅对此<H1>标识有效,即“行内式引入CSS”在网页中以蓝底白字显示。现在用的很少了,有很多公司不了解前端技术的领导还对这种写法很痛恨。认为html里不能出现css命令。其实有时候使用下也没有什么大问题。比如通用性差,效果特殊,使用css命令较少,并且不常改动的地方,使用这种方法反而是很好的选择。
二、内嵌式:在head部分加入以下代码。
<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>
1、样例:
<style type="text/css">
h1
{
color:wihite;
backgroud-color:blue;
}
</style>
这种方法网页中所有的<h1>标识内容均是以蓝底白字显示的使用情况不多,一般常见于访问量大的门户网站或者访问量较大的企业网站的首页。与链接的方法比起来,优点突出,弊端也明显。优点:速度快,所有的CSS控制都是针对本页面标签的,没有多余的css命令;再者不用外链css文件。直接在html文档中读取样式。缺点:改版麻烦,单页面臃肿,css不能被其他html引用造成代码量相对较多,维护也麻烦些。但是采用这种方法的公司大多有钱,对他们来说用户量是关键,他们不缺人进行复杂的维护工作。
三、导入式
例:<style type="text/css">
@import "mycss.css";
</style>
这种方法一般不多见,可以说很多人都没有见过。它主要用在CSS文件数量庞大的负责的系统中。另外@important本身是一个CSS命令,是放在CSS文件里的,这个跟下面要说的LINK标签有很大的区别。
四、链接式:在head部分加入<link rel="stylesheet" type="text/css" href="mycss.css"/>,引入外部的CSS文件。
例如:<link href="mycss.css" rel="stylesheet" type="text/css" />
这种方法可以说是现在占统治地位的引入方法。如同IE与浏览器。这也是最能体现CSS特点的方法;最能体现DIV+CSS中的内容与显示分离的思想,也最易改版维护,代码看起来也是最美观的一种。
下面重点来看看常用的两张方式:导入式与链接式的区别吧。
1、首先要说明的是两者区别不大,导入式是由CSS规范所实现的,链接式是由HTML规范所实现的;
2、导入式在网页加载之后再载入CSS文件,链接式在网页加载之前就载入CSS文件;
以上青岛网站建设就是常用的四种导入css的方法,希望对新手朋友们有所帮助。
扫一扫关注我们
访问手机版