CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。

一、行内样式

使用style属性引入CSS样式。

示例：
<h1 style="color:red;">style属性的应用</h1>
<p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
实际在写页面时不提倡使用，在测试的时候可以使用。

例如：

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8" />
  5.   <title>行内样式</title>
  6. </head>
  7. <body>
  8.      <!--使用行内样式引入CSS-->
  9.      <h1 style="color:red;">Leaping Above The Water</h1>
  10.      <p style="color:red;font-size:30px;">我是p标签</p>
  11. </body>
  12. </html>

二、内部样式表
在style标签中书写CSS代码。style标签写在head标签中。
示例：
<head>
   <style type="text/css">
      h3{
            color:red;
         }
   </style>
</head>

例如：

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8" />
  5.   <title>内部样式表</title>
  6.   <!--使用内部样式表引入CSS-->
  7.   <style type="text/css">
  8.     div{
  9.         background: green;
  10.     }
  11.   </style>
  12. </head>
  13. <body>
  14.      <div>我是DIV</div>
  15. </body>
  16. </html>

三、外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
语法：
1、链接式
<link type="text/css" rel="styleSheet"  href="CSS文件路径" />
2、导入式
<style type="text/css">
  @import url("css文件路径");
</style>

例如：

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8" />
  5.   <title>外部样式表</title>
  6.   <!--链接式:推荐使用-->
  7.   <link rel="stylesheet" type="text/css" href="css/style.css" />
  8.   <!--导入式-->
  9.   <style type="text/css">
  10.     @import url("css/style.css");
  11.   </style>
  12. </head>
  13. <body>
  14.      <ol>
  15.          <li>1111</li>
  16.          <li>2222</li>
  17.      </ol>
  18. </html>

链接式和导入式的区别
<link>
1、属于XHTML
2、优先加载CSS文件到页面
@import
1、属于CSS2.1
2、先加载HTML结构在加载CSS文件。

四、CSS中的优先级

1、样式优先级

行内样式>内部样式>外部样式(后两者是就近原则)

例如：

行内样式和内部样式比较优先级：

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8" />
  5.   <title>行内样式和内部样式表的优先级</title>
  6.     <!--内部部样式表-->
  7.   <style type="text/css">
  8.     p{
  9.       color: blue;
  10.     }
  11.   </style>
  12. </head>
  13. <body>
  14.      <!--行内样式-->
  15.      <p style="color: red;">我是p段落</p>
  16. </html>

浏览器运行效果：

结论：行内样式优先级高于内部样式表。

内部样式表和外部样式表比较优先级：

a、内部样式表在外部样式表上面

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8" />
  5.   <title>内部样式表和外部样式表的优先级</title>
  6.     <!--内部部样式表-->
  7.   <style type="text/css">
  8.     p{
  9.       color: blue;
  10.     }
  11.   </style>
  12.   <!--外部样式表-->
  13.   <link rel="stylesheet" type="text/css" href="css/style.css" />
  14. </head>
  15. <body>
  16.      <p>我是p段落</p>
  17.      <div>我是div</div>
  18.      <ol>
  19.          <li>1111</li>
  20.          <li>2222</li>
  21.      </ol>
  22. </html>

浏览器运行效果：

b、外部样式表在内部样式表上面

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8" />
  5.   <title>内部样式表和外部样式表的优先级</title>
  6.     <!--外部样式表-->
  7.   <link rel="stylesheet" type="text/css" href="css/style.css" />
  8.     <!--内部部样式表-->
  9.   <style type="text/css">
  10.     p{
  11.       color: blue;
  12.     }
  13.   </style>
  14. </head>
  15. <body>
  16.      <p>我是p段落</p>
  17.      <div>我是div</div>
  18.      <ol>
  19.          <li>1111</li>
  20.          <li>2222</li>
  21.      </ol>
  22. </html>

浏览器运行效果：

结论：内部样式表和外部样式表使用就近原则，即谁写在下面以谁为准。

注意：导入式和链接式的优先级也是使用就近原则。

2、选择器优先级

优先级：ID选择器>类选择器>标签选择器

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8" />
  5.   <title>选择器的优先级</title>
  6.   <style type="text/css">
  7.     #a{
  8.       color: green;
  9.     }
  10.     .b{
  11.       color: yellow;
  12.     }
  13.     h2{
  14.       color: red;
  15.     }
  16.   </style>
  17. </head>
  18. <body>
  19.      <h2>111</h2> <!--红色-->
  20.      <h2 id="a" class="b">222</h2> <!--绿色-->
  21.      <h2 class="b">333</h2><!--黄色-->
  22. </html>

浏览器运行效果：

CSS三：CSS的三种引入方式的更多相关文章

  1. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  2. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  3. CSS【03】：CSS 基础选择器与三种引入方式

    基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...

  4. 前端 CSS 三种引入方式

    CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...

  5. css-1,css的三种引入方式 基本选择器

    <!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...

  6. 006 CSS三种引入方式

    CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...

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

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

  8. 11 CSS的三种引入方式和基本选择器

    <!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...

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

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

  10. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

随机推荐

  1. CentOS 使用 Xfce 桌面并通过 xrdp 登录

    基础环境 CentOS 7.1 最小化安装 安装步骤 以下步骤,均通过ssh连接到主机进行操作. 安装桌面支持 首先安装桌面支持 yum groupinstall "Server with ...

  2. Codeforces 954 G. Castle Defense

    http://codeforces.com/problemset/problem/954/G 二分答案 检验的时候,从前往后枚举,如果发现某个位置的防御力<二分的值,那么新加的位置肯定是越靠后越 ...

  3. 《Maven实战》笔记

    maven是什么 maven是 构建工具 依赖关系工具 项目信息管理工具 而JAVA世界的ant只是一个构建工具,不具备依赖管理的功能,需要配合使用ivy进行依赖管理. maven的安装 下载mave ...

  4. IDAPython安装

    转载:All Right   (本人没有测试过) 关于IDAPython的安装教程网上的资料非常少,也不是很详细,我费了好长时间才装好,现在和大家分享一下. 注意事项 下面几点关系到安装是否成功 ID ...

  5. go通过swig封装、调用c++共享库的技术总结

    go通过swig封装.调用c++共享库的技术总结 @(知识记录) 1 简介 最近在研究golang,希望能对目前既有的python服务做一些优化,这些服务目前已经占用了6-7台机器.选择golang的 ...

  6. UBUNTU18.4环境下使用更好用的搜索引擎（无奈，只能起这样的标题）

    初步安装 更新软件源 sudo apt-get update 安装pip (一个安装和管理 Python 包的工具) sudo apt-get install python-pip sudo apt- ...

  7. [USACO]地震 （二分答案+最优比率生成树详解）

    题面:[USACO 2001 OPEN]地震 题目描述: 一场地震把约翰家的牧场摧毁了, 坚强的约翰决心重建家园. 约翰已经重建了N个牧场,现在他希望能修建一些道路把它们连接起来.研究地形之后,约翰发 ...

  8. 7、完整版的strcpy函数

    char * strcpy( char *strDest, const char *strSrc ) { assert( (strDest != NULL) && (strSrc != ...

  9. 关于cc -o命令

    这个命令很灵活,格式是: cc -o 目标二进制可执行文件 文件1 文件2 文件3 ..... 其中目标文件后面的文件,可为源代码,也可为二进制文件,也可为库文件 比如: //a.c #include ...

  10. 课程5：Spring框架2016版视频--视频列表目录

    \day01视频\01-今天内容介绍.avi; \day01视频\02-spring的相关概念.avi; \day01视频\03-spring的ioc底层原理(一).avi; \day01视频\04- ...