在HTML中引入CSS的方式

有 4 种方式可以在 HTML 中引入 CSS。其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码,另外两种是引入 外部 CSS 文件。

 

㈠内联方式

内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

 

㈡嵌入方式

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。

 

 

㈢链接方式

链接方式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。

 

 

㈣导入方式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

 

比较链接方式和导入方式

链接方式(下面用 link 代替)和导入方式(下面用 @import 代替)都是引入外部的 CSS 文件的方式,下面我们来比较这两种方式。

  • link 属于 HTML,通过 <link> 标签中的 href 属性来引入外部文件,而 @import 属于 CSS,所以导入语句应写在 CSS 中,要注意的是导入语句应写在样式表的开头,否则无法正确导入外部文件;
  • @import 是 CSS2.1 才出现的概念,所以如果浏览器版本较低,无法正确导入外部样式文件;
  • 当 HTML 文件被加载时,link 引用的文件会同时被加载,而 @import 引用的文件则会等页面全部下载完毕再被加载;

参考:菜鸟笔记

       希望有所帮助。

原文地址:https://www.cnblogs.com/shihaiying/p/11294309.html

时间: 2024-11-09 01:56:15

在HTML中引入CSS的方式的相关文章

HTML中引入CSS的方法

在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中.格式如下: <head> <style type="text/css"> ...此处写CSS样式 </

在html中引入css和js的方法

在html中引入css代码 在html中插入CSS样式表的方法有三种: 1.外部样式表(External style sheet):即所有的样式单独写在一个.css文件中,在html文件的head部分通过link进行链接 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 其中href表示的是外部css文件的路径和名

在html中添加css的方式

如何在html中添加css? 在html中设置css共有三种方式,分别是: 行内式 内嵌式 导入式 1.行内式.即在html标签中的style属性中设置css,值得注意的是css代码的名值对儿用冒号:来连接,用分号分离不同的css样式.这种方式虽然便于观看与调试,但是它违背了结构与表现相分离的原则,我们不推荐使用. <div id="myDiv" style="color:red; background-repeat:no-repeat; font-size:18px&

vue中引入css文件

两种方式引入css文件,一种是直接在main.js中引入,即下面这种写法: import 'element-ui/lib/theme-default/index.css' 这种写法适用于此css文件存在于项目中,不适用于通过网址访问的方式引入,会报错.偶试着引入Font Awesome,结果报错: import "http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 而直接在组件中引入却可

牛腩发布系统--在HTML中引入CSS

    1.CSS简介 级联样式表(Cascading style Sheet)简称CSS,是一种用来表现HTML或XML等文件样式的计算机语言,也是能够真正做到网页表现与内容分离的一种样式设计语言.能够对网页中的对象的位置排版进行像素级的控制,是目前基于文本展示应用最为广泛的语言. 牛腩发布系统中,就应用了CSS对网页进行了排版和控制,接下来讲解一下CSS在HTML中的引入方式.  2.引入方式 HTML与CSS时两个作用不同的语言,他们同时对一个网页产生作用,因此必须把两者挂接在一起,才能正

CSS系列:在HTML中引入CSS的方法

HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行内式即在标记的style属性中设定CSS样式,这种方式本质上没有体现CSS的优势,因此不推荐使用. 行内式示例: <div style="font-size:12px; text-align:center;">HTML中引用CSS的行内式方法</div> 2. 嵌入

Spring MVC:在jsp中引入css

为了将css引入jsp中,今天可真是踩了好多坑,最后在stackoverflow上找到了解决方法,不多说贴出代码. 在web.xml中添加以下代码: <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.css</url-pattern> </servlet-mapping> spring-servlet.xml配置如下: <?xml vers

引入css的方式

---恢复内容开始--- 引入css的样式及link和@import的区别 有3种引入方式 1.内部样式(写在标签内) 2.内联样式 3.外部样式(link @import) 区别: 1.本质区别:link由HTML提供;@import由css提供,link可引用其他文件,@import只能引用css文件 2.加载顺序的区别:link与HTML同时被加载,@import在HTML加载完成之后再加载,这样用户体验不好 3.兼容性的区别:@import是css2.1提出,只能在IE5以上才能支持,l

在html中引入CSS样式的四种方式

常用的是内嵌样式和外部样式