怎么在html页面中调用外部样式

两种调用方法:1、使用link标签调用,语法“<link href=”外部样式表文件路径” rel=”stylesheet” type=”text/css” />”;2、利用“@import”关键字调用,语法“<style type=”text/css”>@import url(“外部样式表文件路径”);</style>”。

CSS外部样式表

如果 CSS 样式被放置在网页文档外部的文件中,则称为外部样式表,一个 CSS 样式表文档就表示一个外部样式表。

怎么在html页面中调用外部样式

实际上,外部样式表也就是一个文本文件,扩展名为.css。当把CSS样式代码复制到一个文本文件中后,另存为.css文件,则它就是一个外部样式表。

html页面中调用外部样式表的两种方法

外部样式表必须导入到网页文档中,才能够被浏览器识别和解析。外部样式表文件可以通过两种方法导入到 HTML 文档中。

1、使用 <link> 标签调用(链接式)

使用 <link> 标签调用外部样式表文件:

<link href="外部样式表文件路径" rel="stylesheet" type="text/css" />

对各个属性的说明:

  • href 属性设置外部样式表文件的地址,可以是相对地址,也可以是绝对地址。

  • rel 属性定义关联的文档,这里表示关联的是样式表。

  • type 属性定义导入文件的类型,同 style 元素一样,text/css表明为 CSS 文本文件。

一般在定义 <link> 标签时,应定义 3 个基本属性,其中 href 是必须设置属性。

通过 HTML 的 <link> 标签,将外部样式表文件链接到 HTML 文档中,是网络上网站应用非常多的方式,同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离,实现结构层和表示层的彻底分离,增强网页结构的扩展性和 CSS 样式的可维护性。

示例:使用链接式为 HTML 代码应用样式,书写、更改方便。

<!doctype html><html><head><meta charset="utf-8"><title></title><link href="lianjie.css" type="text/css" rel="stylesheet" /><link href="lianjie-2.css" type="text/css" rel="stylesheet" /></head><body>    <p>我是被 lianjie-2.css 文件控制的,楼下的你呢??</p>    <h4>楼上的,<span>lianjie.css</span> 文件给我穿的花衣服。</h4></body></html>

怎么在html页面中调用外部样式

在上面示例中,通过 link 链接两个 CSS 文件,且都有效,这也是网站制作者将公共部分放入一个 CSS 文件,当前页面样式编写新的样式文件。

lianjie.css 文件代码:

