HTML页面引入CSS的几种方式及区别_html/css_WEB-ITnose

WBOY
發布: 2016-06-21 09:09:37
原創
1300 人瀏覽過

1. 使用HTML标签的style属性

    如:

    这种方式的优点:分散灵活方便;

    缺点:缺乏整体性和规划性,不利于维护,维护成本高;

    这种方式的CSS渲染的优先级要高于其它三种。

2. 将样式代码写在标签中

    通常将style标签放到HTML文件

标签里

    如:

    此种方式的优点:单个页面内的CSS代码具有统一性和规划性,便于维护。

    缺点:多个页面之间CSS复用仍然不够。

3. 使用标签,引入外部CSS文件

    

    外部CSS文件:base.css:

    p { color: #000}

    ...

    此种方式的优点:一个页面可以引入多个外部CSS文件,方便CSS代码复用,方便维护;

    目前应用做多。

    缺点:代码量集中,容易混乱。


4. 使用@import,引入CSS文件

    这种方法既可以用在

    @import url ('/css/list.css')

    特点:引入方便,但性能可能较差


使用link 标签和@import区别:

1.  范畴不同:  link是HTML标签,除了加载CSS之外,还可以定义其他如RSS事务;@import属于CSS范畴,只能加载CSS;

2.  加载顺序不同:link引入CSS时,在页面加载时同时加载,而@import需要页面完全载入以后加载;

3.  兼容性差别: link是XHTML标签,因此无兼容问题,而@import是在CSS2.1提出的(IE5以上才能识别),因此低版本的浏览器不兼容;

4.  是否支持JS DOM改变: link支持使用JavaScript控制DOM改变CSS样式,@import不支持;

5.  权重不同: link方式样式的权重高于@import样式的权重。





來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板