低一度

顶部横幅

css样式规则表引入的几种方式

2010-5-28 - diyidu - css应用 - Views

1.利用style属性将其直接加到个别的元件标签中。

<元件(标签) style="属性1:设定值1; 属性2:设定值2; ...">

实例：

<td style="color:red; font-size:12px; text-align:center; line-height:150%">

这种引入法优点是可以灵巧地应用样式于各标签中，但缺点则是没有统一性。

2.利用style标签将样式规则写在<style>...</style>之中。

<style type="text/css">
<!--
样式规则表
-->
</style>

实例：

<style type="text/css">
<!--
body {
color:red;
background:#FFF;
font-size:14px;}
td, p {
color:gray;
font-size:12pt}
-->
</style>

此法通常是将整个<style>...</style>结构，写在网页的<head>...</head>部分。其优点是能够维持整篇文件的统一性，只要是有声明的元件即会套用该样式规则，但缺点也很明显，即在个别元件中的灵活度表现不足。

3.利用link标签将样式规则写在.css的样式档案中，再以<link>标签引入。

<link rel=stylesheet type="text/css" href="css样式规则文件路径">

实例：假设我们需要调用一个叫“example.css”的样式规则文件，我们只须在网页中加入

<link rel=stylesheet type="text/css" href="example.css">

即可套用该样式规则文件中所制定好的样式了。此法通常也是将link标签写在网页的<head>...</head>部分（如Z-Blog模板样式的调用，就是采用这一规则）。其优点是可以将要套用相同样式规则的数篇文件都指定到同一个样式档案，缺点也是在个别文件或元件中灵活度表现不足。

4.利用@import引入。

这和link标签用法很像，但它必须放在<style>...</style>标签中。

<style type="text/css">
<!--
@import url(将引入的样式表路径   文件名);
-->
</style>

实例：

<style type="text/css">
<!--
@import url(http://yoururl/  example.css);
-->
</style>

需要注意的是，行末的分号是必不可少的！此法引入的优缺点与利用link标签引入相似。

关键词 // css实例 css css教程 样式表引入
出处：低一度，链接：http://www.diyidu.cn/post/css_yinrufs.html

上一篇：仿Google主题“Doogle”发布 下一篇：即日起启用新主题“Aqua_dyd”

随机推荐

to "css样式规则表引入的几种方式"

  • liuzm
    #1 liuzm 回复该留言 2010-5-28 17:41:05
    呵呵，学习中。。
    diyidu 于 2010-5-28 20:31:02 回复
    问好下，最近忙什么呢？
  • 猪八戒
    #2 猪八戒 回复该留言 2010-5-28 19:27:09
    代码太高难。学会了代码再回来学本文。
    diyidu 于 2010-5-28 20:31:51 回复
    CSS不会太难学吧？呵呵。
  • Firm
    #3 Firm 回复该留言 2010-5-28 20:56:15
    哈，习惯了用第一种。。
    diyidu 于 2010-5-28 21:01:19 回复
    恩，这几种方式我都在用，不过最常用的应该是第一和第三。
  • 网络蚂蚁
    #4 网络蚂蚁 回复该留言 2010-5-28 22:45:34
    技术活，现在还做不来。
    diyidu 于 2010-5-29 0:39:06 回复
    这算什么技术活？很简单的归纳啊。
  • 619
    #5 619 回复该留言 2010-5-28 23:41:34
    样式的引入是CSS中简单的基础知识，亦是容易被忽视的语义化重点，CSS的第一节课。
    diyidu 于 2010-5-29 0:40:00 回复
    说得是，这个确实常被忽视。
  • 股票推荐
    #6 股票推荐 回复该留言 2010-5-28 23:44:23
    一般都用link。
    diyidu 于 2010-5-29 0:41:03 回复
    视情况而定吧，我几种都有用过。
  • 影浅
    #7 影浅 回复该留言 2010-5-29 12:08:24
    其实第三和第四有一点很大的差别，功能上。
    diyidu 于 2010-5-29 14:48:48 回复
    恩，是的。。
  • 于泽鹏
    #8 于泽鹏 回复该留言 2010-5-29 12:55:42
    你该做个独立的主题站，全是皮肤主题！
    diyidu 于 2010-5-29 14:49:24 回复
    呵呵，其实就这些天比较频繁发这个而已：）
  • 石头
    #9 石头 回复该留言 2010-5-29 12:55:47
    现在大家都喜欢写这类文章了？
    diyidu 于 2010-5-29 14:49:56 回复
    这个只是自己归纳自己看的。
  • 张世旭
    #10 张世旭 回复该留言 2010-5-30 23:48:53
    赶得不算晚，来看看新主题。
    今天上午学了一上午的HTML，枯燥，学习ing。。
    diyidu 于 2010-5-31 9:09:56 回复
    欢迎呵。常来！
  • 老实人博客
    #11 老实人博客 回复该留言 2010-5-31 10:50:58
    都换新装了~~多年的老装，不要了？
    diyidu 于 2010-5-31 10:54:26 回复
    总要改头换面的嘛。
  • 蓝痕
    #12 蓝痕 回复该留言 2010-5-31 12:41:24
    用了你的修正版的google主题，自己不知道哪里有新的变化，桶哥指点下。
    diyidu 于 2010-5-31 14:04:16 回复
    都是一些细节啊，懒得说了，你下回去更新就是。

Add comment

验证码