HTML中引用CSS的方法主要有

  • 行内样式
  • 内嵌式
  • 链接式
  • 导入样式

行内样式

指写在标签里的Style元素的值

 <p style="color: #FF0000;">行内样式</p>

内嵌式

写在HTML页面的head标签里。

   <style type="text/css">
XXXXXXXX
</style>

链接式

也是在head标签内部进行,但是需要在外部专门写CSS文件。

<link rel="stylesheet" href="css/Demo.css" />

导入样式

同样在head标签内。

<style type="text/css">
@import url("css/Demo.css");
</style>

导入和链接的区别为,导入时一次加载,而链接是在需要其样式的时候再去加载,所以链接式的性能更高一点。 尤其是在第一次加载 。

有这么多的方式,那么自然会有优先级了
优先级为

行内样式
链接式
内嵌式
导入式(链接在导入后)
OR
行内样式
内嵌式
导入式

HTML中引用CSS的几种方法的更多相关文章

  1. JSX中引用CSS的一种方法

    第一步:在page或者pages目录下新建一个css文件,例如style.css: 第二步:在jsx页面中import该css文件,例如: import style from './style.css ...

  2. html中插入css的4种方法

    #1:链入外部样式表 <head> <link href="mystyle.css" rel="stylesheet" type=" ...

  3. 在Visual Studio 2015中引用DLL的3种方法

    1.把dll文件复制到可执行文件所在目录 2.将工程属性->配置属性->调试->工作目录更改为dll文件所在目录 3.将工程属性->配置属性->调试->环境设置为P ...

  4. React中引用CSS样式的方法

    相对于html中引用css的三种方法,react中也有三种方法,一一相对: 1. 行内样式:直接在组件内部定义 <div style={{width:'20px',height:'30px'}} ...

  5. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

  6. CSS中隐藏内容的3种方法及属性值

    CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

  7. CSS中隐藏内容的3种方法

    CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可 ...

  8. 在ASP.NET Core中构建路由的5种方法

    原文链接 :https://stormpath.com/blog/routing-in-asp-net-core 在ASP.NET Core中构建路由的5种方法 原文链接 :https://storm ...

  9. C#调用接口注意要点 socket,模拟服务器、客户端通信 在ASP.NET Core中构建路由的5种方法

    C#调用接口注意要点   在用C#调用接口的时候,遇到需要通过调用登录接口才能调用其他的接口,因为在其他的接口需要在登录的状态下保存Cookie值才能有权限调用, 所以首先需要通过调用登录接口来保存c ...

随机推荐

  1. C# 同步转异步 TaskCompletionSource

    当我们遇到一些异步执行又无法等待时的逻辑,比如动画的执行. 而业务上又需要等待逻辑的完成,再去处理后续的操作.这时需要转成异步方法 如下,同步执行一个动画后,再输出日志: private async ...

  2. 中间件1--dubbo

    DUBBO是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提供3,000,000,000+次访问量支持,并被广 ...

  3. easyswoole对接支付宝,微信支付

    在easyswoole中,已经开发好了相关的支付组件,只需要引入即可: composer require easyswoole/pay pay组件支持协程 支付宝 支付方法 支付宝支付目前支持 7 种 ...

  4. 史诗级最强教科书式“NIO与Netty编程”

    史诗级最强教科书式“NIO与Netty编程” 1.1 概述 1.2 文件IO 1.2.1 概述和核心API 1.2.2 案例 1.3 网络IO 1.3.1 概述和核心API 3.4 AIO编程 3.5 ...

  5. 利用socket传递图片

    package com.company.s3; import java.io.File; import java.io.FileOutputStream; import java.io.InputSt ...

  6. echarts关系图圆心颜色渐变

    let option = { backgroundColor: '#1a4377', animationDurationUpdate: 1500, // 动画更新变化时间 animationEasin ...

  7. 通过Android反编译技术研究国内陌生人社交即时通讯的技术方案

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/100 即时通讯IM类App分析 这两周对国内陌生人社交领域 ...

  8. 基于 Storyboard 多种方式的页面跳转、参数传递

    原文 通过按钮关联跳转 选中 Button ,然后点击 action 右边拖拽到 第二个页面 选择 "Show"即可完成跳转关联. 定义页面间 segue Id,通过代码触发跳转 ...

  9. 关于Java的多线程Runnable的个人理解(基础,不讲概念)

    背景说明: 在学了Java的多线程(继承Thread,Runnable)以后,我出于好奇,就想知道java到底是不是多线程的,不能它说自己是多线程就是多线程,自己想验证一下,于是我就想测试一下,但继承 ...

  10. Saltstack_使用指南12_配置管理-jinja模板

    1. 说明 下文的案例是根据上一篇文章进行的修改.因此请优先读取上一章博文内容<Saltstack_使用指南11_配置管理-状态之间依赖关系> 2. 主机规划 salt 版本 [root@ ...