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. IconFont使用注意点

    在工作中,我经常会用阿里的IconFont图标库,今天发现一个之前没怎么注意到的问题. 首先IconFont给我们提供了三种引用图标的方式 unicode引用 unicode是字体在网页端最原始的应用 ...

  2. Swoole中内置Http服务器

    创建httpServer.php文件,代码如下: <?php // 创建服务对象 $http = new swoole_http_server("10.211.55.17", ...

  3. nodejs编写后台

    1.引入核心模块 2.服务器监听窗口 3.创建服务器对象 4.设置服务器监听窗口 寻找路径 // 引入核心模块 const http = require('http') // 服务器监听窗口 cons ...

  4. Python 變量 Variable 動態綁定

    為何 Python 變量沒有 Data Type 概念 ? 可以與任意 Data Type 綁定? Python 變量 Variable 與其他程式語言不同之處在於: > variable 不是 ...

  5. 【转载】Android Context 到底是什么?

    什么是Context? 一个Context意味着一个场景,一个场景就是我们和软件进行交互的一个过程.比如当你使用微信的时候,场景包括聊天界面.通讯录.朋友圈,以及背后的一些数据. 那么从程序的角度来看 ...

  6. MySQL数据库:在命令提示符中使用mysql

    服务启动 在命令提示符中 启动mysql服务 net start mysql 停止mysql服务 net sotp mysql 通过命令行进入 mysql -u 用户名 -p 键入后会提示输入密码 如 ...

  7. docker in docker 的启动方式

    --privileged  -v /var/run/docker.sock:/var/run/docker.sock  -v $(which docker):/bin/docker 启动容器时添加上面 ...

  8. oracle数据库修改密码有效期,解决ORA-28001: 口令已经失效

    工作中oracle数据库安装完成后,需要修改默认的密码有效期,默认为180天,如果不修改,到期忘记更改密码可能会造成不必要的影响. 两种修改方式pl/sql或者cmd窗口 1.pl/sql修改默认密码 ...

  9. d-堆

    二叉堆因为实现简单,因此在需要优先队列的时候几乎总是使用二叉堆.d-堆是二叉堆的简单推广,它恰像一个二叉堆,只是所有的节点都有d个儿子(因此,二叉堆又叫2-堆).下图表示的是一个3-堆.注意,d-堆要 ...

  10. TensorFlow从1到2(十一)变分自动编码器和图片自动生成

    基本概念 "变分自动编码器"(Variational Autoencoders,缩写:VAE)的概念来自Diederik P Kingma和Max Welling的论文<Au ...