样式导入方式总结

link与import

<link href="index.css" rel="stylesheet">

  1. <style type="text/css">
  2. @import "index.css";
  3. </style>

不同点

  • link除了引用样式文件,还可以引用图片等资源文件,而import只引用样式文件

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" sizes="any" mask href="//www.baidu.com/img/baidu.svg">
<link rel="search" type="application/opensearchdescription+xml" href="/content-search.xml" title="百度搜索" />

    • 兼容性不同,link不存在兼容性的问题,import在IE5以上支持,是css2.1新增的
    • 在样式表文件可以使用import导入其它的样式表文件,而link不可以
    • link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
    • link支持使用Javascript控制DOM去改变样式;而@import不支持。
      • import的写法比较多

        @import ‘style.css‘ //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
        @import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
        @import url(style.css) //Windows NS4, Macintosh NS4不识别
        @import url(‘style.css‘) //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
        @import url("style.css") //Windows NS4, Macintosh NS4不识别

        推荐使用 @import url(index.css);

时间: 2024-12-24 21:39:17

样式导入方式总结的相关文章

Web前端面试指导(十一):样式导入有哪些方式?

样式导入方式 link import 使用方式 link的使用 [css] view plain copy  <link href="index.css" rel="stylesheet"> import的使用 [css] view plain copy  <style type="text/css"> @import "index.css"; </style> 不同点 link除了引用样式

css基础语法一(选择器与css导入方式)

页面中,所有的CSS代码,需要写入到<style></style>标签中.style标签的type属性应该选择text/css,但是type属性可以省略. CSS修改页面中的所有标签,必须借助选择器选中.选择器中,可以写多对CSS属性,用{}包裹: 每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔.         选择器{                    属性1:属性值1;                    属性2:属性值2;                 

(5)css样式导入

样式的组成 1.选择器:将样式与页面中的某一个或某些标签建立联系,就要使用选择器,在head标签下写一个style标签,将需控制参数的标签名写在这个style标签下,设置属性即可通过css来控制html的样式,这就是选择器 2.作用域:作用域就是style标签下需要控制的标签名后面的{},这个{}内的参数就是作用域参数 3.样式块:作用域里面的参数语句就是样式语句,这个作用域就是样式块 css的引入方式 1.行间式样式导入,直接将css样式写在标签的style属性中 优点:对样式操作简单粗暴 缺

css的三种导入方式

内联样式表 <p style="font-size:50px; color:blue">css内联样式表</p> 内部样式表 <style type="text/css"> p{ font-size: 100px; color: red; } </style> <p>css内部样式表</p> 外部样式表 创建一个cssTest.css的css文件 p{ font-size: 50px; colo

vue router 导入方式

vue router 的路由导入方式可用以下两种: 一:直接导入 import Hello from '@/components/Hello' @是在webpack.base.conf.js 配置: resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') } } 二 :路由懒加载方式 当打包构建应用时,Javascript包会变得非常大

Android使用zxing(二维码工具类)类库的导入方式

zXing导入比较麻烦,很多新人要导入很久,关键是还不一定导入的对.下面总结下导入方式.希望对大家有所帮助.

013-HQL中级3-Hive四种数据导入方式介绍

Hive的几种常见的数据导入方式这里介绍四种:(1).从本地文件系统中导入数据到Hive表:(2).从HDFS上导入数据到Hive表:(3).从别的表中查询出相应的数据并导入到Hive表中:(4).在创建表的时候通过从别的表中查询出相应的记录并插入到所创建的表中. 一.从本地文件系统中导入数据到Hive表先在Hive里面创建好表,如下: hive> create table wyp > (id int, name string, > age int, tel string) > R

HBase 实战(1)--HBase的数据导入方式

前言: 作为Hadoop生态系统中重要的一员, HBase作为分布式列式存储, 在线实时处理的特性, 备受瞩目, 将来能在很多应用场景, 取代传统关系型数据库的江湖地位. 本篇博文重点讲解HBase的数据导入, 描述三种方式, Client API, Bulkload, 以及Hive Over HBase. *). Client API实现借助HBase的Client API来导入, 是最简易学的方式. Configuration config = HBaseConfiguration.crea

HIVE几种数据导入方式

HIVE几种数据导入方式 今天的话题是总结Hive的几种常见的数据导入方式,我总结为四种:(1).从本地文件系统中导入数据到Hive表:(2).从HDFS上导入数据到Hive表:(3).从别的表中查询出相应的数据并导入到Hive表中:(4).在创建表的时候通过从别的表中查询出相应的记录并插入到所创建的表中.我会对每一种数据的导入进行实际的操作,因为纯粹的文字让人看起来很枯燥,而且学起来也很抽象.好了,开始操作! 一.从本地文件系统中导入数据到Hive表 先在Hive里面创建好表,如下: hive