CSS引入方式
时间:2022-07-24
本文章向大家介绍CSS引入方式,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
CSS引入方式
将CSS
作用到HTML
主要有四种方式,分别为HTML
元素添加内联样式、<style>
标签嵌入样式、<link>
标签引入外部样式、@import
导入外部样式。
内联方式
<div style="color: red"></div>
特点
- 不需要额外的
HTTP
请求。 - 适合
HTML
电子邮件与富文本编辑器的使用。 - 内联样式比外部样式具有更高的优先级,可以覆盖外部样式。
- 可以在不更改直接主
CSS
样式表的情况下更改样式,直接将规则添加到元素。 - 适合于动态样式,对于每个元素的样式都不同的情况可以直接将样式作用到单个元素。
不足
- 页面维护可能会非常棘手
- 过多添加同样的样式会导致页面复杂
嵌入方式
<style type="text/css">
div {
color: blue;
}
</style>
特点
-
CSS
与HTML
一起作为一个文件,不需要额外的HTTP
请求 - 适合于动态样式,对于不同的用户从数据库加载不同样式嵌入到页面
不足
- 嵌入样式不能被浏览器缓存并重新用于其他页面
链接方式
<link rel="stylesheet" href="Path To stylesheet.css">
特点
- 可以通过替换
CSS
文件以改变网站的主题。 - 只需在单个
CSS
文件中进行一次更改,所有网站页面都会更新。 - 多个页面请求的网站速度有所提高,
CSS
在第一次访问时就被浏览器缓存。
不足
- 每个链接的
CSS
文件都需要一个附加的HTTP
请求
导入方式
<style>
@import url("Path To stylesheet.css");
</style>
特点
- 在不更改
HTML
标签的情况下添加新的CSS
文件
不足
- 需要额外的
HTTP
请求
link与@import差异
-
<link>
属于HTML
提供的标签,@import
属于CSS
语句,值得注意的是@import
导入语句需要写在CSS
样式表的开头,否则无法正确导入外部文件。 -
@import
是CSS2.1
才出现的概念,所以如果浏览器版本较低例如IE4
与IE5
等,无法正确导入外部样式文件,当然也可以利用这一点来隐藏对于这些旧版本的浏览器的CSS2
规则。 - 当
HTML
文件被加载时,<link>
引用的文件会同时被加载,而@import
引用的文件则会等页面全部下载完毕再被加载,所以有时候浏览@import
加载CSS
的页面时会没有样式,也就是闪烁现象,网速慢的时候就比较明显。 - 使用
<link>
标签可以设定rel
属性,当rel
为stylesheet
时表示将样式表立即应用到文档,为alternate stylesheet
时表示为备用样式表,不会立即作用到文档,可以通过JavaScript
取得<link>
标签对象,通过设置disabled
来实现样式表的立即切换,可用作切换主题等功能,而@import
不属于DOM
无法使用JavaScript
来直接控制。 -
<link>
与@import
混用可能会对网页性能有负面影响,在一些低版本IE
中<link>
与@import
混用会导致样式表文件逐个加载,破坏并行下载的方式导致页面加载变慢。此外无论是哪种浏览器,若在<link>
中引入的CSS
中继续使用@import
加载外部CSS
,同样会导致顺序加载而不是并行加载,因为浏览器需要先解析<link>
引入的CSS
发现@import
外部CSS
后再次引入外部CSS
,这样就导致页面加载变慢。
参考
https://alistapart.com/article/alternate/
https://matthewjamestaylor.com/add-css-to-html
https://www.runoob.com/w3cnote/html-import-css-method.html
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
https://stackoverflow.com/questions/1022695/difference-between-import-and-link-in-css
- mysql下mysqladmin日常管理命令总结
- Ubuntu下SVN安装和配置
- mysql表名忽略大小写问题记录
- 当wcf遇到JSON ?
- 从MapX到MapXtreme2004[2]-图层操作
- Nginx+keepalived双机热备(主主模式)
- 用正则表达式完成简单公式的替换计算
- Linux下误删除后的恢复操作(ext3/ext4)
- 部署Linux下的man慢查询中文帮助手册环境
- 想修改CSS
- linux下sendmail邮件系统安装操作记录
- 定时备份脚本分享(网站数据和数据库数据)
- 大型分布式服务器架构原理解析
- silverlight中用代码动态控制Storyboard(动画)属性的三种方法
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例