CSS入门4-引入CSS

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1.简介

说了这么久的html,大家都快以为这个系列是主讲html的了。好了,初步了解了你的身体构造,是时候学些拳脚功夫了。仗着硬胳膊硬腿当然能打人,但那不过是莽夫,css就是我们的武学招式,让我们的身体更灵活,招式更多变。

那么该如何引入css呢?主要有四种方法:

  1. 内联样式(标签内)
  2. 内部样式(style)
  3. 外部链接样式(link)—— 推荐的外部样式引入方法
  4. 导入样式(import)—— 不推荐的外部样式引入方法

2. 方法详解

2.1 内联样式

作用:为单个元素指定样式。

用法示例:

<div style="background-color: blue; width: 100px; height: 60px;">
</div>

特点:不会干扰其他元素的样式,但是缺乏灵活性,不推荐。

注意:一个元素内同时使用多个style,只能识别第一个style。

2.2 内部样式

作用:指定页面的样式。

用法示例:

<head>
  <style type="text/css">
    body {
      background-color:  blue;
    }
  </style>
</head>

特点:页面样式集中,不会影响其他页面样式。但是缺乏灵活性,出现网站整体样式修改时会非常麻烦。

2.3 外部链接样式

作用:为页面引入外部链接样式。

用法示例:

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

特点:最常用的样式引入方法。复用性强,便于管理,推荐使用。

2.4 外部导入样式

作用:为页面引入外部链接样式

用法示例:

<head>
  <style type="text/css">
    @import "style.css"; 
  </style>
</head>

特点:不推荐使用。下面会讲到原因。

3. link和@import的区别

这个章节,参考了由link和@import的区别引发的CSS渲染杂谈,若要看详细解读,可以转自该篇文章。由于现在的章节是入门探讨,所以在此我不做深入分析。就像我开始说的,现在还是了解交通规则考驾照的时候,不要贪多去知道发动机是怎么工作的。

  1. 从属关系区别 @import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。
  2. 加载顺序区别 加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。
  3. 兼容性区别 @import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。
  4. DOM可控性区别 可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。
  5. 权重区别(有争议,参考文章中有详细解读) link引入的样式权重大于@import引入的样式。

建议:

  1. 在网页中不要使用@import
  2. 如果非要使用,不要同时使用@import和link

参考

引入CSS CSS的四种引入方式 CSS的四种引入方式 由link和@import的区别引发的CSS渲染杂谈 don’t use @import | High Performance Web Sites HTML_link与@import区别

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏码生

自定义 AlertView,自定义图片icon,自定义按钮样式,自定义内容

1042
来自专栏前端知识分享

第144天:PS切图方法总结

    PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从Pho...

1542
来自专栏Youngxj

bootstrap简洁居中毛玻璃登录源码

4945
来自专栏Windows Community

Windows 8.1 应用再出发 - 几种新增控件(2)

本篇我们接着来介绍Windows 8.1 的新增控件,分别是:Flyout、MenuFlyout、SettingsFlyout、Hub 和 Hyperlink。...

35310
来自专栏无所事事者爱嘲笑

Vue.set() this.$set()引发的视图更新思考

1724
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native按钮详解|Touchable系列组件使用详解

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 在做App开发过程中离不了的需要用户交互,说到交互,...

5677
来自专栏Google Dart

AngularDart Material Design 应用布局 顶

应用布局 应用程序布局是一个样式,指令和组件系统,当它们一起使用时,可以提供材质外观和感知应用程序的层叠关系。 它根据材料规格提供应用栏,抽屉和导航样式。

1863
来自专栏测试开发架构之路

0基础菜鸟学前端之Vue.js

  简介:0基础前端菜鸟,啃了将近半月前端VUE框架,对前端知识有了初步的了解。下面总结一下这段时间的学习心得。 文章结构 前端基础 Vue.js简介 Vue...

1.2K6
来自专栏HTML5学堂

CSS3 user-select 禁选文本

HTML5学堂:当我们在访问一个文章网站的时候,常常因为拖拽的时候误选文字,给我们的一种不好的用户体验,而我们可以用CSS3的user-select属性禁选文本...

4016
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:自定义 C1WijMenu

C1Wijmo 全部的控件是完全可定制的,并且可以根据你自己的需求定制他们的界面外观。 我准备使用C1Menu演示这一点。 让我们从向控件应用自定义主题开始。 ...

1825

扫码关注云+社区

领取腾讯云代金券