在html网页中引入css样式表主要有一下四种方法

1、行内引入

<p style="width:100px;height:40px;color:red;"></p>

2、嵌入式

<style type="text/css">

  p{

    width:100px;

    height:40px;

    color:red;

  }

</style>

3、导入式

<style type="text/css">

  @import "style.css";

</style>

4、链接式

<link href="style.css" rel="stylesheet" type="text/css">

rel="stylesheet"  不能缺少,不然可能会使页面样式加载不了

css加载link和@import的区别,即3和4的区别

1)老祖宗的差别。link属于XHTML标签,而@import完全是css提供的一种方式。link标签除了可以加载css外,还可以做很多其他的事情,比如定义RSS,定义rel连接属性等,@import就只能加载css

2)加载顺序的差别。当一个页面被加载的时候(就是浏览器浏览的时候),link引用的css会同时被加载,而@import引用的css会等到页面全部被下载完再加载。所以有时候浏览@import加载css的页面时,开始会没有样式(就是闪烁),网速慢的时候比较明显

3)兼容行的差别。由于@import是css2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签没有此问题

4)使用DOM控制样式时的差别。当使用JavaScript控制DOM去改变样式的时候,只能使用link标签,因为@import不是DOM可以控制的

从上面的分析来看,还是link标签比较好。

html导入css样式的方法的更多相关文章

  1. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  2. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  3. 重温JavaScript获取CSS样式的方法(兼容各浏览器)

    众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...

  4. jquery操作css样式的方法

    jquery操作css样式的方法(设置和获取)

  5. HTML文档中应用css样式的方法总结

    在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式 一.link标签链接外部样式表 先看一条较为标准的l ...

  6. 20190422-外部导入CSS样式之link、CSS@import、Sass分音

    写在前面乱七八糟的前言:今天wuliMR黄问了一个问题,Sass的分音与link标签都是导入外部样式的,有什么不同,这真是个好问题,因为本白着实没想过,也不知道,不过没关系,成功的背后总有一个默默无闻 ...

  7. 用原生JS读写CSS样式的方法总结

    为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了!   一.可以通过DOM节点对象的style对象(即CSSStyleDe ...

  8. JS中获取CSS样式的方法

    1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...

  9. HTML使用CSS样式的方法

      在html网页中引入css样式表主要有一下四种方法 1.行内引入 <p ></p> 2.嵌入式 <style type="text/css"> ...

随机推荐

  1. border:none;与border:0;的区别

    border:none表示边框样式无,border:0表示边框宽度为0;当定义了border:none,即隐藏了边框的显示,实际就是边框宽度为0. 当定义边框时,必须定义边框的显示样式.因为边框默认样 ...

  2. MongoDB(五)mongo语法和mysql语法对比学习

    我们总是在对比中看到自己的优点和缺点,对于mongodb来说也是一样,对比学习让我们尽快的掌握关于mongodb的基础知识. mongodb与MySQL命令对比 关系型数据库一般是由数据库(datab ...

  3. tomcat 7/8 启动非常慢的解决方法

    在日志中发现启动慢的地方: 2016-11-14 09:31:30.522 [localhost-startStop-1] INFO o.s.c.s.DefaultLifecycleProcessor ...

  4. QRCode二维码生成

    pom配置 <dependency> <groupId>com.github.cloudecho</groupId> <artifactId>qrcod ...

  5. IE6-8下自定义标签的表现

    IE6-8是支持自定义标签,但只支持<xxx-yyy />这样的形式,它会翻译成<xxx-yyy></xxx-yyy> 如果你想内套子标签会失败, <ms-k ...

  6. HDOJ(1348)二维凸包

    Wall http://acm.hdu.edu.cn/showproblem.php?pid=1348 题目描述:有个国王想在他的城堡外面修围墙,围墙与城堡的最小距离为L,要求围墙长度最短.求围墙的长 ...

  7. javascript判断对象

    var assert = require('chai').assert; describe('Array', function() { describe('#indexOf()', function( ...

  8. python3.5------用户的三次验证

    笔者QQ: 360212316 逻辑图 代码 #/usr/bin/python # -*- coding: utf-8 -*- lock = open("black_user_list.tx ...

  9. php电话号码正则表达式常用例子

    电话号码正则表达式(支持手机号码,3-4位区号,7-8位直播号码,1-4位分机号) 02   03 ((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{ ...

  10. LeetCode Bulb Switcher 319

    变换灯泡颜色 There are n bulbs that are initially off. You first turn on all the bulbs. Then, you turn off ...