频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
html引用css样式表的四种方式
2013-12-22 18:24:40           
收藏   我要投稿
方法一: css1.html

<html>

<head>

<title>内联样式(方法一)</title>

</head>

<body>

<a href=”https://www.baidu.com” style=”color:#FF00FF; font-size:80;”>百度一下</a>

</body>

</html>

 

 

 

方法二: css2.html

<html>

<head>

<title>style标签中调用(方法二)</title>

<style type=”text/css”>

a{color:#FF0000;background:#FFFF00;}

</style>

</head>

<body>

<a href=”https://www.baidu.com“>百度二下</a>

</body>

</html>

 

 

 

方法三: css3.html

<html>

<head>

<title>link标签中调用(方法三)</title>

<link rel=stylesheet type=”text/css” href=”three.css”/>

</head>

<body>

<a href=”https://www.baidu.com“>百度三下</a>

</body>

</html>

和css3.html同目录下的three.css文件: a{color:#FF00FF; background:#0000FF;}

 

 

 

方法四: css4.html

<html>

<head>

<title>@import指令(方法四)</title>

<style type=”text/css”>

@import url(“four.css”);

</style>

</head>

<body>

<a href=”https://www.baidu.com“>百度四下</a>

</body>

</html>

和css4.html同目录下的four.css文件: a{color:#0000FF; background:#FF00FF;}

 

 

 

 

 

**********************************************************************************************

在实际应用中,使用style属性的内联样式是不推荐使用的,不建议使用第一种方式,这种方式削弱了CSS集中控制整个文档外观的优点。

前3种方式利用了link标记和style标记,在IE(包括IE6、IE7和IE8 beta1)中有如下限制:

 

◆ 文档中只有前31个link或style标记关联的CSS能够应用;从第32个开始,其标记关联的CSS都将失效。

◆ 一个style标记只有前31次@import指令有效应用;从第32个@import指令开始忽略。

◆ 一个css文件只有前31次@import指令有效应用;从第31个@import指令开始忽略。

◆ 一个CSS文件的不能超过288kb。

IE对CSS的限制在绝大部分情况下是不会遇到的,即使遇到最佳的解决方案也应该是手动或者通过后端程序对CSS文件和响应的标记进行合并,

最小化的http请求数是优化页面呈现的第一原则

点击复制链接 与好友分享!回本站首页
相关TAG标签 样式 方式
上一篇:CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
下一篇:CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站