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. IIS 解决跨域问题

    打开 HTTP响应标头 添加如下三条 名称Access-Control-Allow-Origin  值*名称Access-Control-Allow-Headers  值Content-Type,Ac ...

  2. Vue.config.silent = true

    Vue.config   vue的全局配置文件 silent默认值是false Vue.config.silent = true 取消Vue所有的日志和警告

  3. MyEclipse更换工作空间报错自动退出

    2.解决方法 后来找到一种方法,解决了我的问题,即找到图二中报错的那个jar包,我的是com.genuitec.eclipse.core_14.0.0.me201602080330.jar,然后将其文 ...

  4. layui table 中固定列的行高和table行高不一致

    解决方法:只需在done回调函数执行以下方法 done: function(res, curr, count){ $(".layui-table-main tr").each(fu ...

  5. Codeforces 1101D 点分治

    题意:有一颗树,每个点有一个点权,边权都是1,问路径上的所有点的gcd不是1的最长路径是多少? 思路:之前补这道题的时候,用分解质因数 + 树形DP做的,其实用点分治可以更暴力一点.对于这类统计树上路 ...

  6. JDBC中如何进行事务处理？

    Connection提供了事务处理的方法,通过调用setAutoCommit(false)可以设置手动提交事务:当事务完成后用commit()显式提交事务:如果在事务处理过程中发生异常则通过rollb ...

  7. 17.Priority优先级

    /** * 优先级 */ public class PriorityDemo { public static class HightPriority extends Thread{ static in ...

  8. Qt + VS 【如何添加图片资源】

    熟悉qt creator,之后发现其debug能力不如vs强,随后转战 qt + vs. 发现图片资源添加不像qt那样直接添加,vs本身会生成一个qrc,我们可以直接去打开然后添加,不必在自己去添加, ...

  9. 小鱼易连 for mac如何使用？小鱼易连 mac版使用教程

    小鱼易连 for mac如何使用?小鱼易连 mac版是参加远程会议人士的首选,高效极致,简单流畅,视频流畅,语音清晰,无需专用网络的功能深受用户的喜欢,它提供的文件和电脑的共享,让你的会议更加高效.下 ...

  10. javaweb判断当前请求是否为移动设备访问的方法

    由于移动端和pc端还是稍微有些区别的,我觉得最好是在一个地儿统一判断,而且不要改动原先的代码,这样可以从一定程度上减少bug的数量.我的想法是首先应该判断当前请求是否为移动端,然后设一个标识到sess ...