首页 > 代码库 > 引入样式表(css)的四种方式
引入样式表(css)的四种方式
一、使用style属性: 将style属性直接加在html标签里。
<标签 style="属性1: 设定值1; 属性2: 设定值2; ">
例如:
<td style="color:blue;font-size:9pt;font-family:‘黑体‘;line-height:150%;">
这种用法的优点 是可灵巧应用样式于各标签中,但是缺点则是没有整篇文件的『统一性』。
二、使用style标签: 将样式规则写在<style>...</style>标签之中。
<style type="text/css"> <!-- 样式规则表 --> </style>
例如:
<style type="text/css"> <!-- BODY { color: BLUE; background: #FFFFCC; font-size: 9pt} TD, P { COLOR: GREEN; font-size: 9pt} --> </style>
通常是将整个的 <style>...</style>结构写在网页的<head> </head>部份之中。
这种用法的优点就是在于整篇文件的统一性,只要是有声明的标签即会套用该样式规则。
缺点就是在个别标签的灵活度不足。
三、使用 LINK标签:
将样式规则写在.css的样式档案中,再以<LINK>标签引入。
假设我们把样式规则存成一个example.css的档案,我们只要在网页中加入
<LINK REL=STYLESHEET TYPE="text/css" HREF=http://www.mamicode.com/"example.css">
即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的<head></head>部份之中。
这种用法的优点就是在于可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或标签的灵活度不足。
四、使用@import引入: 跟LINK用法很像,但必须放在<STYLE>...</STYLE> 中。
<STYLE TYPE="text/css"> <!-- @import url(引入的样式表的位址、路径与档名); --> </STYLE>
例如:
<STYLE TYPE="text/css"> <!-- @import url(http://yourweb/ example.css); --> </STYLE>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。