如何把css导入html
发布网友
发布时间:2022-04-24 12:56
我来回答
共2个回答
懂视网
时间:2022-04-29 12:32
HTML中引用CSS的方法主要有:
1、行内样式
2、内嵌式
3、链接式
4、导入样式
行内样式
指写在标签里的Style元素的值
<p style="color: #FF0000;">行内样式</p>
推荐教程:html教程
内嵌式
写在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
行内样式
内嵌式
导入式
更多编程相关内容,请关注Gxlcms编程入门栏目!
热心网友
时间:2022-04-29 09:40
1、html引入css文件之直接在div中使用css样式制作div+css网页
<div style="border:1px red solid;">html引入css文件</div>
说明:html引入css文件的这种方法不建议使用,因为会让页面的标签很多,看起来很累赘,体现不了css的优势,当然如果你非常想用这种方法,在不经常更改的地方可以用一用,但是还是不推荐。
2、html引入css文件之html中使用style自带式
直接在header 里面写css
<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>
说明:html引入css文件的这种方法适合在页面较少的情况下使用。优点:速度 快,所有的css控制都是针对本页面标签的,没有多余的css命令;再者不用外链css文件。直接在html文档中读取样式。缺点如果页面较多改版会很麻烦,单个页 面显得臃肿,css不能被其他html引用造成代码量相对较多,维护也麻烦些。但是采用这种方法的公司大多有钱,对他们来说用户量是关键,他们不缺人进 行复杂的维护工作。
3、html引入css文件之使用@import引用外部CSS文件
将一个独立的.css文件引入HTML文件中,导入式使用css规则引入外部css文件,<style>标记也是写在<head>标记中,使用的语法如下:
<style type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径
</style>
4、html引入css文件之使用link引用外部CSS文件
在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用html规则引入外部css。
<link href="./mystyle.css" rel="stylesheet" type="text/css"/>
说明:html引入css文件的这种方法就不需要style标签,而是直接通过link一个样式来引用外部样式,推荐使用link来引用外部的css样式方法。