html怎么引用css,html在线编辑器网页
今天给各位分享html怎么引用css的知识,其中也会对html在线编辑器网页进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
html如何引用外部css样式
一个外部的样式表可以通过HTML的LINK元素连接到HTML文档中:
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen<
<LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print"<
<LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print"<
<LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural<
<LINK<标记是放置在文档的HEAD部分。可选的TYPE属性用于指定媒体类型--text/css是一个层叠样式表--允许浏览器忽略它们不支持的样式表类型。为CSS文件配置服务器而将text/css当作Content-type内容发送出去也是一个好注意。
外部样式表不能含有任何像<HEAD<或<STYLE<这样的HTML的标记。样式表仅仅由样式规则或声明组成。一个单独由
P{ margin: 2em}
组成的文件就可以用作外部样式表了。
<LINK<标记也有一个可选的MEDIA属性,用于指定样式表被接受的介质或媒体。允许的值有
screen?(缺省值),提交到计算机屏幕;print,输出到打印机;projection,提交到投影机;aural,扬声器;braille,提交到凸字触觉感知设备;tty,电传打字机(使用固定的字体);tv,电视机;all,所有输出设备。多样的媒体通过用逗号隔开的列表或值all指定。
Netscape Navigator 4.x?错误地忽略除了screen值外的任何使用MEDIA值声明的连接或嵌入样式表。例如,MEDIA="screen,projection"会令到样式表被Navigator 4.x忽略,尽管展示的设备是计算机的屏幕。Navigator 4.x?也忽略使用MEDIA=all声明的样式表。
REL属性用于定义连接的文件和HTML文档之间的关系。REL=StyleSheet指定一个固定或首选的样式而REL="Alternate StyleSheet"定义一个交互样式。固定样式在样式表激活时总被应用。缺少的TITLE属性,就像例子中的第一个<LINK<标记,定义一个固定样式。
一个首选样式会自动被应用,就像例子中的第二个<LINK<标记。REL=StyleSheet和一个TITLE属性的组合指定一个首选的样式。网页制作者不能指定多于一个的首选样式。
交互样式通过REL="Alternate StyleSheet"指出。例子中的第三个<LINK<标记定义一个交互样式,用户可以选择用来代替首选样式表。
注意现在的浏览器一般都缺乏选择交互样式的能力。
单一的样式也可以通过多个样式表给出
<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary"<
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary"<
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary"<
在这个例子中,三个样式表组合成一个"Contemporary"样式,作为一个首选样式表被应用。要组合多个样式表成一个单一样式,必须在每个样式表中使用相同TITLE。
当样式被应用到很多的网页时,一个外部样式表是理想的。网页制作者使用外部样式表可以改变整个网站的外观而仅仅通过改变一个文件。同样的,大多数浏览器会保存外部样式表在缓冲区,从而如果样式表在缓冲区就避免了在展示网页时的延迟。
Microsoft Internet Explorer?3 for Windows 95/NT4并不支持来自连接的样式表中的BODY?背景图象或颜色。如果考虑到这个错误,网页制作者不妨提供另外的包括一个背景图象或颜色的结构,例如嵌入或内联样式,或使用BODY元素的BACKGROUND属性。
HTML中怎么导入css
参考以下html导入css的方式:
HTML中引入 CSS的方式
有 4种方式可以在 HTML中引入 CSS。其中有 2种方式是在 HTML文件中直接添加 CSS代码,另外两种是引入外部 CSS文件。下面我们就来看看这些方式和它们的优缺点。
内联方式
内联方式指的是直接在 HTML标签中的 style属性中添加 CSS。
示例:
<div style="background: red"></div>
这通常是个很糟糕的书写方式,它只能改变当前标签的样式,如果想要多个<div>拥有相同的样式,你不得不重复地为每个<div>添加相同的样式,如果想要修改一种样式,又不得不修改所有的 style中的代码。很显然,内联方式引入 CSS代码会导致 HTML代码变得冗长,且使得网页难以维护。
嵌入方式
嵌入方式指的是在 HTML头部中的<style>标签下书写 CSS代码。
示例:
<head>
<style>
.content{
background: red;
}
</style>
</head>
嵌入方式的 CSS只对当前的网页有效。因为 CSS代码是在 HTML文件中,所以会使得代码比较集中,当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML结构和 CSS样式。因为嵌入的 CSS只对当前页面有效,所以当多个页面需要引入相同的 CSS代码时,这样写会导致代码冗余,也不利于维护。
链接方式
链接方式指的是使用 HTML头部的<head>标签引入外部的 CSS文件。
示例:
<head>
<link rel="stylesheet" type="text/css" rel="external nofollow" href="style.css">
</head>
这是最常见的也是最推荐的引入 CSS的方式。使用这种方式,所有的 CSS代码只存在于单独的 CSS文件中,所以具有良好的可维护性。并且所有的 CSS代码只存在于 CSS文件中,CSS文件会在第一次加载时引入,以后切换页面时只需加载 HTML文件即可。
导入方式
导入方式指的是使用 CSS规则引入外部 CSS文件。
示例:
<style>
@import url(style.css);
</style>
比较链接方式和导入方式
链接方式(下面用 link代替)和导入方式(下面用@import代替)都是引入外部的 CSS文件的方式,下面我们来比较这两种方式,并且说明为什么不推荐使用@import。
link属于 HTML,通过<link>标签中的 href属性来引入外部文件,而@import属于 CSS,所以导入语句应写在 CSS中,要注意的是导入语句应写在样式表的开头,否则无法正确导入外部文件;
@import是 CSS2.1才出现的概念,所以如果浏览器版本较低,无法正确导入外部样式文件;
当 HTML文件被加载时,link引用的文件会同时被加载,而@import引用的文件则会等页面全部下载完毕再被加载;
小结:我们应尽量使用<link>标签导入外部 CSS文件,避免或者少用使用其他三种方式。
如何将CSS文件引用到html网页里方法
在head中间加入代码<link rel="external nofollow" href="css/main.css" rel="stylesheet" type="text/css"/>
在html中,引入css的方法主要有行内式、内嵌式、导入式和链接式4种。
1.行内式:即在标记的style属性中设定css样式,这种方式本质上没体现出css的优势,因此不推荐使用。
2.嵌入式:在对页面中各种元素的设置集中写在<head>和</head>之间的,对于单个页面来说,这种方式很方便。
3.导入式:导入式格式如下:
<style type="text/css">
@import"mystyle.css";
</style>
4.连接式:格式如下:
<link rel="external nofollow" href="mystyle.css" rel="stylesheet" type="text/css"/>
采用后两种方式后的显示效果略有区别,区别如下:
连接式:会在装载页面主体部分之前装载css文件,这样显示出来的网页从一开始就是带有样式效果的;
导入式:会在整个页面装载完成后再装载CSS文件,对于有的浏览器来说,在一些情况下,如果网页文件的体积比较大,则会出现先显示无样式的页面,闪烁一下之后再出现设置样式后的效果,从浏览者的感受来说,这是导入式的一个缺陷。
对于一些比较大的网站,为了便于维护,可能会希望把所有的css样式分类别放到几个CSS文件中,这样如果使用连接式引入,就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类,就需要同时调整HTML文件,这对于维护工作来说,是一个缺陷,如果使用导入式,则可以只引进一个总的CSS文件,在这个文件中再导入其他独立CSS文件;而连接则不具备这个特性。
因此给大家的建议是:如果仅需要引入一个CSS文件,则使用连接方式;如果需要引入多个CSS文件,则首先用连接方式引入一个“目录”CSS文件,这个“目录”CSS文件中再使用导入式引入其他CSS文件。
如果希望用javascript来动态决定引入哪个css文件,则必须使用连接式才能实现
关于html怎么引用css到此分享完毕,希望能帮助到您。