• 技术文章 >web前端 >html教程

    html怎么引用css文件

    青灯夜游青灯夜游2021-07-14 12:00:50原创217

    引用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之前,页面可能无法正确呈现。

    学习视频分享:css视频教程html视频教程

    以上就是html怎么引用css文件的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:html css文件
    上一篇:html+css+js实现星空旋转和文字淡入效果(附代码) 下一篇:18个必知必会的HTML面试题(附答案解析)
    VIP会员

    相关文章推荐

    • html中如何添加一个表头• html hr标签能设置黄颜色吗• html文本区域大小怎么设置• html如何调用外部css• php怎么修改html文件内容

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网