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. java常用排序

    1.冒泡排序 public static int[] bubble(int[] a){ for(int i=0;i<a.length-1;i++){ int tmp=0; for(int j=0 ...

  2. 在线常用库 + API手册

    以下链接经过本人测试,均可正常访问 jQuery: http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js bootsrap: http://app ...

  3. Engineer Assignment(暴力+状压dp)

    题意: n个工程,m个研究员,每个工程需要Ci个领域(X1,X2..Xci)的研究员 ,每个研究员会Di个不同的领域(X1,X2..Xdi),要完成一个工程必须使得分配给这个工程的研究员覆盖了这个工程 ...

  4. layer子窗口赋值给父窗口

    子窗体赋值给父窗体: parent.$('#Receiver').val(typearr); //关闭子弹窗 var index = parent.layer.getFrameIndex(window ...

  5. Java空对象模式

    在“空对象”模式中,空对象将替换NULL对象实例的检查.而不是检查一个空值,Null对象反映一个无关的关系(即什么也不做). 这种Null对象还可以用于在数据不可用时提供默认行为. 在空对象模式(Nu ...

  6. Git SSH连接方式配置

    如果使用ssh的方式管理,需要配置ssh key. 1.打开git bash命令窗口 2.生成ssh key ssh-keygen -t rsa -b 4096 -C "your_email ...

  7. 10个Eclipse珍藏插件推荐

    1.Open Explorer 打开资源管理器插件,这是一个从Eclipse里面可以直接定位打开windows资源管理器文件的插件,这个版本的插件在最新的Eclipse版本中都能使用. 下载地址:ht ...

  8. Scrapy框架: 通用爬虫之SitemapSpider

    步骤01: 创建项目 scrapy startproject cnblogs 步骤02: 编写items.py # -*- coding: utf-8 -*- # Define here the mo ...

  9. mysql常见的hint

    mysql常用的hint对于经常使用oracle的朋友可能知道,oracle的hint功能种类很多,对于优化sql语句提供了很多方法.同样,在mysql里,也有类似的hint功能.下面介绍一些常用的. ...

  10. .net core swagger汉化

    基本swagger使用不再详解,具体百度其它帖子 1.将汉化的swagger js文件复制到项目根目录中 js代码如下 'use strict'; /** * Translator for docum ...