分别写出引入CSS的3种方式, 特点, 优先级
第一:css的三种引入方式
1.行内样式
最直接最简单的一种,直接对HTML标签使用style="",例如:
<p style="color:#F00; "></p>
缺点:HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便。
2.内嵌样式
内嵌样式就是将CSS代码写在<head></head>之间,并且用<style></style>进行声明,例如:
<style type="text/css">
body,div,a,img,p{margin:0; padding:0;}
</style>
优缺点:页面使用公共CSS代码,也是每个页面都要定义的,如果一个网站有很多页面,每个文件都会变大,后期维护难度也大,如果文件很少,CSS代码也不多,这种样式还是很不错的。
3.外部样式
31.链接样式(推荐)
链接样式是使用频率最高,最实用的样式,只需要在<head></head>之间加上<link…/>就可以了,如下:
<link type="text/css" rel="stylesheet" href="style.css" />
优缺点:实现了页面框架代码与表现CSS代码的完全分离,使得前期制作和后期维护都十分方便
3.2.导入样式(不建议使用)
导入样式和链接样式比较相似,采用@import样式导入CSS样式表,在HTML初始化时,会被导入到HTML或者CSS文件中, 成为文件的一部分,类似第二种内嵌样式。
@import在html中使用,如下:
<style type="text/css">
@import url(style.css);
</style>
@import在CSS中使用,如下:
@import url(style.css);
链接式和导入式的区别:
<link>
1、属于XHTML
2、优先加载CSS文件到页面
@import
1、属于CSS2.1
2、先加载HTML结构在加载CSS文件。
第二:四种CSS引入方式的优先级
1.就近原则
2.理论上:行内>内嵌>链接>导入
3.实际上:内嵌、链接、导入在同一个文件头部,谁离相应的代码近,谁的优先级高(页面多种方式使用css样式引入)
综合代码如下:
<!DOCTYPE>
<html><head><meta charset="utf-8" /><title>行内样式/内嵌样式和外部样式的优先级</title><!--外部样式表--><link rel="stylesheet" type="text/css" href="css/style.css" /><!--内嵌样式表--><style type="text/css">p{color: blue;}</style><!--外部样式表--><!--<link rel="stylesheet" type="text/css" href="css/style.css" />--></head><body><p>我是p段落(注意:内嵌样式和外部引入样式 离我最近的那种样式方式给我带来的影响)</p><div >我是div,我什么样式都没有</div><!--行内样式--><div style="color: hotpink;">我是行内样式</div><ol><li>欢迎进入博客一起学习</li><li>https://blog.csdn.net/muzidigbig</li></ol></body>
</html>
分别写出引入CSS的3种方式, 特点, 优先级相关推荐
- 引入css的方式的四种方式,引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 style. ...
- HTML引入CSS样式三种方法及优先级
HTML引入CSS样式三种方法及优先级 CSS样式的写法 HTML引入CSS样式三种方法及优先级: 方法 css的样式引用由3种方式.分别为行内样式.内部样式(嵌入式)和外部样式: 行内样式: ...
- CSS初学之引入css的三种方式(一)
1.引入css的三种方式 一.第一种 简介 第一种:行内样式 每一个元素都具备style属性,通过该属性可以设置元素的相关样式 缺点: 复用性不高,样式更新麻烦 不复合网页标准,h ...
- 在HTML中加入CSS有三种方式,html引入css的几种方式(复习笔记)
一.html引入css的方式 1.内联样式 在html标签内的style属性中设定CSS样式,例如: 你好 注:在内联样式里无法写hover样式,并且这种方式不推荐使用,因为它只能改变当前标签样式,多 ...
- CSS——在HTML中引入CSS的四种方式
1.HTML标签内联样式 2.style标签内写css 3.link标签导入css样式 <link rel="stylesheet" type="text/css& ...
- HTML中引入CSS的三种方式——响应式Web系列学习笔记
1. 行内式 行内式是通过标签的style属性来设置元素的样式,其基本语法格式如下. <标签名 style="属性1:属性值1;属性2:属性值2;">内容</标签 ...
- 引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 <li ...
- html引入css的三种方式
1. 外部样式表 CSS保存在.css文件中. 在HTML里使用<link>引用 2.内部样式表 不使用外部CSS文件 将CSS放在HTML<style>里 3. 内联样式(不 ...
- CSS 引入 HTML 的三种方式
CSS 引入 HTML 的三种方式 在 html 文档中引入 CSS 样式表有三种引入方法: 内部样式表(嵌入式) 行内样式表(行内式) 外部样式表(链接式) 一.内部样式表 内部样式表(内嵌 ...
最新文章
- High Performance之android高性能之路
- c++ 暂停功能_app下载功能背后的逻辑
- vue 中的el表达式_Vue中vue.filter()的使用方法介绍(过滤)
- QtWebkit中浏览器插件的设计-1
- C# 9 新特性 —— 补充篇
- python3读取文件夹-python3获取文件及文件夹大小
- Qt文档阅读笔记-TextEdit QML Type官方解析及实例
- 天正lisp文件路径_AutoCAD的文件组织形式和搜索路径 | 坐倚北风
- C语言整型在计算机的储存
- 专访1药网董事长于刚:若没刘峻岭 就没我后面创业的精彩
- MIMO信道容量仿真MATLAB,mimo系统的信道容量分析及matlab仿真.doc
- 教你快速高效接入SDK——手游聚合SDK框架中渠道SDK部分的接入(就是实现抽象层的接口而已)
- 麦克风阵列声源定位解决方案
- 2019春节暖心视频:好久不见,别来无恙
- 网络环境下自主学习的诱惑
- 极坐标t1t2几何意义_选修44极坐标与参数方程
- (转载) 如何定义一个号的变量名
- 深圳大学2021年春计算机论题期末大作业
- ddd in php chinese,php-将DDD与事件源混合在一起
- NLP-英文文本预处理中的文本清洗内容