20190422-外部导入CSS样式之link、[email protected]、Sass分音

写在前面乱七八糟的前言:今天wuliMR黄问了一个问题,Sass的分音与link标签都是导入外部样式的,有什么不同,这真是个好问题,因为本白着实没想过,也不知道,不过没关系,成功的背后总有一个默默无闻的百度君,一直在支持着我,┓( ´∀` )┏虽然我不叫成功,扯得有点远~还是早早进入正题吧。

目录

1、link标签

2、@import语法规则

3、link标签与@import语法规则的区别

4、为什么使用link不用@import

5、Sass的分音

内容

1、link标签

XHTML标签,用于定义文档与外部资源的关系

2、@import语法规则

2.1CSS语法规则,用于导入外部CSS样式

2.2写法

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

@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不识别

2.3注意事项

import规则一定要先于除了@charset的其他任何CSS规则

<style>
    #bgc{background-color: green}
    @import "index.css";
</style>
这样是不会生效滴,要改成
<style>
    @import "index.css";
    #bgc{background-color: green}
</style>

3、link标签与@import语法规则的区别

3.1引入方式

link链接式:

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

@import导入式:

<style type="text/css">   

    @import url("css/stylesheet.css");

</style>

3.2从属关系

link:XHTML标签,除加载CSS,还可定义RSS,rel链接属性,引用图片等资源文件

@import:CSS的语法规则,仅导入样式表

3.3兼容

link:无兼容性问题

@import:ie5以下不支持,不过现在ie5基本灭绝了吧~~哈哈哈哈

3.4加载顺序

link:引用时,页面载入同时加载

@import:引用时,需网页完全载入后加载

3.5DOM可控性

由于DOM方法基于文档,故

link可支持使用js控制DOM改变样式,而@import不支持

3.6导入其他样式表

样式表文件内可使用多个@import导入其他样式表文件,而link不行

4、为什么用link不用@import

4.1 每个@import都会产生一个新的http请求,消耗服务器资源

4.2 @import混合js文件时,在IE中引发资源文件的下载顺序被打乱(即使排列在@import后面的js文件先于@import下载),而且会打乱甚至破坏@import自身的并行下载

4.3 link混合@import会破坏并行下载,这会导致原本并行下载的样式变成一个一个的同步下载

4.4 仅用link标签,可确保样式在所有浏览器里面都能被并行且按照顺序被下载

4.5 如果import加载的样式比较大,容易出现加载延迟,甚至有闪屏的情况

5、Sass的分音(Partials)

emmm,我是乱入的旁白,最近总结了一下Sass的用法,看到分音那块便直接跳过,自以为是@import便一眼略过,哪知( ̄ε(# ̄)☆╰╮( ̄▽ ̄///)打脸总是来得这么猝不及防~

5.1Sass的分音扩展了@import的功能,可将其他scss文件利用@import导入进来,而编译成为一个合体的css文件

5.2优点:使得项目模块化并更有条理

将样式分割成不同小部分Partials,每个Partials,就是一个scss文件,不过需要用_下划线开头,让Sass识别该文件是Partials,不会编译为独立的css,最后编译为一个合体css文件。

如:将文件命名为 _colors.scss

Sass并不会编译出一个color.css

但在主文件index.scss可用@import "colors";导入

注意:导入时,没有下划线,需要加分号

我是艾玛真香的小结:讲道理,视频的小哥哥声音真的很磁性,┓( ´∀` )┏,个人建议使用Sass的分音整合成一个Css文件通过link标签去导入样式才是目前而言的,最佳上策~~小白见解也就这么拙劣了~┏(^0^)┛溜了溜了

参考文献:

你真的知道为什么不推荐使用@import

关于CSS中@import的疑问中的评论

Sass的免费教学视频nihao.net

原文地址:https://www.cnblogs.com/nightnight/p/10753420.html

时间: 2024-10-14 06:29:47

20190422-外部导入CSS样式之link、[email protected]、Sass分音的相关文章

外部式css样式,写在单独的一个文件中

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码: <link href="base.css" rel="stylesheet" type="text/css" /> 注意: 1.css样式文件名称以有意义的英文字母命名

mysql 数据库导入错误:40101 SET @[email&#160;protected]@CHARACTER_SET

/*!40101 SET @[email protected]@CHARACTER_SET_CLIENT */;/*!40101 SET @[email protected]@CHARACTER_SET_RESULTS */;/*!40101 SET @[email protected]@COLLATION_CONNECTION */;/*!40101 SET NAMES utf8 */; 头部和尾部删除掉就可以了(mysql5.0附加到5.1也会出现这种情况)

link与@import导入css样式区别

XML/HTML代码<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   XML/HTML代码<style type="text/css" media="screen">   @import url("CSS文件&qu

html加载不了外部部分css样式问题

前端新手,最近在写一项目,发现一挺怪的问题:正常引入外部css, <link rel="stylesheet" type="text/css" href="public/css/index.css"> 发现,不生效,初步觉得路径不对,后来反复检查,都觉得没问题. 怪的是,前面一部分写的css是生效了,后来写上去的却不生效了,再怎么修改也改不动,于是把问题归结于浏览器缓存问题, 我用的是chrome浏览器,在设置里清除浏览器缓存,问题得

(5)css样式导入

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

认识CSS样式

1.认识CSS样式CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等.如下列代码: p{ font-size:12px; color:red; font-weight:bold; } 使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体.字号或者颜色等. CSS注释代码就像在Html的注释一样,在CSS中也有注释语句:用/*注释语句*/来标明 2.内联式CSS样

第三篇、CSS样式简介

<!--1.行内样式 <p style="background-color:red;font-size:20px"> --> <!--2.页内样式 <head> <meta charset="UTF-8"> <title></title> <style> body{ background-color:gray; } div{ background-color:red; } p{

HTMAL使用css样式的方式总结

内行样式 <p style="font-size:20px;color:blue;">内行样式</p>   镶嵌样式 <html>      <head>             <title>镶嵌样式</title>             <style type="text/css">             p             {                  这里

CSS基础,认识css样式

1.认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于 定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{ font-size:12px; color:red; font-weight:bold; } 使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字 有着统一的字体.字号或者颜色等. 2.CSS代码的语法 css 样式由选择符和声明组成,而声明又由属性和值组成, 选择符: 又称选择器