html怎么引用css文件
程序员文章站
2022-03-02 14:05:30
...
引用css文件的方法:1、使用“<link type="text/css" rel="styleSheet" href="CSS文件路径" />”语句;2、在style标签中使用“@import url("css文件路径");”语句。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表(外联CSS),有两种方式:链接式、导入式。
语法:
1、链接式
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2、导入式
<style type="text/css"> @import url("css文件路径"); </style>
例如:
<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>外部样式表</title> <!--链接式:推荐使用--> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!--导入式--> <style type="text/css"> @import url("css/style.css"); </style> </head> <body> <ol> <li>1111</li> <li>2222</li> </ol> </html>
链接式和导入式的区别
<link>
1、属于XHTML
2、优先加载CSS文件到页面
@import
1、属于CSS2.1
2、先加载HTML结构在加载CSS文件。
外联CSS的优点:
1、HTML页面的大小更小,结构更清晰。
2、加载速度更快。
3、相同的.css文件可以在多个页面上使用。
外联CSS的缺点:
1、在加载外部CSS之前,页面可能无法正确呈现。
以上就是html怎么引用css文件的详细内容,更多请关注其它相关文章!
推荐阅读
-
html中播放swf文件,怎么显示下面的开关面板的部分?_html/css_WEB-ITnose
-
大神帮忙看下这个 空指针异常 怎么解决 _html/css_WEB-ITnose
-
是怎么用的?_html/css_WEB-ITnose
-
求教,有这么一个效果,当把鼠标放上去二维码慢慢的出来,鼠标离开二维码慢慢的下去,怎么去实现。_html/css_WEB-ITnose
-
【thinkphp】引用js文件函数报错,直接把函数写在html中使用则正常
-
文件图标css样式_html/css_WEB-ITnose
-
怎么理解服务?_html/css_WEB-ITnose
-
bootstrap栅格怎么格5个格出来_html/css_WEB-ITnose
-
公共书包public(例子文件:_samples/public.html)-缺省存在的书包_html/css_WEB-ITnose
-
JS 实现需要时加载js和css文件_html/css_WEB-ITnose