CSS样式引入

3人阅读 评论(0) 收藏 举报
分类:

我们已经学习了行内、内嵌和外链三种方式来引入我们的 CSS 样式,这里我们再深入探讨下。

行内方式

通过给元素添加 style 属性来添加样式,如下:

<div style="color: red;">颜色为红色</div>
<div style="color: red;">颜色为红色</div>

它有一个很明显的缺点:只能改变当前标签的样式,如果想要多个元素都使用同一种样式,每个元素都要添加一遍,这样不仅导致HTML代码冗长难以阅读,而且后期维护起来也非常艰难。

所以我们一般不会大量使用这种方式添加样式,只有在少量使用 js 改变样式的时候使用。

内嵌方式

通过在<head>元素中使用<style>元素来定义:

<head>
    <style type="text/css">
        div {
            color: red;
        }
    </style>
</head>

该方法有效解决了第一个行内方式的带来的多元素不能重用同一个样式的问题,但是同时又暴露出了另一个问题:没有办法和其他页面共用,只能本页面使用。所以当多个页面需要引入相同的 CSS 代码时,这样写会导致代码冗余,也不利于维护。

这种方式我们一般在写简单 demo 的时候或者在移动端追求性能优化时使用。

外链方式

通过在<head>元素中使用<link>元素来引入:

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

这是我们网页最常见的也是最推荐的引入 CSS 的方式,具备良好的可维护性。并且如果多个页面共用一个 CSS 文件的话,一般只在第一次加载时需要下载,以后切换页面时根本不需要加载该文件(浏览器一般有缓存)。

导入方式

其实除了上面三种方式之外,还有第四种方法,就是@import导入的方式。这种方式呢建议只作为一个了解,千万不要使用。

引入方式如下:

<style>
    @import url(style.css);
</style>

可以看到这个这个方式也是引用一个外部CSS文件,那么和上面的外链方式有什么区别呢?

  • 范畴不同: <link> 属于 HTML 元素,通过其href属性来引入外部文件;而 @import 属于 CSS,所以导入语句应写在 CSS 中,要注意的是导入语句应写在样式表的开头,否则无法正确导入外部文件
  • 兼容性差别: @import 是 CSS2.1 才出现的概念,所以如果浏览器版本较低,无法正确导入外部样式文件;而<link>则没有任何兼容问题;
  • 加载顺序不同:当 HTML 文件被加载时,<link>引用的文件会同时被加载,而 @import引用的文件则会等页面全部下载完毕再被加载
  • js 修改支持:<link>支持使用JavaScript控制DOM改变CSS样式,@import不支持

总结

在实际网页中我们应尽量使用 <link> 标签导入外部 CSS 文件,避免或者少使用其他三种方式。

查看评论

Css 学习笔记--样式引入方式及按权重判断优先级

CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。 从CSS 样式代码插入的形...
  • Lady_seven
  • Lady_seven
  • 2016-03-08 11:45:32
  • 1008

CSS中外部样式与导入外部CSS样式文件的区别

1)外部样式是CSS样式中较为理想的一种形式。将CSS样式代码单独地放在一个独立的文件中,由页面进行调用,多个网页可以调用一个外部样式文件,因此可以实现代码的最大化使用及网站文件的最优化配置。一般是采...
  • sinat_36841379
  • sinat_36841379
  • 2017-01-25 22:08:53
  • 1561

邮件内css样式的引用规则

  • 2011年12月27日 16:52
  • 113KB
  • 下载

html页面中引入css样式的3种方式

1.行内样式:直接在html的元素上使用style的属性编写CSS,如下: span style="color:#00FF00 ;font-size:100px;">学无止境,不忘初心spa...
  • qq_27937043
  • qq_27937043
  • 2017-03-03 00:33:32
  • 228

关于导入css样式 却不起作用解决方案

rel="stylesheet"  在引入css样式的标签中 添加如上代码即可
  • Islandww
  • Islandww
  • 2017-03-28 14:17:00
  • 1056

ASP.NET 网页设计引入CSS样式的五种方式.rar

  • 2009年03月16日 10:06
  • 80KB
  • 下载

用CSS指定外部链接的样式

大部分的信息类网站,比如维基百科,都会对外部链接(标签)指定特定的样式.作为用户,一眼就知道该链接是指向另一个站点的资源是很好的体验。许多网站在服务器端做外部链接检查,添加一个`rel=externa...
  • renfufei
  • renfufei
  • 2014-02-10 11:01:29
  • 2762

引入css外部样式表的注意事项

转自◎小黑路人xiaoho.com 前言 为什么会有这篇文章,外部引入样式有什么好谈的,不外乎就是 就这么简单,还有什么,so easy,我之前都是这么认为的你肯定比我聪明多了~_^,但...
  • ye_mingjia
  • ye_mingjia
  • 2015-03-16 14:40:47
  • 908

codeigniter 不能引入css样式表

虽然知道codeigniter有样式表引入路径的问题(很多框架或架构都有一些使用)...
  • yageeart
  • yageeart
  • 2014-10-13 16:00:54
  • 1239

JS如何调用CSS样式表

JS1: head=document.getElementsByTagName("head"); function js_on(){ var js=document.createElement("s...
  • u010964869
  • u010964869
  • 2016-09-28 15:50:33
  • 1723
    个人资料
    持之以恒
    等级:
    访问量: 9543
    积分: 491
    排名: 10万+
    博客专栏
    最新评论