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. 九条命令检查Linux服务器性能

    一.uptime命令 这个命令可以快速查看机器的负载情况.在Linux系统中,这些数据表示等待CPU资源的进程和阻塞在不可中断IO进程(进程状态为D)的数量.这些数据可以让我们对系统资源使用有一个宏观 ...

  2. 3.jmeter jsr232 脚本获取当前测试的正在活动的线程数

    jsr232 groovy 脚本获取当前测试的正在活动的线程数 (需要选择 groovy类型, 如果使用beanshell或者javascript,请根据其语法稍作修改即可) import org.a ...

  3. Guava 开源工具的简单介绍

    Guava 是一个 Google 的基于java1.6的类库集合的扩展项目,包括 collections, caching, primitives support, concurrency libra ...

  4. db2表

    生成列: CREATE TABLE t1 (c1 INT,                 c2 DOUBLE,                 c3 DOUBLE GENERATED ALWAYS ...

  5. jq表单提交加正则验证

    验证方法:姓名,手机,邮箱这些,鼠标点击移走用input的失去焦点blur事件.若为空,给input下方加提示消息. html: input框是引用bootstrap的css <div clas ...

  6. 转：几款免费的图表js插件

    1,ichartjs(国产)(http://www.ichartjs.com/)  ===============强烈推荐ichartjs是一款优秀的国产开源插件,作者是王鹤,英文名taylor,毕业 ...

  7. 2019牛客暑期多校训练营(第五场) maximum clique 1

    题意:给出n个不相同的数,问选出尽量多的数且任两个数字二进制下不同位数大于等于2. 解法:能想到大于等于2反向思考的话,不难发现这是一个二分图,那么根据原图的最大团等于补图的最大独立点集,此问题就变成 ...

  8. mysql中级操作

    解析sql执行过程 show VARIABLES like '%profil%' //查看是否开启了剖析 如没开启set profiling=1; 启用 show profiles; set @que ...

  9. Tomcat访问任意磁盘的图片资源

    项目中用户上传的大量图片存放在项目底下带来诸多不便.每次部署项目都需要拷贝出来,防止覆盖掉以前的 图片.容易丢失,前功尽弃.甚至造成经济损失.不可估量. 如何配置tomcat访问图片路径呢?首页你代码 ...

  10. OC学习篇之---循环引用问题

    在之前的一片文章中,我们介绍了数组操作对象的时候引用问题以及自动释放池的概念: http://blog.csdn.net/jiangwei0910410003/article/details/4192 ...