HTML与CSS的链接方式分类:
一.行内式
直接在标签后面添加该标签的属性值
例如:
二.嵌入式
在title标签后添加
注意:需要将样式放入
中
例如:
css样式使用
body{
background-color: antiquewhite;
}
p{
background-color: aqua;
}
CSS使用规则
CSS使用规则/p>
三.导入式
创建css样式表如mystyle.css,再在HTML中链接此mystyle.css样式表。
@import"mystyle.css"
四.链接式
创建css样式表如style.css,再在HTML中链接此style.css样式表。
例如:
HTML例子:
css样式使用
CSS使用规则
CSS使用规则/p>
CSS例子:
body{
background-color: antiquewhite;
font-size: 17px;
}
结果图:
五.采用导入式和链接式还是有不同的区别的:
1.使用链接式时,会在加载页面主体部分之前装载CSS文件,这样显示出来页面一开始就是带有样式效果的;
使用导入式时,会在整个页面装载完成后在装载CSS文件,对于有的浏览器来说,在一些情况下,如果网页文件体积比较大的的时候,则会出现先显示无样式的页面,闪烁一下在出现设置样式后的效果,对于浏览者的感受,这是导入式的一个缺陷。
2.对于一些较大的网站,为了便于维护,可能会希望把所有的CSS样式分类别放到几个CSS文件中,如果这样使用链接式引入,就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类,就需要同时调整HTML文件。这对于维护工作来说,是一个巨大的缺陷。如果使用导入式,则可以只引进一个总的CSS文件,在这个文件中在导入其他独立的CSS文件;而链接式则不具备这个功能。
因此,建议如果需要引入一个CSS文件,则使用链接方式;如果需要引入多个CSS文件,则首先用链接方式引入一个“目录”CSS文化,在这个“目录”CSS文件中再使用导入式引入其他CSS文件。
但是,若是希望通过JavaScript来动态决定引入哪个CSS文件,则必须使用链接方式才能实现。
相关内容
365betasia
⌚ 07-04
👁️🗨️ 5100
365bet外围
⌚ 09-18
👁️🗨️ 6984
365bet外围
⌚ 08-12
👁️🗨️ 4717