css和css3的区别

Posted 2023-05-11

是升级版吗？？

参考技术A

CSS和CSS3都是样式，CSS3是在CSS上新增了样式属性。

CSS3新增特性

CSS3圆角边框：border-radius（解决了原有圆角边框需要截图的问题）

CSS3文本阴影与盒阴影：text-shadow、box-shadow（可以用于实现标签边框或阴影）

CSS3背景尺寸、背景切割和背景原点：background-clip background-origin background-size（移动端用于处理背景图适配问题）

CSS3变形 transform（二维变形以及三维特效）

CSS3动画 animation（实现复杂动画）

CSS3过渡 transition（实现简单动画）

CSS3 Media Query媒体查询（主要用于实现响应式布局）

本回答被提问者采纳

CSS中@import和link的区别

【中文标题】CSS中@import和link的区别

【英文标题】：Difference between @import and link in CSS

【发布时间】：2010-11-04 14:15:52

【问题描述】：

我正在学习一些 CSS 来调整我的项目模板。我遇到了这个问题，并没有在网上找到明确的答案。在 CSS 中使用 @import 和 link 有区别吗？

@import 的使用

<style>@import url(Path To stylesheet.css)</style>

链接的使用

<link rel="stylesheet" href="Path To stylesheet.css">

最好的方法是什么？为什么？ 谢谢！

【参考方案1】：

当我使用@import 规则时，通常是在现有样式表中导入样式表（尽管我不喜欢一开始就这样做）。但是要回答您的问题，不，我认为没有任何区别。只需确保将 URL 放在双引号中以符合有效的 XHTML。

【参考方案2】：

今天没有真正的区别，但旧浏览器（Netscape 4 等）无法正确处理 @import，因此可以使用 @import hack 对这些旧浏览器隐藏 CSS 2 规则。

同样，除非您支持非常旧的浏览器，否则没有区别。

不过，如果我是你，我会在你的 HTML 页面上使用 <link> 变体，因为它允许你指定媒体类型（打印、屏幕等）等内容。

【讨论】：

@import 语句也可以指定媒体。

真的吗？我想你可以在你的风格标签上放一个媒体类型，但这对我来说有点像 hack。

你可以做例如“@import url(style.css) screen, print”，虽然IE7及之前不支持媒体类型。

【参考方案3】：

您可以使用 import 命令在 css 文件中导入另一个 CSS，而 link 命令无法做到这一点。真正的旧浏览器无法（部分 IE4、IE5）处理导入功能。此外，一些解析 xhtml/html 的库可能无法导入样式表。请注意，您的导入应位于所有其他 CSS 声明之前。

【参考方案4】：

理论上，它们之间的唯一区别是@import 是包含样式表的CSS 机制，而<link> 是HTML 机制。但是，浏览器对它们的处理方式不同，这使<link> 在性能方面具有明显优势。

Steve Souders 写了一篇博文，比较了名为“don’t use @import”的<link> 和@import（以及它们的各种组合）的影响。这个标题几乎不言自明。

雅虎！还提到它是他们的性能最佳实践之一（由 Steve Souders 合着）：Choose <link> over @import

此外，使用<link> 标签可以定义"preferred" and alternate stylesheets。 @import 无法做到这一点。

【讨论】：

谢谢 - 不错的超链接 - 尤其是第一个。

这是2009年写的，不知有没有更新

【参考方案5】：

@import 通常用于外部样式表，而不是像您的示例中那样内联。如果您真的想对非常旧的浏览器隐藏样式表，您可以将其用作防止他们使用该样式表的技巧。

总体而言，<link> 标记的处理速度比 @import 规则更快（就 css 处理引擎而言，这显然有点慢）。

【参考方案6】：

这篇文章可能在这里有用：4 methods of adding CSS to HTML: link, embed, inline and import

【讨论】：

Quote: “假设我们有一个 1000 页的网站，我们从网站上的每个页面链接到一个 CSS 文件。现在让我们假设我们想要向所有这些页面添加第二个 CSS 文件。我们可以编辑所有 1000 个 HTML 文件并添加第二个 CSS 链接，或者更好的方法是从第一个文件中导入第二个 CSS 文件。我们只是节省了很多小时的工作！”

【参考方案7】：

指令可以允许异步加载和解释多个 css。

@import 指令强制浏览器* 等到导入的脚本被内联加载到父脚本之前，它的引擎才能正确处理它，因为从技术上讲，它只是一个脚本。

许多 css 最小化脚本（以及诸如 less 或 sass 之类的语言）会自动将链接的脚本连接到主脚本中，因为它最终会减少传输开销。

*（取决于浏览器）

【参考方案8】：

Microsoft Internet Explorer 9 (MSIE9) 似乎无法正确处理 @import。从我的 Apache 日志中观察这些条目（IP 地址隐藏，但 whois 说它归微软自己所有）：链接到 screen.css 的主要 HTML 有

@import url("print.css") print;
@import url("speech.css") aural;

我现在将其更改为 HTML 中的 link 元素，因为似乎 MSIE9 向服务器发出了两个不正确的请求，得到了我可以不用的 404 错误：

[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /screen.css HTTP/1.1" 200 2592 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22print.css%22)%20print HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22speech.css%22)%20aural HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net

之后对这些文件有适当的请求，但我们可以不用这种“先在服务器上拍摄，然后解析url”的逻辑。

【参考方案9】：

一个html，另一个css代码 如果您没有使用过鞍 html 标签，那么您需要使用 @import