在web页面中引用css的四种方法
2012-05-08 00:19
253 查看
作为一名前端开发工程师,平时在制作页面的时候,我们我们会用到很多中将CSS引入页面的方法,那么,今天我将分享一下这些方法,并讨论那种方法更好一些。
@import 可以放在页面的style标签里面,也可以方式在css样式表里面。
如果放在css样式文件里面,它必须在其他样式规则的最前面,否则将会无效。
建议将其放置在head标签里面。
@import方法,可以查看linxz写的一篇文章诡异的@import 能够更好的帮你理解。
后面两种方法是最不推崇的方法,一般不要用这两种方法,他们既不利于样式的重用,也不利于后期的修改。
1.用标签:
这种方法是最好的一种,在页面的标签中加入如下代码:<link rel="stylesheet" href="style.css" type="text/css" />
2.用@import规则:
<style> @import url(style.css); </style>
@import 可以放在页面的style标签里面,也可以方式在css样式表里面。
如果放在css样式文件里面,它必须在其他样式规则的最前面,否则将会无效。
3.用style元素
你可以将任何css样式放置在页面任何位置,但是需要将样式放置在style标签里面<style> p {margin: 0 0 20px 0;} </style>
建议将其放置在head标签里面。
4.用内联样式
内联样式可以允许你将任何css样式应用于页面的任何标签上,这些样式仅仅应用于当前样式,如下:<p style="color: red; padding: 20px;">这里是一些文本</p>
总结:
一般来说,第一种方法是比较好的方法,也是用的最广泛的方法。@import方法,可以查看linxz写的一篇文章诡异的@import 能够更好的帮你理解。
后面两种方法是最不推崇的方法,一般不要用这两种方法,他们既不利于样式的重用,也不利于后期的修改。
相关文章推荐
- html引用css的四种方法
- CSS控制HTML页面效果的四种方法
- jsp引用css和js文件方法 以及 java web应用程序文件结构
- 对Web页面元素的绝对唯一引用方法
- 前台页面技术之引用 js 与css 方法
- 在web页面里写引用资源绝对路径的替代方法
- 对Web页面元素的绝对唯一引用方法
- 第三讲:将CSS引用到HTML页面的4种方法
- CSS在页面使用的四种方法
- jsp引用css和js文件方法 以及 java web应用程序文件结构
- 网页中css四种链接引用方法浅谈
- 引用CSS文件到html网页里的四种方法
- 在Struts2中访问Web页面元素request、response、session、application的四种方法
- Firefox 插件 JSview是一套比较实用的JS,CSS文件查看工具,很方便,很快捷地查看页面引用了哪些文件,作为Web前端开发者是一套必备的插件,由于Firefox升级过快,插件很快不兼容了,这里对插件做了一些调整,可以兼容最新Firefox浏览器(目前FireFox 21)
- web项目的WEB-INF/jsp文件下面的jsp页面引用webRoot文件夹下面的css,js等文件失败
- Struts2 访问Action和Jsp页面出现的路径问题解决方案之 ---- 为jsp、图片、js、css等获取Web工程的绝对路径的方法
- 对Web页面元素的绝对唯一引用方法
- TIPS:在web页面里写引用资源绝对路径的替代方法
- 应用MasterPage的页面引用外部CSS文件的方法
- 引用外部.css或.js文件的路径问题--jsp或html页面或是在web项目中的引用