h4{    font-weight: normal;  /*取消标题默认加粗效果*/    background-color: #66CC99;  /* 设置背景色 */    height: 50px;  /*设置标签的高度*/    line-height:50px;  /* 设置标签的行高 */}span{    color: #FFOOOO;  /* 字体颜色 */    font-weight:bold;  /* 字体加粗 */}

lianjie-2.css 文件代码:

p{    color: #FF3333;  /*字体颜色设置*/    font-weight: bold;  /* 字体加粗 */    border-bottom: 3px dashed #009933;  /* 设置下边框线 */    line-height: 30px;  /* 设置行高 */}

链接式样式使 CSS 代码和 HTML 代码完全分离,达到结构与样式的分开,使 HTML 代码专门构建页面结构,而美化工作由 CSS 完成。

链接式导入 CSS 样式的好处:

  • CSS 文件可以放在不同的 HTML 文件中,使网站所有页面样式统一;

  • 再者将 CSS 代码放入一个 CSS 文件中便于管理、减少代码以及维护时间;

  • 当修改 CSS 文件时,所有应用此 CSS 文件的 HTML 文件都将更新,而不必从服务器上将所有的页面取回再修改完毕后上传。

2、使用 @import 关键字调用(导入式)

@import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中;

要与外部的CSS文件关联起来,得使用url而不是href,并且要把路径放在一个圆括号里面;

<style type="text/css">@import url("外部样式表文件路径");</style>

在 @import 关键字后面,利用 url() 函数包含具体的外部样式表文件的地址。

示例:导入样式表 lianjie.css 和 daoru.css 以及书写 <body> 标签的背景色,注意导入样式表和 <body> 标签样式的前后不可颠倒。

<html><head><meta charset="utf-8"><title></title><style type="text/css">    @import url(lianjie.css);    @import url(daoru.css);    body { background-color: #e4e929; }</style></head><body>    <div>        <p>我是被 lianjie-2.css 文件控制的,楼下的你呢??</p>        <h4>褛上的,<span>lianjie.css</span>文件给我穿的花衣服。</h4>    </div></body></html>

怎么在html页面中调用外部样式

在上面示例中,必须是@import url("lianjie-2.css"); p{text-indent: 3em;},而不能是p{text-indent:3em;} @import url("lianjie-2.css");,否则将导入效果无效。在 CSS 文件中也需要将 @import 放在前面,后面加入 CSS 样式,否则也是无效。

lianjie.css 文件代码,同上一个示例即链接式。

daoru.css 文件代码:

@import url("lianjie-2.css");p { text-indent: 3em; }

两种方式(link和@import)的区别

<link>标签属于html标签,而@import是css提供的一种方式,<link>标签不仅可以引入css,还可以做其他事,而@import只能引入css;

加载顺序的区别:当一个页面被浏览时,link引入的css会被同步加载,而@import引用的css是等到其他元素全被下载完之后才被加载;

兼容性的不同:@import是CSS2.1才提出的,所以只有在IE5以上才支持,低版本的浏览器不支持,而<link>标签无此问题;

当使用javascript控制DOM去改变样式时,只能使用<link>标签,因为@import不是DOM可以控制的。

关于怎么在html页面中调用外部样式就分享到这里了,希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。

文章标题:怎么在html页面中调用外部样式,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/26001

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云亿速云认证作者
上一篇 2022年9月16日 下午10:25
下一篇 2022年9月16日 下午10:27

相关推荐

  • win11新建不了文本文档怎么解决

    在以往文章中,也有不少关于“win11新建不了文本文档怎么解决”的介绍,但内容并不是十分详尽。以下是小编最新整理的“win11新建不了文本文档怎么解决”相关知识,不仅内容详细,而且步骤、细节清晰,希望能够帮助大家解决一些工作中的疑惑。 方法一: 1、首先点开下面的“开始菜单” 2、在上方搜索看看能不…

    2022年6月27日
    81200
  • Sqlmap自动化注入的示例分析

    使用sqlmap对dvwa进行自动化注入 设置dvwa级别为low 打开dvwa的SQL Injection(SQL Injection (Blind)),打开浏览器调试,输入user id并submit,查看拦截到的请求。 可以看到是一条GET请求,url“http://192.168.1.222…

    2022年9月16日
    28300
  • 如何一键接入排查SolarWinds供应链APT攻击

    SolarWinds供应链APT攻击事件被爆出 近日,SolarWinds供应链APT攻击事件引起了业界的关注。SolarWinds官方发布公告称,在SolarWinds Orion Platform的2019.4 HF5到2020.2.1及其相关补丁包的受影响版本中,存在高度复杂后门行为的恶意代码…

    2022年9月15日
    15500
  • Java中Prime算法的原理是什么与怎么实现

    Prim算法介绍 1.点睛 在生成树的过程中,把已经在生成树中的节点看作一个集合,把剩下的节点看作另外一个集合,从连接两个集合的边中选择一条权值最小的边即可。 2.算法介绍 首先任选一个节点,例如节点1,把它放在集合 U 中,U={1},那么剩下的节点为 V-U={2,3,4,5,6,7},集合 V…

    2022年9月15日
    17500
  • php如何对数组逆向排序且不保留键名

    实现步骤:1、利用array_reverse()函数对数组进行逆向排序,语法“array_reverse(原数组)”,会返回一个逆向数组;2、使用array_values()函数重置逆向数组的键名,语法“array_values(逆向数组)”,被返回的数组将使用数值键,从0开始且以1递增。 本教程操…

    2022年9月18日
    18900
  • jquery如何改变input的value属性

    在jquery中,可以利用val()方法来改变input的value属性;val()方法用于返回或者设置被选元素的value属性,value属性用于规定input元素的值,语法为“$(input元素对象).val(input修改后的value属性值);”。 本文操作环境:windows10系统、jq…

    2022年9月10日
    58600
  • 电脑更新错误0x800f0988如何解决

    解决方法: 方法一: 1、首先点击左下角的开始菜单,然后在其中找到“设置” 2、再点击进入设置中的“更新和安全” 3、然后在左侧边栏中选择“疑难解答” 4、然后在右侧启动并运行中点开“windows更新”,选择“运行疑难解答” 5、最后只要等待系统自动检测问题并解决就可以正常更新了。 方法二: 1、…

    2022年9月16日
    43300
  • Go中的并发方法实例代码分析

    Hello, Concurrent world 代码很简单——单个通道,单个goroutine,单次写入,单次读取。 package mainfunc main() { // 创建一个int类型的通道 ch := make(chan int) // 开启一个匿名 goroutine go func(…

    2022年9月8日
    21200
  • SQL字符串的合并与拆分实例代码分析

    字符串的合并 在Oracle中可能有多种实现方法,目前我已知的有两种,下面记录下这两种的实现: 字符串合并方法一: 实现SQL: –方法一SELECT d.dept_name,wm_concat(e.emp_name) FROM employee eINNER JOIN department d …

    2022年9月1日
    26400
  • word页码如何设置

    word设置页码的方法: 1、首先,打开你的Word文档,进入主页面。 2、将鼠标放在页脚下面,双击进入编辑状态, 此时的页眉和页脚都可以编辑,但是正文内容是变成了灰色。 3、然后在“页眉和页脚工具”设计选项卡下,选择“页码—>页面底端—>普通数字2”。 在这里普通数字1、2、3的三种页…

    2022年9月20日
    20400
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部