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. Asp.Net Core 第06局：中间件

    总目录 前言 本文介绍Asp.Net Core 中间件. 环境 1.Visual Studio 2017 2.Asp.Net Core 2.2 开局 第一手:中间件概述     1.中间件:添加到应用 ...

  2. b/s 起点

    1.Web前端: JavaScript (1)脚本语言.JavaScript是一种解释型的脚本语言,C.C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释. (2)基于对 ...

  3. l1和l2正则化

    https://blog.csdn.net/tianguiyuyu/article/details/80438630 以上是莫烦对L1和L2的理解 l2正则:权重的平方和,也就是一个圆 l1正则:权重 ...

  4. 洛谷 P1522 牛的旅行 Cow Tours——暴力枚举+最短路

    先上一波题目  https://www.luogu.org/problem/P1522 这道题其实就是给你几个相互独立的连通图 问找一条新的路把其中的两个连通图连接起来后使得新的图中距离最远的两个点之 ...

  5. css控制文本对齐

    h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} text-decoration 属性用来 ...

  6. opencv中图像的读取，显示与保存1

    1.读入图像 用cv2.imread()函数来读取图像,cv2.imread(路径,图像颜色空间)(其中颜色空间默认为BGR彩图)     cv2.IMREAD_COLOR:读入一副彩色图像 cv2. ...

  7. 44-python基础-python3-字符串-常用字符串方法(二)-isalpha()-isalnum()-isdigit()-isspace()-istitle()

    3-isX 字符串方法   序号 方法 条件 返回结果1 返回结果2 1 isalpha() 如果字符串只包含字母,并且非空; True False 2 isalnum() 如果字符串只包含字母和数字 ...

  8. pytorch中onehot编码转为普通label标签

    label转onehot的很多,但是onehot转label的有点难找,所以就只能自己实现以下,用的topk函数,不知道有没有更好的实现 one_hot = torch.tensor([[0,0,1] ...

  9. 【问题解决方案】git/github本地和远程仓库的重命名

    参考: CSDN博文:在Github上重命名仓库 背景: 偶然终于看到一条规范里写着: "通常(注意是通常,尤其是 Web 相关的项目) repo 的命名用小写英文,多个字母之间用连字符(比 ...

  10. Idea maven项目不能新建package和class的解决【转】

    如图,新建的maven项目不能新建package 这是因为java是普通的文件夹,要设置为 现在就可以了 博客原链接:http://blog.csdn.net/qq_24949727/article/ ...