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. OOM killer（Out Of Memory killer）

    最近接连遇到两个情况就是接连进程把kill掉 第一个情况就是有一个java进程被kill了.原因是我这个服务器上海部署了一个node服务,这个node服务大家都不熟悉.所以在使用的时候没有注意内存的使 ...

  2. c# vs2010 excel 上传oracle数据

    excel 数据表上传到oracle数据库.过程例如以下: 1.打开本地excel文件 2.用OleDb连接excel文件 3.将来excel的数据读取到dataset中 4.把dataset 中数据 ...

  3. 用Power BI观察经济与健康的关系

    Hans Rosling是卡罗琳学院的国际卫生学教授.这位学者与众不同的技能是数据可视化.以直观的数据展现了令人信服的世界观,而且在gapminder.org提供无偿展示以及下载.假设你没有看过下面的 ...

  4. javascript <a> 标签打开相对路径，绝对路径

    <a>标签中的href中,如果你写一个路径默认是以相对路径打开的,加上"http://" 消息头那就可以打开绝对路径 html: <a href=javascri ...

  5. Atitit 切入一个领域的方法总结 attilax这里，机器学习为例子

    Atitit 切入一个领域的方法总结 attilax这里,机器学习为例子 1.1. 何为机器学习?1 1.2. 两类机器学习算法 :监督式学习(Supervised Learning)和非监督式学习( ...

  6. MD5 和的价值体现在哪里，它是用来做什么的?

    MD5 和的价值体现在哪里,它是用来做什么的? MD5 和是由字母和数字构成的字符串,起到了文件指纹的作用.如果两个文件有相同的 MD5 和值,那么,文件完全相同.您可以为每一软件下载使用所提供的 M ...

  7. 【Unity】2.8 相机（Camera）

    分类:Unity.C#.VS2015 创建日期:2016-03-31 一.简介 Unity的相机用来向玩家呈现游戏世界.你在场景中始终至少有一个相机,但也可以有多个.多个相机可以带给您双人分屏效果或创 ...

  8. Pycrypto与RSA密码技术笔记

    密码与通信 密码技术是一门历史悠久的技术.信息传播离不开加密与解密.密码技术的用途主要源于两个方面,加密/解密和签名/验签 在信息传播中,通常有发送者,接受者和窃听者三个角色.假设发送者Master想 ...

  9. C++标准库及其保留字(关键字)——附：C++标准文档

    引言        C++到目前共发布了4个国际标准:ISO/IEC 14882:1998.ISO/IEC 14882:2003.ISO/IEC 14882:2011.ISO/IEC 14882:20 ...

  10. （原创）拨开迷雾见月明-剖析asio中的proactor模式（二）

    在上一篇博文中我们提到异步请求是从上层开始,一层一层转发到最下面的服务层的对象win_iocp_socket_service,由它将请求转发到操作系统(调用windows api),操作系统处理完异步 ...