引入css样式表的四种方式介绍

2016-02-19 14:33 13 1 收藏

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐引入css样式表的四种方式介绍,希望大家看完后也有个好心情,快快行动吧!

【 tulaoshi.com - Web开发 】

一、使用STYLE属性: 将STYLE属性直接加在个别的元件标签里。

元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}例如:

TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%
这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』。

二、使用STYLE标签: 将样式规则写在STYLE.../STYLE标签之中。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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="example.css"
即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的head/head部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

四、使用@import引入: 跟LINK用法很像,但必 放在STYLE.../STYLE 中。
STYLE TYPE="text/css"
!--
  @import url(引入的样式表的位址、路径与档名);
--
/STYLE
例如:
STYLE TYPE="text/css"
!--
  @import url(http://yourweb/ example.css);
--
/STYLE
要注意的是,行末的分号是绝对不可少的!

来源:http://www.tulaoshi.com/n/20160219/1607211.html

延伸阅读
标签: Web开发
在上两节中我们已经为网页添加过简单的样式表了,我们也了解了样式表的语法基础。本节将介绍将样式表加入到页面中的几种不同方法。 内部样式表     其实我们在前两节已经应用了内部样式表。内部样式表需要在网页的head部分定义,格式如下: head style type="text/css" /*符合CSS语法结构的CSS语句,例如*/ body {...
    web标准设计网站,过渡的方法主要是采用XHTML+CSS,css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS,如果你以前不常用,那么现在就开始学习吧。要制作符合web标准的网站,不懂CSS是设计不出漂亮的页面的。     事实上,所有表现的地方都需要用CSS来实现。我们以前都习惯用tabl...
标签: Web开发
总结了一下自己工作中使用到的注释书写规范,没有什么技术含量,只是用于统一制作方式,方便维护。包含了区域注释、单行注释、注释层级和协助注释四个部分。 如果大家有其它的建议,欢迎留言。 大部分同学使用的区域注释的方法,会以注释内容开始或注释内容结束、start或end等,相比之下,以S或E开始可以更快的使用,比如只要写一次开始或...
标签: Web开发
一、 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色: 在默认情况下,用DreamWeaver设计的网页中的超级链接都有下划线,看上去不大美观。要去除这些讨厌的下划线,很多报刊介绍的方法都是在HTML源代码中手工加入一段代码,其实在DreamWeave中很容易去除链接的下划线。首先在DreamWeaver的Document Windows中随便建立一个链接...
标签: Web开发
你有没有觉得你的CSS样式表文件过于臃肿?其实如果你注意并培养一些比较好的CSS书写习惯,我想你的CSS样式表过于肥胖的问题会得到很好的改善的。来看看下面的简单5步吧,掌握之后你便能立即为你的CSS样式表修身了。 第一步:学会如何组合选择器 什么是选择器? 如果你还不知道什么叫做选择器,你可以先参考一下w3schools.com的CSS语法概述...

经验教程

73

收藏

14
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部