<style type="text/css"> & <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> 的区别
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17935302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between <style type="text/css"> & <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
提问by Tarek Yacoub
I'm rather new to this so its mostly (copy and paste) with a little YouTube and reading materials here and there.
我对此很陌生,因此主要是(复制和粘贴)以及一些 YouTube 和阅读材料。
Why have both? Please simplify you answer, don't go so technical.
为什么两者都有?请简化您的答案,不要太技术化。
回答by Dai
<style type="text/css">
is when you want to have style rules embedded within the page.
<style type="text/css">
当您希望在页面中嵌入样式规则时。
<link rel="stylesheet" href="path/to/style.css" />
is when you have a separate stylesheet file that you want to reference in the current page - doing this means that clients don't have to download the CSS every time, which makes page-loads faster.
<link rel="stylesheet" href="path/to/style.css" />
是当您有一个单独的样式表文件要在当前页面中引用时 - 这样做意味着客户端不必每次都下载 CSS,这使得页面加载速度更快。
CSS has the @import
directive, if you use <style>@import style.css;</style>
then it's roughly equivalent to <link rel="stylesheet" href="style.css" />
(but with some minor differences: see Difference between @import and link in CSS).
CSS 具有该@import
指令,如果您使用<style>@import style.css;</style>
它,则它大致相当于<link rel="stylesheet" href="style.css" />
(但有一些细微差别:请参阅CSS 中的 @import 和 link 之间的区别)。
回答by Maciej A. Czyzewski
Method 1(using <style type="text/css">
)
方法一(使用<style type="text/css">
)
Is simple way to declare CSS. But it should be used for small codes. When you want to overwrite an attribute of the main stylesheet.
是声明 CSS 的简单方法。但它应该用于小代码。当您想覆盖主样式表的属性时。
Method 2(using <link rel="stylesheet" href="path/to/style.css" />
)
方法二(使用<link rel="stylesheet" href="path/to/style.css" />
)
The first advantage of this method is that, we have a style in an external file. And that means that we can use it repeatedly. But this is not the end of the advantages. You can tell your browser to save the file in the cache. Which reduces page load time.
这种方法的第一个优点是,我们在外部文件中有一个样式。这意味着我们可以重复使用它。但这并不是优势的结束。您可以告诉浏览器将文件保存在缓存中。这减少了页面加载时间。
What is better?
什么是更好的?
In my opinion Method 2.
在我看来方法2。
回答by Maciej A. Czyzewski
Using <style type="text/css">
is for CSS code in your HTML file and <link...>
is for including an external CSS file.
使用<style type="text/css">
是在HTML文件中的CSS代码,并<link...>
为包括外部CSS文件。
回答by Barbara Laird
The first case <style type="text/css">
is for including css definitions in your html file. The 2nd case puts the css definintions in style.css (or whatever file is the href). The 2nd case makes it easy to use the same css across multiple html files.
第一种情况<style type="text/css">
是在 html 文件中包含 css 定义。第二种情况将 css 定义放在 style.css (或任何文件是 href )中。第二种情况使得在多个 html 文件中使用相同的 css 变得容易。
回答by heytools
The first is used to insert css code directly in your html files, while the second is calling an external css file.
第一个用于直接在您的 html 文件中插入 css 代码,而第二个用于调用外部 css 文件。