青岛网站建设
网站首页 联系我们

资讯中心

联系方式
  • 地址:青岛市李沧区金水路772号
  • 电话:0532-87606070
  • 手机:13969865210
  • 邮箱:web@toorain.net

网站设计制作
青岛网站制作之HTML引入CSS的四种方式
时间:2013-11-19 11:45:06  来源:青岛网站制作  点击:1514

    对于青岛网站建设公司的朋友对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的方法,希望对新手朋友们有所帮助。

本文网址:http://www.toorain.net/news_view_294.aspx