CSS三种引入方式:内联、页级、外联
1.内联CSS
内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷、高效;但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用,可以查找代码中bug。
<body>
<div style="width: 65px;height: 20px;border: 1px solid;">测试元素</div>
</body>
2.页级CSS
页级CSS也可称为内部CSS,整体是放在head标签里边的,在style标签里边定义样式,作用范围和字面意思相同,仅限于本页面的元素;如果你写的代码超过了几百行,想想每次把代码页拉到最上边都很烦,所以它在可维护性方面较差。
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div {
width: 65px;
height: 20px;
border: 1px solid;
background: greenyellow;
}
</style>
</head>
3. 外联CSS
外联CSS也可称为外部CSS,在实际的项目中通常使用此种方式,它只在页面中使用link或者@import引入即可,可维护性好;并且外联CSS是一个单独的文件,可以作用于多个页面,在修改的时候可以针对性地修改某一块区域,达到多个页面样式同时变更,相较于内联CSS和页级CSS,省去了到每个页面修改的步骤,提高了开发效率,同时一定程度提高了性能。
接下来具体说说link和@import的区别:
(1)link:<link rel="stylesheet" type="text/css" href="*.css" />
link语法格式中,rel指的是关联(relation),type指的是类型,href指的是链接文件路径。
link的作用主要用来引入CSS和网页图标,指示告知搜索引擎,网页之间的关系等。
(2)@import:<style>@import url("*.css");</style>
@import语法格式务必写在style标签中,后直接加文件路径即可。
@import作用在CSS文件和页面中,可以在一个CSS文件中引入其他的CSS文件,例如在index.css文件中引入其他CSS文件的样式,整合在一起后,再在index.html中调用一次即可,在实际项目中经常使用,方便管理和维护。
(3)二者加载顺序影响
HTML加载过程:1) 加载HTML-DOM结构
2)CSS和JS
3)图片和多媒体
4)加载事件触发
link和@import都没有放置顺序的要求,但是不同的放置位置可能会造成效果显示的差异。对于link,无论放到哪个位置,都是一边加载数据,一边进行优化,视觉感受很好;而对于@import,放置到哪里,才从哪里开始加载CSS样式,即先加载数据,然后加载样式,如果网速不佳,可能会造成只有数据出来,而样式一点点加载的效果。并且在同一个页面中,调用两种方式,link永远比@import优先级高。
在项目中使用的时候,一般在页面中调用方式为link,并且放在head标签中;使用@import除了在CSS文件中,在页面调用时,一般加载第三方的样式会使用到,并且需要放置在页面的底部,不会影响自己的网站。
CSS三种引入方式:内联、页级、外联的更多相关文章
- 006 CSS三种引入方式
CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...
- Python 45 css三种引入方式以及优先级
一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式 1.在标签头部的style属性内 2.属性值满足的是css语法 3.属性值用key:value形式赋值,value具 ...
- css三种引入方式以及其优先级的说法
css 三种引入方式 方式一:行间式 1.在标签头部的style属性内 2.属性值满足css语法 3.属性值用key:value形式赋值,value具有单位 4.属性值之间用 分号 : ...
- 前端 CSS 三种引入方式
CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...
- html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...
- CSS【03】:CSS 基础选择器与三种引入方式
基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...
- css-1,css的三种引入方式 基本选择器
<!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...
- 前端-CSS-介绍及三种引入方式
我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当H ...
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
随机推荐
- 最常用的css垂直居中方法
css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...
- redis入门指南-附录A
- js实现分页
<html> <head> <meta charset='utf-8'> <script type="text/javascript" s ...
- 一天搞定CSS:css选择器--07
选择器:是指选择标签的方法 1.选择器类型 2.id选择器 代码演示 <!DOCTYPE html> <html> <head> <meta charset= ...
- 架构师之路--应用架构的选型和dubbo
这个选型主要决定于系统复杂度.先回顾一下. 1>单一应用架构:对于一个流量很小的网站来说,只需一个应用,将所有功能都部署在一起,以减少部署节点和成本.之前在上家公司做过一个微信公众号的开发就是基 ...
- 使用Azure Policy(策略)强制实现资源Tag的坑
Azure的Tag(标记)可以帮助运维人员对云资源分类从而方便地进行计费和资源管理.然而在具体实践中工程师部署云资源的时候常常会忘记给资源做标记打Tag. 针对这个问题,Azure的官方文档建议是可以 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(84)-Quartz 作业调度用法详解一
前言 我从Quartz2.0开始使用,并对其进行了封装了界面,可以参考 http://www.cnblogs.com/ymnets/p/5065154.html 最近拿出来进行了优化,并升级到最新版, ...
- IntelliJ IDEA:给web应用提供JSTL支持
最近在看<Head First Servlet JSP>学习JSP,看到JSTL一章,为了添加JSTL支持折腾了好久. 网上的教程五花八门,而且多数比较旧. 我尝试了各种方法都没有成功,很 ...
- PHP完成一个日历
今天我们就用php中的数组合date 做一个日历. 先让我们回顾一下PHP里面的date . 1.时间戳:表示从计算机元年/UNIX纪年(0时区 1970/1/1 00:00:00)到当前事件的秒数. ...
- Let's Encrypt 免费SSL证书
Let's Encrypt免费又好用的证书,废话不多说. 假设我的域名为:163.org 1.克隆代码 git clone https://github.com/letsencrypt/le ...