CSS（三）：引入样式和优先级
CSS的引入样式总共有三种：行内样式（内联样式表）、内部样式表、外部样式表。下面分别来介绍这三种样式。
一、行内样式
行内样式也叫内联样式，使用style属性引入CSS样式。看下面的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>行内样式</title>
</head>
<body>
<p style="color:red;font-size: 30px;">p段落通过行内样式引入CSS样式</p>
</body>
</html>
效果：
注意：
1、行内样式只对应用了此样式的标签有效，如果有多个相同的标签要使用相同的样式，那么每一个标签都要引入该样式，会造成很多重复的代码，所以，在实际的应用当中，不建议使用行内样式。
二、内部样式表
内部样式表在<head>标签里面使用<style>标签书写CSS代码。
语法：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内部样式表</title>
<!--内部样式表-->
<style type="text/css">
/*书写CSS样式*/
</style>
</head>
看下面的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内部样式表</title>
<!--内部样式表-->
<style type="text/css">
div{
background-color: green;
}
</style>
</head>
<body>
<div>我是DIV，通过内部样式表引入样式</div>
</body>
</html>
效果：
因为DIV是块级元素，所以DIV占据整行。
三、外部样式表
顾名思义，外部样式表表示CSS样式不写在HTML代码中，而是单独写在扩展名为.css的样式表中。
HTML文件引用扩展名为.css的样式表，有两种方式：
- 链接式
- 导入式
1、链接式
语法：
<link rel="styleSheet" type="text/css" href="CSS文件的路径（包括文件路径和css文件名）" />
说明：
type：规定被链接文档的类型，这是表示被链接的文档是css样式表。
rel：定义当前文档与被链接的文档之间的关系。
href：表示外部css样式表的路径，包括文件路径和css文件名。
示例：
先定义css样式表
li{
color: green;
}
HTML代码中引入该外部样式表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外部样式表</title>
<!--引入外部样式表-->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ol>
<li>111</li>
<li>222</li>
</ol>
</body>
</html>
效果：
2、导入式
语法：
<!--导入式-->
<style type="text/css">
@import url("css文件路径");
</style>
看下面的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外部样式表</title>
<!--引入外部样式表-->
<!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
<!--导入式-->
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<ol>
<li>111</li>
<li>222</li>
</ol>
</body>
</html>
效果：
链接式和导入式的区别：
导入式：
- 属于XHTML。
- 优先加载CSS文件到页面。
链接式
- 属于CSS 2.1.
- 先加载HTML结构在加载CSS文件。
注意：
- 无论是链接式还是导入式，都是写在<head>标签里面。
- 建议使用链接式引入CSS文件。
四、CSS样式的优先级
优先级
- 行内样式>内部样式表>外部样式表
先看行内样式和内部样式表优先级的对比
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>行内样式和内部样式表优先级比较</title>
<!--内部样式表-->
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<!--行内样式-->
<p style="color:red;">我是p标签</p>
</body>
</html>
效果：
从截图中可以看出行内样式的优先级高于内部样式表。
在看看行内和外部样式表的优先级
在外部CSS样式表里面定义p标签的字体颜色为蓝色
p{
color: blue;
}
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>行内样式和外部样式表优先级</title>
<!--引入外部样式表-->
<link rel="styleSheet" type="text/css" href="ExtenStyle.css"
</head>
<body>
<!--行内样式：定义颜色为绿色-->
<p style="color:green;">我的p标签</p>
</body>
</html>
效果：
从截图中可以看出：行内样式的优先级高于外部样式表。
最后在看内部样式表和外部样式表的比较
外部样式表还是使用上面的css文件
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内部样式表和外部样式表优先级</title>
<!--外部样式表-->
<link rel="styleSheet" type="text/css" href="ExtenStyle.css"
<!--内部样式表：定义颜色为黄色-->
<style type="text/css">
p{
color: yellow;
}
</style>
</head>
<body>
<p>我是p标签</p>
</body>
</html>
效果：
从截图中可以看出：内部样式表的优先级高于外部样式表。
调整<head>标签中两种样式的先后顺序，那效果又是如何呢？调整后的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内部样式表和外部样式表优先级</title>
<!--内部样式表：定义颜色为黄色-->
<style type="text/css">
p{
color: yellow;
}
</style>
<!--外部样式表-->
<link rel="styleSheet" type="text/css" href="ExtenStyle.css"
</head>
<body>
<p>我是p标签</p>
</body>
</html>
效果：
从截图中看出：外部样式表的优先级高于内部样式表。
总结：
- 因为HTML中代码的顺序是从上往下执行的，所以说内部样式表和外部样式表没有优先级谁高谁低之分，是按照就近原则执行的，哪种样式最后加载，就以哪种样式为准。
- 同理，引入外部样式表的两种方式(链接式和导入式)的优先级也是按照就近原则。
CSS（三）：引入样式和优先级的更多相关文章
- css三种样式表写法
css三种样式表:1.内嵌样式表: <head> <style type="text/css"> 样式表写法 </style> < ...
- CSS三种写法的优先级
在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...
- 设置css三种方法的优先级
有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在下面代码中就出现了这种情况 1.使用内联式CSS设置“超酷的互联网”文字为粉色. 2.然后使 ...
- CSS三种样式表
1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...
- CSS之引入样式
CSS引入样式 内部样式 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head> <style type=&quo ...
- CSS三种样式
CSS 指层叠样式表 (Cascading Style Sheets): 1 内联样式:无法复用,在元素style内写 ,很少使用: 2 内部样式:在head元素内style属性内写,此样式可以被当前 ...
- CSS选 择器 三种样式
一.CSS三种样式 代码 宽度 高度 实线 颜色 A内联样式是优先级最高的方式 px必须写 A:内联式 弊端:代码多很乱 <body> <div class="divc ...
- Python 45 css三种引入方式以及优先级
一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式 1.在标签头部的style属性内 2.属性值满足的是css语法 3.属性值用key:value形式赋值,value具 ...
- css三种引入方式以及其优先级的说法
css 三种引入方式 方式一:行间式 1.在标签头部的style属性内 2.属性值满足css语法 3.属性值用key:value形式赋值,value具有单位 4.属性值之间用 分号 : ...
随机推荐
- js刷新小知识点
data.code == '200' ? window.location.reload() : alert('拷贝失败,请重试') #如果状态码是200就刷新页面,如果不是就提示拷贝失败,请重试 页面 ...
- AliSQL 5.6.32 vs MySQL 5.7.15抢鲜测试
摘要: 今天我们有幸抢鲜测试AliSQL,直接拿来和MySQL 5.7.15对比看看. AliSQL刚宣布开源,我就提交申请内测名额,节前收到开放内测邀请,于是第一时间进行了测试了解,希望能给大 ...
- 志强处理器结尾的ES、QS、正式版的区别
CPU的推出过程大概分这几个步骤:ES1:测试架构和工艺制程ES2:修正大量BUG 这个时候的U已经能用了 但还存在隐患ES3(QS):质量认证样品 型号确定 在电脑上能显示型号和规格 可能存在或不存 ...
- [Leet Code]Path Sum II
此题如果 #1 和 #4 判断分支交换,大集合就会超时(因为每次对于非叶子节点都要判断是不是叶子节点).可见,有时候if else判断语句也会对于运行时间有较大的影响. import java.uti ...
- 解决sweetalert 无故报错 elem.className.replace Uncaught TypeError: Cannot read property 'className' of null
今天碰到这么一个问题,在使用sweetalert的时候时有时无会报错 elem.className.replace Uncaught TypeError: Cannot read property ' ...
- [sql]生产库全备/mysql库体积大小查看
将生产db全备到内网某机器 两个思路: 1, 直接内网mysqldump导出. 因为阿里云的rds只有私网ip,所以办公网机器无法直接连到rds执行mysqldump 解决: 通过ssh tunnel ...
- 【Android】1.1 开发环境安装和配置
分类:C#.Android.VS2015: 创建日期:2016-01-20 2016-08-03说明:此版本已过时,最新版本见本博客置顶的内容. 一.安装JDK.SDK.NDK 无论是用C#和VS20 ...
- 基于Django的独立运行的python脚本开发
Django框架很方便,比如其方便的ORM,如果写基于Django的独立运行脚本,主要在脚本前面加上以下代码: import sys,os,django sys.path.append(os.path ...
- lua -- io.pathinfo
io.pathinfo 拆分一个路径字符串,返回组成路径的各个部分. 格式: parts = io.pathinfo(路径) 使用示例: local pathinfo = io.pathinfo(&q ...
- android笔记---百度地图api应用 (二) 获取公交路线的详细信息
package com.example.bdtest; import com.baidu.mapapi.MKEvent; import com.baidu.mapapi.MKPlanNode; imp ...