Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > body text

引入外部CSS的两种方式及区别_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:21:22
Original
884 people have browsed it

1、CSS的两种引入方式

  • 通过@import指令引入

    • 　　@import指令是CSS语言的一部分，使用时把这个指令添加到HTML的一个

    　　要与外部的CSS文件关联起来，得使用url而不是href，并且要把路径放在一个圆括号里面；

    <html><head><style type="text/css">        @import url(css/styles.css);</style><!--此处的type属性是针对HTML4.01的，若在HTML5中则不需要加--></head><body>......</body></html
    Copy after login

  • 通过标签引入（最常用方式）

    • <link type="text/css" href="style.css" rel="stylesheet" /><!--同理，type属性是针对HTML4.01的-->
    Copy after login

    2、两种方式的区别

  • 标签属于html标签，而@import是css提供的一种方式，标签不仅可以引入css，还可以做其他事，而@import只能引入css；
  • 加载顺序的区别：当一个页面被浏览时，link引入的css会被同步加载，而@import引用的css是等到其他元素全被下载完之后才被加载；
  • 兼容性的不同：@import是CSS2.1才提出的，所以只有在IE5以上才支持，低版本的浏览器不支持，而标签无此问题；
  • 当使用javascript控制DOM去改变样式时，只能使用标签，因为@import不是DOM可以控制的。

    • 　　

    　　//笔试或面试中有可能遇到！！！

     

    Related labels：
    引入外部CSS的两种方式及区别
    source：php.cn
    Previous article：请教大神，使用js在文本段落后插入div图片容器,结果图片却显示到段落前了，代码如下。非常感谢！_html/css_WEB-ITnose Next article：关于IE8下css的background属性不起作用的解决办法_html/css_WEB-ITnose
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Latest Issues
    function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
    From 2024-04-29 11:01:01
    0
    2
    1870
    How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
    From 2024-04-23 00:22:19
    0
    10
    2033
    The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
    From 2024-04-19 15:37:47
    0
    1
    1712
    There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
    From 2024-04-18 23:52:34
    0
    1
    1614
    Where is the courseware about CSS mind mapping? Courseware
    From 2024-04-16 10:10:18
    0
    0
    1627
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template