Web--CSS控制页面(link与import方式区别)

    先了解:

【1】         “Table”和“DIV”这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面结构

W3C,是World Wide Web Consortium的缩写,中文是W3C组织或者万维网联盟。W3C标准不是一个标准,而是一系列标准的集合,

包含三部分的标准:结构(Structure)、表现(Presentation)行为(Behavior)。

结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAscript等

一般不能说是“DIV+CSS",要说就说成”XHTML+CSS",两种叫法倾向于后者。

【2】    CSS控制页面有四种方式:行内样式、内嵌样式、链接样式、导入样式

1. 行内样式如:<p style="text-indent: 4px; font-size:12px;"></p>

会导致HTML页面不够纯净,文件体积过大,不利于搜索蜘蛛爬行,从而导致后期维护成本高。

2: 内嵌样式如: <head>...<style type="text/css">

#left_side{ color:#909090; font-size: 24px; }        </style>...</head>

如果一个网站有很多页面,内嵌方式每个文件都会变大,后期维护难度也大,如果文件很少,CSS代码也不多,这种方式也顶号好~

3: 链接样式如:<head>...<link rel="stylesheet" type="text/css" href="../style.css" /> ...</head>

这种样式将HTML文件和CSS文件彻底分成两个或者多个文件,实现了页面框架HTML代码与表现CSS代码的完全分离,使得前期制作和后期维护都十分方便,推荐使用这种方式。

4: 导入样式如: @import "style.css" ;

在HTML初始化时,会被导入到HTML文件中,成为文件的一部分,类似内嵌样式

================================================================================================================

【3】链接样式与导入样式的区别:

link

link就是把外部CSS与网页连接起来。

@import

import文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件。

为什么使用@import

大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式.

另一个主要的原因就是当你的网页需要引入几个外部CSS文件时.你可以使用link引入一个CSS,然后在这个CSS文件中用@import方式引入其它几个CSS文件.这样看起来更容易管理.

为什么使用link

使用link方式一个最主要的原因就是你可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel="alternate stylesheet"属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式.

@import的小毛病

如果你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签.

04-11更新:  @import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,例如放置在@import后面的script文件会在CSS之前被下载.

到底要用那种方式

就目前看来小型的网站还是使用link比较合适(或者说比较流行),当然如果将来我们需要把CSS进行模块化管理也肯定要用到@import.

举个例子

可以用此做法:建立三个CSS文件(base.css/common.css/page.css),把他们@import到另一个CSS文件(style.css,其它名字也可以,随便你),然后在页面上只连接style.css,这样可以更好实现代码的维护



时间: 2024-08-05 23:48:23

Web--CSS控制页面(link与import方式区别)的相关文章

Web--CSS控制页面(link与import方式差别)

    先了解: [1]         "Table"和"DIV"这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面结构 W3C,是World Wide Web Consortium的缩写.中文是W3C组织或者万维网联盟.W3C标准不是一个标准,而是一系列标准的集合. 包括三部分的标准:结构(Structure).表现(Presentation)行为(Behavior). 结构化标准语言主要包含XHTML和XM

引用外部CSS的link和import方式的分析与比较

很多网页中的 CSS 链接与引用是这样写的: <style type="text/css" media="screen"> @import url("http://www.abaonet.com/abc.css"); </style> 而很多网站使用的都是 link <link rel="stylesheet" rev="stylesheet" href="style

引入CSS文件的方式,以及link与@import的区别

一.引入css的方式 在HTML中引入css的方法主要有4种:行内式.内嵌式.链接式和导入式. 1.行内式 <div style="background:yellow;"></div> 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 <html> <head> <style> ..// 此处添加css代码 </style> </head> <

页面引入css用link和import的区别

假设有一个css文件a.css,文件里的内容如下: p { font-size: 18px; } 现在分别使用两种方式引入a.css: 1.使用html的link标签 <link rel="stylesheet" type="text/css" href="a.css"> 2.使用import <style type="text/css"> @import url(a.css); </style&

css 样式引入的方法 link 与import的区别

<link> 元素所参考的样式用户可以自由的选择加以改变,而导入的样式表单就自动的与剩下的样式表融合在一起了 CSS与HTML文档结合的4中方法:1 使用<link>元素链接到外部的样式文件2 在<head>元素中使用"style"元素来指定3 使用CSS "@import"标记来导入样式表单4 在<body>内部的元素中使用"style"属性来定义样式 1 用link进行引用 <link r

第二章 使用CSS控制页面

本章主要介绍:如何使用CSS控制页面,以及其控制页面的各种方法,包括行内样式.内嵌式.链接式和导入式等,最后讨论各种方式的优先级问题 1.行内样式 行内样式是所有样式方法中最为直接的一种,直接对HTML的标记使用Style属性,然后将CSS代码直接写在其中. <html> <head> <title> 页面标题</title> </head> <body> <p style="color:#ff0000;font-si

CSS中link和@import的区别

你对CSS中link和@import的区别是否熟悉,这里和大家分享一下,@import  属性用来指定导入的外部样式表及目标设备类型, link除了调用CSS外还可以有其他作用譬如声明页面链接属性,声明目录,rss等等,而@import就只能 调用CSS. CSS中link和@import有什么区别? 定义  ◆link元素 HTML和XHTML都有一个结构,它使网页作者可以增加于HTML文档相关的额外信息.这些额外资源可以是样式化信息(CSS).导航助手.属于另 外形式的信息(RSS).联系信

CSS的link和@import的区别

CSS的link和@import的区别: 标签和@import都可以引入外部样式表,功能看起来类似,但是它们之间还是有不少区别的,由于标签使用比较频繁,这里就不多介绍了,点击CSS的@import的用法可以了解@import的用法.下面就简单介绍一下它们两者的区别. 一[email protected]可以在一个样式表中引入其他样式表,在同一目录下有三个样式表分别是:main.css.one.css和two.css,在main样式表中可以引入one.css和two.css.方法如下: @char

【转载】link和@import的区别

link和@import的区别 原文地址:http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html 页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import.外部引用CSS两种方式link和@import的方式分别是: XML/HTML代码<link rel="stylesheet" rev="stylesheet"