3种方式哦,行内样式、内部样式表、外部样式表

1. 行内样式又称为内联样式,直接在HTML标签的style属性中添加css.

会导致 HTML 代码变得冗长

2. 内部样式表又称为嵌入方式,是在HTML<head>的<style>标签中写css代码

因为嵌入的 CSS 只对当前页面有效,所以当多个页面需要引入相同的 CSS 代码时,这样写会导致代码冗余,也不利于维护。

3. 外部样式表可以通过,HTML 头部的 <head> 标签引入外部的 CSS 文件.

(1)、链接式 :
<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

(2)、导入式
<style type="text/css">
  @import url("css文件路径");
</style>

区别:

1. link属于XHTML标签,除了加载CSS之外,还可以定义其他业务,@import属于css2.1,只能加载CSS。

2. link 引入CSS时,在页面载入时同时加载,@import在页面加载完全后,再加载css.

3. link无兼容性问题, @import是在CSS2.1提出的,故只可在 IE5+ 才能识别,低版本的浏览器不支持。

4. 可以通过JS操作DOM,插入link标签来改变样式。

CSS 权重优先级顺序简单表示为:

!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

CSS有哪些引入方式,link和@import的区别的更多相关文章

  1. css加载方式link和@import的区别!

    本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别. 1. 老祖宗的差别.link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可 ...

  2. 引入CSS文件的方式,以及link与@import的区别

    一.引入css的方式 在HTML中引入css的方法主要有4种:行内式.内嵌式.链接式和导入式. 1.行内式 <div style="background:yellow;"&g ...

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

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

  4. css 样式引入的方法 link 与import的区别

    <link> 元素所参考的样式用户可以自由的选择加以改变,而导入的样式表单就自动的与剩下的样式表融合在一起了 CSS与HTML文档结合的4中方法:1 使用<link>元素链接到 ...

  5. CSS优先级、引入方式、Hack

    优先级 important > 内联(1,0,0,0) > id(1,0,0) > class(1,0) > element(1) > *通配符 css引入方式 方式一: ...

  6. CSS三种引入方式:内联、页级、外联

    1.内联CSS 内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷.高效:但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度不建议采用.通常内联CSS ...

  7. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  8. 前端 CSS 三种引入方式

    CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...

  9. 由link和@import的区别引发的CSS渲染杂谈

    我们都知道,外部引入 CSS 有2种方式,link标签和@import. 它们有何本质区别,有何使用建议,在考察外部引入 CSS 这部分内容时,经常被提起. 如今,很多学者本着知其然不欲知其所以然的学 ...

  10. 006 CSS三种引入方式

    CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...

随机推荐

  1. Java遍历Map的4种方式

    public static void main(String[] args) { // 循环遍历Map的4中方法 Map<Integer, Integer> map = new HashM ...

  2. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之八 || API项目整体搭建 6.3 异步泛型仓储+依赖注入初探

    代码已上传Github+Gitee,文末有地址 番外:在上文中,也是遇到了大家见仁见智的评论和反对,嗯~说实话,积极性稍微受到了一丢丢的打击,不过还好,还是有很多很多很多人的赞同的,所以会一直坚持下去 ...

  3. 如何在ASP.NET Core程序启动时运行异步任务(2)

    原文:Running async tasks on app startup in ASP.NET Core (Part 2) 作者:Andrew Lock 译者:Lamond Lu 在我的上一篇博客中 ...

  4. ArticleRemoveDelDialog【基于AlertDialog的回收删除对话框】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 回收删除对话框,继承AlertDialog. 仿照钉钉的长按弹出的移除置顶对话框. 效果图 代码分析 继承AlertDialog: ...

  5. matlab常用目录操作

    总结matlab下常用到的目录操作 添加当前文件夹及其子文件夹至搜索路径 % add path rootDir = fileparts(mfilename('fullpath')); addpath( ...

  6. java内存溢出的情况解决方法

    内存溢出虽然很棘手,但也有相应的解决办法,可以按照从易到难,一步步的解决. 第一步,就是修改JVM启动参数,直接增加内存.这一点看上去似乎很简单,但很容易被忽略.JVM默认可以使用的内存为64M,To ...

  7. 微信公众号开发C#系列-5、用户和用户组管理-支持同步

    1.概述 眼前时下流行的经济有个叫粉丝经济,粉丝带动收益.一个好运营良好的公众号肯定会有一大批的粉丝团,如何挖掘粉丝来产生效益,是微信营销的关键.微信公众号后台本身提供了粉丝(用户)与用户分组的管理, ...

  8. SLAM+语音机器人DIY系列:(二)ROS入门——2.ROS系统整体架构

    摘要 ROS机器人操作系统在机器人应用领域很流行,依托代码开源和模块间协作等特性,给机器人开发者带来了很大的方便.我们的机器人“miiboo”中的大部分程序也采用ROS进行开发,所以本文就重点对ROS ...

  9. SLAM+语音机器人DIY系列:(七)语音交互与自然语言处理——1.语音交互相关技术

    摘要 这一章将进入机器人语音交互的学习,让机器人能跟人进行语音对话交流.这是一件很酷的事情,本章将涉及到语音识别.语音合成.自然语言处理方面的知识.本章内容: 1.语音交互相关技术 2.机器人语音交互 ...

  10. mysql命令行导入导出数据库

    导出:1.在命令行里,进入mysql安装根目录下的bin目录下比如:D:\Program Files\MySQL\MySQL Server 5.0\bin输入 mysqldump -uroot -p ...