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. 链接式
  2. 导入式

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>

效果:

链接式和导入式的区别:

导入式:

  1. 属于XHTML。
  2. 优先加载CSS文件到页面。

链接式

  1. 属于CSS 2.1.
  2. 先加载HTML结构在加载CSS文件。

注意:

  1. 无论是链接式还是导入式,都是写在<head>标签里面。
  2. 建议使用链接式引入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>

效果:

从截图中看出:外部样式表的优先级高于内部样式表。

总结:

  1. 因为HTML中代码的顺序是从上往下执行的,所以说内部样式表和外部样式表没有优先级谁高谁低之分,是按照就近原则执行的,哪种样式最后加载,就以哪种样式为准。
  2. 同理,引入外部样式表的两种方式(链接式和导入式)的优先级也是按照就近原则。

CSS(三):引入样式和优先级的更多相关文章

  1. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  2. CSS三种写法的优先级

    在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...

  3. 设置css三种方法的优先级

    有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在下面代码中就出现了这种情况 1.使用内联式CSS设置“超酷的互联网”文字为粉色. 2.然后使 ...

  4. CSS三种样式表

    1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...

  5. CSS之引入样式

    CSS引入样式 内部样式 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head> <style type=&quo ...

  6. CSS三种样式

    CSS 指层叠样式表 (Cascading Style Sheets): 1 内联样式:无法复用,在元素style内写 ,很少使用: 2 内部样式:在head元素内style属性内写,此样式可以被当前 ...

  7. CSS选 择器 三种样式

    一.CSS三种样式 代码 宽度 高度 实线 颜色  A内联样式是优先级最高的方式 px必须写 A:内联式  弊端:代码多很乱 <body> <div class="divc ...

  8. Python 45 css三种引入方式以及优先级

    一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式   1.在标签头部的style属性内  2.属性值满足的是css语法  3.属性值用key:value形式赋值,value具 ...

  9. css三种引入方式以及其优先级的说法

    css 三种引入方式 方式一:行间式 ​ 1.在标签头部的style属性内 ​ 2.属性值满足css语法 ​ 3.属性值用key:value形式赋值,value具有单位 ​ 4.属性值之间用 分号 : ...

随机推荐

  1. 使用mysqltools配置读写分离环境

    mysqltools 目前自带了cat的的自动化安装功能 一.环境规划: 主机名 ip地址 角色 mtls17 10.186.19.17 master mtls19 10.186.19.19 slav ...

  2. mysql group replication 主节点宕机恢复

    一.mysql group replication 生来就要面对两个问题: 一.主节点宕机如何恢复. 二.多数节点离线的情况下.余下节点如何继续承载业务. 在这里我们只讨论第一个问题.也就是说当主结点 ...

  3. Android API 指南

    原文链接:http://android.eoe.cn/topic/android_sdk Android API 指南 - Android API Guides 应用的组成部分 - Applicati ...

  4. Android开发之API应用指南

    原文:http://android.eoe.cn/topic/android_sdk 编辑流程 这里主要是和Android技术相关的开发指南,很多都是来源于官方的API Guides( http:// ...

  5. jsp页面中的EL表达式不被解析的问题

    原因:问题在web.xml配置文件上,web.xml声明部分一般分为如下版本的xsd, web-app_2_2.xsd web-app_2_3.xsd web-app_2_4.xsd web-app_ ...

  6. mysql数据库TINYINT取值范围详解

    分享下mysql中TINYINT的取值范围,很基础的一些内容. 在MySQL的数据类型中,Tinyint的取值范围是:带符号的范围是-128到127.无符号的范围是0到255(见官方<MySQL ...

  7. Atitit 架构的原则attilax总结

    Atitit 架构的原则attilax总结 1.1. Rule of three称为"三次原则",指的是当某个功能第三次出现时,才进行"抽象化".是DRY原则和 ...

  8. G1 Garbage Collector and Shenandoah

    http://www.diva-portal.se/smash/get/diva2:754515/FULLTEXT01.pdf https://is.muni.cz/th/ifz8g/GarbageC ...

  9. docker使用示例

    本文使用docker容器运行wordpress博客,采用了三种方法来演示,docker的使用 自建wordpress容器 采用官方的wordpress容器 采用docker compose容器管理工具 ...

  10. 白话 Ruby 与 DSL 以及在 iOS 开发中的运用

    每日一篇优秀博文 2017年10月7日 周六 白话 Ruby 与 DSL 以及在 iOS 开发中的运用 阅读本文不需要预先掌握 Ruby 与 DSL 相关的知识 何为 DSL DSL(Domain S ...