内联式样式表:直接写在现有的HTML中,如
<p style="color:red">这里的文字式红色的</p>
嵌入式样式表:使用"<style></style>"标签嵌入到HTML文件的头部中,如
![]()
>
注意:在<style>内的注释标签是为了当浏览器不支持样式表的时候,也不会在屏幕内将样式表的内容显示出来
外部式样式表: 样式表外部文件以【.css】为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将样式表链接到HTML文件内,如:
<link rel="stylesheet" href="basic.css" type="text/css">
在应用时可以根据需要随意运用以上3种方式,但是在实际应用中,本着表现与内容分离的原则,推荐使用外部式样式表,其优点如下:
1、独立于HTML文件,便于修改。
2、多个文件可以引用同一个样式表文件,从而保持页面外观的统一。
3、样式表文件只需要下载一次,就可以在其他链接了该文件的页面内使用。
4、浏览器会先显示HTML内容,然后再根据样式表文件进行渲染,从而使访问者可以更快地看到内容。
不过相对于特殊情况,也要灵活使用嵌入式样式表和内联式样式表。
另外,还有一种“导入式样式表”,使用“@import”导入外部的样式表文件,它需要写在<style>标签内,如:
![]()
>
这经常用来取代连接CSS到HTML中的<link>标签,这样做的好处是,一些老浏览器不接受@规则,进而不连接样式表。此时如果页面拥有良好的结构,则剩下朴素功能的HTML,虽然没有华丽的外表,但是访问者仍然能很好地查看内容。
相关文章:
-
2021-11-19
-
2021-12-25
-
2021-11-13
-
2021-10-21
-
2021-11-04
-
2021-11-22
-
2021-11-13
-
2021-12-15
猜你喜欢
-
2021-11-16
-
2021-12-22
-
2021-11-16
-
2021-10-20
-
2021-12-04
-
2021-10-21
-
2021-12-04
-
2021-08-15
相关资源
-
下载
2022-12-03
-
下载
2021-06-05
-
下载
2021-06-05