`

CSS在页面里面的三种引入方式(转)

    博客分类:
  • CSS
阅读更多

CSS在页面里面一般有三种引入方式
1.在页面里面直接写
    
<style type="text/css">
     body{
       margin: 0;
      padding: 0;
     }
</style>

2.用link进行引用

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

3.用import进行引用

<style type="text/css">
     @import url(my.css);
</style>

第一种是直接在html页面上进行CSS书写,而第二种和第三种是采用外部引用样式单独提取文件。

问题1.到底link和@import有什么区别?
我们先来看看他们的定义

Quote
link元素
HTML和XHTML都有一个结构,它使网页作者可以增加于HTML文档相关的额外信息。这些额外资源可以是样式化信息(CSS)、导航助手、属于另外形式的信息(RSS)、联系信息等等。
Quote
@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,方便
管理和维护。

分享到:
评论

相关推荐

    HTML外部引用CSS文件不生效原因分析及解决办法

    作为一个前端小白,鼓捣了几...然后再我的html文件里面去引入这个外部css: XML/HTML Code复制内容到剪贴板 &lt;link rel=stylesheet type=text/css href=css/style.css&gt;  在浏览器一刷新。。哇,kao。竟然没

    用css写的页面

    标题“用css写的页面”揭示了我们即将探讨的是关于CSS(Cascading Style Sheets)在构建网页布局和设计中的应用。CSS是Web开发中的一个重要部分,它负责定义HTML或XML(包括SVG、XHTML等)文档的呈现方式,使得我们...

    CSS教程实例大全 很多实例在里面

    **描述中的“CSS教程实例大全是学习css的好参考 很多实例在里面”**进一步强调了这个教程的价值,特别是对于那些希望通过实际操作来学习CSS的人来说。实例教学是一种有效的学习方法,因为它允许学习者看到代码如何...

    炫酷的登录页面里面含有js和css和html代码

    在这个炫酷的登录页面中,CSS可以用来设置背景图片、文字颜色、边框样式、动画效果等,使页面看起来更加吸引人。例如,你可以用CSS选择器选中特定的HTML元素,然后通过属性如`background-color`改变背景色,`font-...

    html5 css3圆形进度条倒计时页面跳转代码

    接着,CSS3引入了大量新的选择器和样式属性,使设计更加精细和灵活。在创建圆形进度条时,可以利用CSS3的`border-radius`属性将矩形边框变为圆形。通过设置`width`和`height`相同,我们可以创建一个完美的圆形。...

    3种网页过度效果代码(CSS3)

    标题中的“3种网页过度效果代码(CSS3)”指的是使用CSS3实现的三种不同的网页过渡效果。CSS3是层叠样式表的第三个主要版本,它引入了许多新的功能和改进,其中包括丰富的动画和过渡效果,使得网页设计更加动态和吸引...

    HTML5+CSS3+JavaScript 网页设计与制作期末综合大作业 杭帮美食五个页面(附完整答案和学生用要求及素材)

    在本项目中,CSS3可以用来进行页面布局,例如使用Flexbox或Grid布局来创建响应式设计,适应不同设备的屏幕尺寸。通过选择器增强,可以更精确地定位和样式化元素,如伪类`:hover`、`:active`和`:focus`,以及属性选择...

    教你去学如何使用css,美化你的网页

    在网页设计领域,CSS(Cascading Style Sheets)是一种至关重要的技术,用于定义网页内容的样式、布局和呈现效果。本教程将引导你逐步学习如何使用CSS,让你的网页更加美观、专业。以下是对CSS的一些核心知识点的...

    CSS教程宝典里面简单介绍了css的基础

    这些定位方式有助于控制元素在页面上的位置。特别是,浮动(`float`)和清除(`clear`)的概念在布局设计中尤为重要。 层叠与继承是CSS的另一大特性。多个样式可以应用于同一个元素,CSS会根据优先级确定哪个样式...

    基于HTML5+css+JS的精美登陆注册界面

    HTML5、CSS和JavaScript是构建网页交互式用户体验的三大核心技术。在这个基于HTML5+CSS+JS的精美登录注册界面项目中,我们将深入探讨这些技术如何协同工作,为用户提供直观且吸引人的界面。 首先,HTML5(HyperText...

    HTML5+CSS实现完美烟花网页特效类页面源码

    在这个名为"HTML5+CSS实现完美烟花网页特效类页面源码"的项目中,开发者利用这两门语言的特性,为用户带来了一种独特的视觉体验——点击鼠标就能在网页上绽放出绚丽的烟花。 首先,HTML5是超文本标记语言的最新版本...

    酷炫 html5页面加载 loading动画效果 demo 基于原生无第三方依赖

    本示例"酷炫html5页面加载loading动画效果demo"是基于原生JavaScript和CSS实现的,无需任何第三方库,简化了开发流程,提高了性能。 首先,我们来详细了解一下如何实现这种加载动画。在HTML结构中,我们需要在`...

    基本的HTML页面,其中包含了一些内联CSS.rar

    在标题提到的“基本的HTML页面,其中包含了一些内联CSS.rar”中,我们有一个压缩文件,里面包含了一个使用了内联CSS样式的HTML文档。内联CSS是指将CSS样式直接插入HTML元素的`style`属性中,以控制该特定元素的样式...

    CSS和jQuery动画切换实例

    在动画方面,CSS3引入了`transition`和`animation`属性,使得元素可以在不同状态间平滑过渡。例如,你可以设置一个元素的`opacity`(透明度)在一段时间内从0变为1,从而实现淡入效果。这可以通过以下CSS代码实现: ...

    纯CSS实现的一百多种icon

    【纯CSS实现的一百多种Icon】是一种高效且实用的网页设计技术,它允许开发者通过CSS代码来创建各种图标,而无需依赖外部图像资源。这种方式在现代网页和移动应用开发中非常流行,因为它提供了多方面的优势。 首先,...

    html转pdf三种方式 js 和itext所需js和jar

    HTML转换为PDF是一种常见的需求,尤其在数据报告、网页保存和文档打印等方面。本文将详细介绍两种主要的方法:前端JavaScript库和后端Java的iText库。 1. **前端JavaScript库** 前端实现HTML转PDF,主要是通过...

    十个静态页面展示-练习 HTML-CSS

    这个压缩包文件包含了 01-HTML-CSS 这个子文件夹,里面很可能是多个 HTML 和 CSS 文件,用于演示和练习不同的页面布局和样式设计。 首先,我们从 HTML(HyperText Markup Language)开始。HTML 是构建网页的基础,...

    HTML+CSS实现网易云网站

    在项目中,可能有一个名为`css`的文件夹,里面包含一个或多个CSS文件,如`style.css`。这些文件定义了网页的颜色、字体、大小、位置等视觉特性。CSS选择器可以选取HTML中的特定元素,如`#header`选择ID为“header”...

    健身房锻炼CSS3网站模板里面包含6个子页面,适合运动健身企业模板下载。.zip

    5. **Flexbox布局**:弹性盒模型(`flexbox`)提供了一种更为灵活的布局方式,可以轻松处理容器内元素的对齐、排列和大小调整。 6. **Grid布局**:网格布局(`grid`)系统使得创建复杂的二维布局变得简单,有助于...

    images-css(1).zip

    3. **盒模型**:CSS中的盒模型描述了元素在页面上的布局方式,包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。 4. **定位**:CSS提供了相对定位(relative)、绝对定位(absolute)、固定定位...

Global site tag (gtag.js) - Google Analytics