一、引入css的方式

在HTML中引入css的方法主要有4种：行内式、内嵌式、链接式和导入式。

1.行内式

<div style="background:yellow;"></div>

行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

2.内嵌式

<html>

    <head>

        <style>

             ..// 此处添加css代码

        </style>

    </head>

</html>

缺点是对于一个包含很多网页的网站，在每个网页中使用嵌入式，进行修改样式时非常麻烦。单一网页可以考虑使用嵌入式。

3.链接式

<link rel="stylesheet" href="css的路径" type="text/css" >

使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

4.导入式

<style type="text/css" media="screen">

@import url("CSS文件");

</style>

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。

二、link与@import的区别

1.：

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

2.：

link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

3.：

link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

4.：

ink支持使用Javascript控制DOM去改变样式；而@import不支持。

引入CSS文件的方式，以及link与@import的区别的更多相关文章

  1. CSS有哪些引入方式，link和@import的区别

    3种方式哦,行内样式.内部样式表.外部样式表 1. 行内样式又称为内联样式,直接在HTML标签的style属性中添加css. 会导致 HTML 代码变得冗长 2. 内部样式表又称为嵌入方式,是在HTM ...

  2. 引入CSS的方式、link和@import的区别

    引入CSS的方式有四种:内联方式.嵌入方式.链接方式.导入方式. 内联方式 内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS. <div style="back ...

  3. CSS的导入方式：link与import方式的区别

    在前端开发中,加载CSS样式文件有两种方式:link方式与import方式,它们之间的区别主要有以下几点: 1.兼容性不一样 link是一个HTML标签,所以它不存在兼容性问题,而import方式则具 ...

  4. 如何使用Jquery 引入css文件

    如何使用Jquery 引入css文件: $("head").append("<link>");var toolbarCss = $("he ...

  5. 引入css文件时，css link和@import区别

    这里link与@import介绍的是html引入css的语法单词.两者均是引入css到html的单词. 一.了解基本 1.link语法结构 <link href="CSSurl路径&q ...

  6. 页面引入css用link和import的区别

    假设有一个css文件a.css,文件里的内容如下: p { font-size: 18px; } 现在分别使用两种方式引入a.css: 1.使用html的link标签 <link rel=&qu ...

  7. web前端（7）—— 了解CSS样式，引入css样式的方式

    CSS 在前面大概的介绍了css,从本片博文开始,会详细的介绍它,在最开始介绍web前端时,打开百度首页,当时我提出了一个问题,为什么百度首页的输入框可以放在正中间,就是由于有css的控制,我们可以打 ...

  8. 添加css的方式：link与@import区别

    如何在html中添加css? 在html中设置css共有三种方式,分别是: 行内式 内嵌式 导入式-link 导入式-@import 1.行内式.即在html标签中的style属性中设置css,值得注 ...

  9. jquery，js引入css文件，js引入头尾

    jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...

随机推荐

  1. 《快学Scala》——控制结构和函数

    条件表达式 在Scala中if/else表达式有值,这个值就是跟在if或else之后的表达式的值.例如: if (x > 0) 1 else -1 上述表达式的值是1或-1,具体是哪一个取决于x ...

  2. 利用DNS AAAA记录和IPv6地址传输后门

    0x00 前言 在本文中,我想解释如何在DNS流量中利用IPv6地址(AAAA)记录传输Payload.在我之前的文章中,我解释了如何利用DNS和PTR记录,现在我们将讨论AAAA记录. 本文分为两部 ...

  3. 【SoDiaoEditor电子病历编辑器】阶段性更新--新增复选框、日期控件、表格排版支持等

    转眼距离上一次v2正式发布已经过去一个半月了.github期间不定期push了二十几次,同时感谢分布在广州.福建.上海.北京的一众小伙伴,正是你们给出的建议,才让SoDiaoEditor不断完善. 我 ...

  4. String深度解析

    文章出处:http://my.oschina.net/xiaohui249/blog/170013 一.引题 String类型是比较特殊的一种类型,同时也是面试经常被问到的一个知识点,本文结合java ...

  5. ztree实现权限功能（横向显示）

    最近在做权限功能的时候,采用的ztree实现的,但是产品要求最后一层的权限节点要横向显示.开始在网上找的解决方案是用css样式把最后一层的display设置为inline.在我本地电脑上看了下.效果不 ...

  6. Java类加载和卸载的跟踪

    博客搬家自https://my.oschina.net/itsyizu/blog/ 什么是类的加载和卸载 Java程序的运行离不开类的加载,为了更好地理解程序的执行,有时候需要知道系统加载了哪些类.一 ...

  7. 【PHP】PHP从入门到精通（一）——想学习PHP的小伙伴的福利来了！

     PHP从精通到入门 (一)PHP简介和基本知识 PHP(外文名:PHP: Hypertext Preprocessor,中文名:"超文本预处理器")是一种通用开源脚本语言.语法吸 ...

  8. 解决ubuntu的gedit显示中文乱码问题

    http://www.cnblogs.com/zhcncn/p/4032321.html

  9. sublime工具篇

    sublime快捷键的应用 熟悉掌握sublime快捷键,提高编码效率,享受编码乐趣. window操作系统常用快捷键 win+D:快速显示桌面     win+方向键:最大化最小化窗口  win+L ...

  10. Mac苹果系统 多系统启动：The rEFInd Boot Manager

    苹果系统 多系统启动 下载安装REFIT: 首先安装一下:REFIT, 在这个页面下载: http://refit.sourceforge.net/#download 选择mac disk image ...