`
JavaCrazyer
  • 浏览: 2990264 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类

网页引入CSS的四种方式

阅读更多


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

<元件(标签) 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="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> 

要注意的是,行末的分号是绝对不可少的! 



PS:


问题1.到底link和@import有什么区别?

我们先来看看他们的定义

link元素

HTML和XHTML都有一个结构,它使网页作者可以增加于HTML文档相关的额外信息。这些额外资源可以是样式化信息(CSS)、导航助手、属于另外形式的信息(RSS)、联系信息等等。

@import

指定导入的外部样式表及目标设备类型。


其实link和@import的最根本区别就是,

link是一个html的一个标签,而@import是css的一个标签,

link除了调用CSS外还可以有其他作用譬如声明页面链接属性,声明目录,rss等等,而@import就只能

调用CSS。如果单独从外部引用CSS来说,他们的作用是基本一样,只不过上面的老大不一样而已。:)


问题2.link合import到底那个更好

上面说了因为上面的老大不一样,所以在使用上就会有一些细节的区别,不能说总体谁好谁坏,

只能说具体情况具体分析。

1)我要用javascript进行样式选择;

这个时候就要用link,因为link是html元素,可用javascript去控制dom元素最后达到改变样式的效果。

看下列代码

<link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" />

<link rel="stylesheet" href="/css/orange.css" type="text/css" media="screen" title="orange" />

<link rel="alternate stylesheet" href="/css/blue.css" type="text/css" media="screen" title="blue" />

<link rel="alternate stylesheet" href="/css/pink.css" type="text/css" media="screen" title="pink" />

<link rel="alternate stylesheet" href="/css/slate.css" type="text/css" media="screen" title="slate" />

这是一段很经典的改变页面风格的代码,因为我们今天主要讲的是link和import,所以我这里只列出了引用CSS部分。

我们先来看看link里面个个属性都是表达了什么意思:

[1]rel:用来声明链接对象的作用或者类型。

譬如上面的的代码:"stylesheet"表示链接一个默认的CSS,而"alternate stylesheet"折表示备选的CSS

[2]href:这个就不用我说了吧,引用CSS的文件路径。

[3]tyle:文件类型

[4]media:应用的设备,"screen"是说明应用在屏幕上。

[5]title:是CSS的名称。

这段代码中一共有5个CSS,第一个是基本样式,而其他四个是风格样式,利用javascript去控制默认显示的样式title就ok了。


2)我要在应用打印样式;

打印样式顾名思义就是打印页面时候的样式。

这个样式在普通浏览下是没有效果的,只有在打印的时候生效。

如果要为页面单独引用打印样式的话,link和@import都可以的。

link代码

<link rel="stylesheet" href="/css/styles.css" type="text/css" media="print" />

@import代码

<style type="text/css">

@import url(foo.css) print;

</style>

另外对于CSS来说还有一种方式@media:

@media print {

@import "print.css"

}

用@media先制定设备为 print,然后再用@impor链接


3)我要引用多个样式;

如果要在一个页面上引用多个样式组合产生效果的话,永link和@import也是都可以的。

link代码

<link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" />

<link rel="stylesheet" href="/css/orange.css" type="text/css" media="screen" />

@import代码

<style type="text/css">

     @import url(../css/base/my.layout.css);

     @import url(../css/base/my.typo.css);

    </style>

不过个人觉得,用@import引用多文件的时候更加清晰一些

另外对于多样式还有一种link于@import的组合用法。

先用link引用一个CSS文件

<link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" />

然后在这个CSS文件里面再引用。

<style type="text/css">

     @import url(../css/base/my.layout.css);

     @import url(../css/base/my.typo.css);

    </style>

这样做的好处是,如果你一个站点所有页面引用的样式都是一样的,

而有又多个CSS,如果你每个页面都加4,5个一样的CSS样式,却是浪费代码和精力,

所以莫不如这样做,所有一个页面都引用一个CSS,然后一个CSS在引用多个CSS,方便

管理和维护。


5
2
分享到:
评论

相关推荐

    Elasticsearch初识与简单案例.pdf

    Elasticsearch是一个基于Lucene的分布式全文搜索引擎,提供灵活且高效的搜索和分析功能。通过HTTP请求和客户端库,用户可以索引和搜索文档,执行复杂查询,进行数据分析,并享受高亮显示等特性。其高级功能如复合查询、聚合分析、滚动搜索等,使其适用于各种数据处理和分析场景。Elasticsearch还具有强大的监控和日志功能,确保集群稳定运行。总之,Elasticsearch是企业级搜索和分析的理想选择。

    Python基于LSTM模型对全国的空气质量数据进行可视化分析预测源代码

    介绍 对全国2019年1月至2023年12月的空气质量数据进行分析,绘制时间序列图,展示每月/每季度的平均AQI变化趋势。绘制不同省份和城市的平均AQI热力图。分析不同污染物的浓度分布和趋势。绘制空气质量等级分布图。 需求说明 对空气质量数据进行数据分析,并使用LSTM模型进行预测。 安装教程 pip install jupyter pip install numpy pandas matplotlib seaborn 使用说明 在项目路径下打开终端输入jupyter notebook就行

    百问网linux桌面GUI,基于LVGL 8.x。.zip

    百问网linux桌面GUI,基于LVGL 8.x。

    基于Vue开发的XMall商城前台页面 PC端.zip

    基于Vue开发的XMall商城前台页面 PC端.zip

    2019年中国民航大学电子设计竞赛E题-自动导航运输车

    2019年中国民航大学电子设计竞赛E题-自动导航运输车 全国大学生电子设计竞赛(National Undergraduate Electronics Design Contest),试题,解决方案及源码。计划或参加电赛的同学可以用来学习提升和参考

    精灵宝可梦go游戏UI界面设计PSD源文件.zip

    游戏开发资源,游戏UI,游戏GUI,游戏图标,PSD格式,XD格式,PNG下载,源文件,可编辑下载,游戏购物充值界面,宝石,图标,PS格式,AI格式等,游戏APP

    线索二叉树的实现.doc

    (1)逻辑设计:写出抽象数据类型的定义,各个主要模块的算法,并画出模块之间的调用关系图; (2)详细设计:定义相应的存储结构并写出各函数的伪码算法。 (3)程序编码:把详细设计的结果进二步求精为程序设计语言程序。 (4)程序调试与测试:采用自底向上,分模块进行,即先调试低层函数。 (5)结果分析:程序运行结果包括正确的输入及其输出结果和含有错误的输入及其输出结果。算法的时间、空间复杂性分析; 效果表现为用户输入一串字符表示的先序序列,程序能够根据这个序列正确地建立二叉树,并通过中序线索化非递归遍历结果。这有助于验证二叉树结构和遍历算法的正确性,同时对于理解和操作二叉树数据结构非常有帮助。 程序的输出结果证明了其对二叉树操作的正确性和有效性。

    资源【STM32+HAL】SDIO模式读写SD卡

    ​ 一、准备工作 有关CUBEMX的初始化配置,参见我的另一篇blog:【STM32+HAL】CUBEMX初始化配置 二、所用工具 1、芯片: STM32F407VET6 2、IDE: MDK-Keil软件 3、库文件:STM32F4xxHAL库 三、实现功能 实现用DMA读写SD卡内容 ​

    node-v10.4.0-win-x86.zip

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    HTML5小游戏源码下载网页版游戏JS小游戏-圈泡泡游戏源码.zip

    HTML5小游戏源码下载,JS小游戏源码下载,坦克大战,驴子跳,连连看,俄罗斯方块,圈泡泡,塔防,太空战舰,愤怒的小鸟,植物大战僵尸,水果忍者,扫雷,超级玛丽,打地鼠,坦克大战,麻将等JS小游戏源码下载,游戏开发教程,网页游戏,本地直接打开就可以玩。

    node-v12.4.0-sunos-x64.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    node-v7.7.4-linux-x86.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    蓝色大气IDC代理商分销管理系统商业平台源码 仿西部数码站.rar

    蓝色大气IDC代理商分销管理系统商业平台源码 仿西部数码站.rar蓝色大气IDC代理商分销管理系统商业平台源码 仿西部数码站.rar

    PHP开发虚拟资源在线交易平台程序源码 含多接口 支付功能.rar

    PHP开发虚拟资源在线交易平台程序源码 含多接口 支付功能.rarPHP开发虚拟资源在线交易平台程序源码 含多接口 支付功能.rar

    Delphi编程语言的深度解析

    Delphi作为一款功能强大的编程语言,以其直观易用的集成开发环境(IDE)和高效的编译器赢得了广大开发者的青睐。本文将对Delphi编程语言的特性、应用领域、编程环境、以及与其他编程语言的比较进行全面而深入的解析,并结合实际案例展示Delphi的编程实践。 Delphi是一种面向对象的编程语言,同时它也是一款可视化软件开发工具。Delphi最初由Borland公司推出,并在后续发展中被Embarcadero Technologies接手。其第一个版本发布于1995年,当时该软件还叫做Object Pascal,后来才更名为Delphi。 Delphi作为一款功能强大的编程语言,在应用程序开发领域具有广泛的应用前景。其直观易用的IDE、高效的编译器以及丰富的组件库为开发者提供了强大的支持。通过本文的解析和案例展示,我们可以看到Delphi在快速开发、跨平台性以及面向对象等方面的优势。随着技术的不断进步和需求的不断变化,相信Delphi将继续发挥其在应用程序开发领域的重要作用。

    国外游戏UI设计PSD+AI源文件12.zip

    游戏开发资源,游戏UI,游戏GUI,游戏图标,PSD格式,XD格式,PNG下载,源文件,可编辑下载,游戏购物充值界面,宝石,图标,PS格式,AI格式等,游戏APP

    node-v8.1.1-x86.msi

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    node-v6.14.3-sunos-x64.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    node-v8.9.4-x86.msi

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    node-v7.6.0-linux-armv6l.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

Global site tag (gtag.js) - Google Analytics