CSS样式的引用方式有三种：行间样式表>内部样式表>外部样式表。

如果只有一种样式，那么优先级“由内到外 由近到远”

1、行间样式表--内联方式

内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

这种方法比较糟糕，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，不得不重复为每个 <div> 添加相同的样式，修改时又得修改所有的 style 中的代码。内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

<body>

    <div style="background-color: black">1</div>

</body>

2、内部样式表--嵌入方式

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。

当单个文档需要特殊的样式时，就应该使用内部样式表。

<head>

    <style>

        .c1{

            background-color: red;

        }

    </style>

</head>

3、外部样式表--链接方式（常用）

链接方式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。每个页面使用 <link> 标签链接到样式表。

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

<head>

    <link rel="stylesheet" href="s.css">

</head>

前端学习笔记——引入css文件、样式优先级的更多相关文章

  1. 前端学习笔记之CSS网页布局

    CSS网页布局   阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...

  2. 前端学习笔记之CSS介绍

    阅读目录 一 什么是CSS 二 为何要用CSS 三 如何使用CSS 一 什么是CSS CSS全称Cascading Style Sheet层叠样式表,是专用用来为HTML标签添加样式的. 样式指的是H ...

  3. Spring MVC学习笔记——引入静态文件

    1.在user-servlet.xml中加入以下代码,才能使得对静态文件的请求不被Controller捕获,而映射到一个固定的地址 <!-- 将静态文件指定到某个特殊的文件夹中统一处理 --&g ...

  4. 前端学习笔记之CSS选择器

    阅读目录 一 基本选择器 二 后代选择器.子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器 七 伪类选择器 八 伪元素选择器 九 CSS三大特性 一 基本选择器 ...

  5. 前端学习笔记之CSS知识汇总

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...

  6. 2、前端学习笔记之——css

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 前端学习笔记之CSS属性设置

    CSS属性设置   阅读目录 一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准 ...

  8. 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理

    在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...

  9. 前端学习笔记之CSS浮动浅析

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

随机推荐

  1. 重新认识Maven

    PS:第一次接触maven大约是两年前吧,隐约记得之前都是人工寻找并下载很多jar,放在项目的lib中(表示太年轻,没有接触过Ant或者其他类似的工具,就不找别人写的比较了).懒人永远有着自己的小聪明 ...

  2. <读书笔记>JavaScript系列之7种创建对象（面向对象）

    写在前面: 以下三选一: 阅读博文JavaScript 对象详解. 阅读<JavaScript权威指南>第6章. 阅读<JavaScript高级程序设计>第6章. 注意:只需要 ...

  3. jQ无法设置checkbox变成选中状态

    设置以后checkbox并没有变成选中状态,用chrome调试看了一下,checkbox中确实有checked属性,针对这个问题,大家可以参考下本文 代码如下: $("input" ...

  4. .gz文件解压

    有时我们明明已经使用gunzip命令解压.gz文件了,可解压生成的文件却依然无法正常读取.如输入命令gunzip HelloWorld.java.gz后,解压生成HelloWorld.java文件,却 ...

  5. 偏向锁，偏向线程id ,自旋锁

    理解锁的基础知识 如果想要透彻的理解Java锁的来龙去脉,需要先了解以下基础知识. 基础知识之一:锁的类型 锁从宏观上分类,分为悲观锁与乐观锁. 乐观锁 乐观锁是一种乐观思想,即认为读多写少,遇到并发 ...

  6. JS异步加载，JQ事件不被执行解决方法

    一,在我们实现动态生成HTML代码时会出现,使用JQ方法会不被执行,解决方法,如下:使用jquery的委托事件,将该方法委托到页面已经存在的一个节点上 <!DOCTYPE html> &l ...

  7. Python二分查找算法

    Python 二分查找算法: 什么是二分查找,二分查找的解释: 二分查找又叫折半查找,二分查找应该属于减值技术的应用,所谓减值法,就是将原问题分成若干个子问题后,利用了规模为n的原问题的解与较小规模( ...

  8. db2中将表中的某一字段设置为自增长

    DB2可以使用generated always as identity 将某一个字段指定为自增长的字段: 这表示id自动是一个自增长的字段,它从1开始增加每次增加1.也可以通过generated 将字 ...

  9. sql优化案例1

    --访客数 ) from ( select v.idvisitor from ods.piwik_log_visit v , , group by v.idvisitor) --优化后的访客数查询 s ...

  10. elasticsearch relevance score相关性评分的计算

    一.多shard场景下relevance score不准确问题 1.问题描述: 多个shard下,如果每个shard包含指定搜索条件的document数量不均匀的情况下,会导致在某个shard上doc ...