首页 > Web开发 > 详细

css的引入方式及区别

时间:2017-02-19 17:08:41      阅读:208      评论:0      收藏:0      [点我收藏+]

css的引入方式:

1.行内样式:<p style="width:300px;height:20px;color:#000;">

 

2.内嵌样式:将css样式内嵌到HTML页面中,写在<style>与</style>之间,例如:

                 <html>

                             <head>

                                         <title>css引入方式--内嵌</title>

                                         <style>

                                                    div{width:500px;height:500px;background:red;margin:0 auto;}

                                         </style>

                             </head>

                             <body>

                                        <div></div>

                             </body>

                 </html>

 

3.引入样式表----最常用的方法:<link href=".../css/index.css" type="text/css" rel="stylesheet">

 

4.导入样式---

                 <html>

                             <head>

                                         <title>css引入方式--内嵌</title>

                                         <!--
                                              @import "*.css"
                                         -->

                             </head>

                             <body>

                                        <div></div>

                             </body>

                 </html>

 

 

行内样式:在行内添加样式会造成后期维护困难。

内嵌样式:将css样式内嵌到页面中会使HTML页面体积过大,加载速度减慢。

link与@import:使用link会与页面同时加载,而@import会在页面加载完成后再加载,造成速度过慢。

                       link是标签,不存在兼容问题,而@import在低版本浏览器(例如IE6)中不兼容。

                       link支持JavaScript通过DOM修改样式,@import则不支持。

 

css的引入方式及区别

原文:http://www.cnblogs.com/nana0925/p/6416046.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!