简体   繁体   English

如何在 CSS 中链接外部样式表

[英]How to link an external stylesheet in CSS

I have been using html with internal style sheets for a while now until my friend told me about external css style sheets.我一直在使用带有内部样式表的 html 一段时间,直到我的朋友告诉我外部 css 样式表。 How can I link an external style sheets to CSS?如何将外部样式表链接到 CSS? Also what are the benifets of external style sheeting?外部样式表的好处是什么?

To link your external style sheet put this code in the head:要链接您的外部样式表,请将此代码放在头部:

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

The Benifets of using an External Style Sheets is that you can change the look/style of your website with only editing one file.使用外部样式表的好处是您只需编辑一个文件即可更改网站的外观/样式。 With internal style sheets you need to type the code for every page.对于内部样式表,您需要为每个页面键入代码。

Other's have answered the how-to part.其他人已经回答了操作方法部分。 As for benefits:至于好处:

  • (as Jabel states) you can reuse the same CSS on every page (which you typically need to do for a web site) (正如 Jabel 所说)您可以在每个页面上重用相同的 CSS(您通常需要为网站执行此操作)
  • (as jaydx49 states) you have one central place to edit all the CSS (much easier to update one file than 50, for example) (如 jaydx49 所述)您有一个中央位置来编辑所有 CSS(例如,更新一个文件比更新 50 个文件要容易得多)
  • If all your CSS is in one file, and it's used on every page, that means the browser only has to download the CSS information once, and can then cache it for every other page.如果您的所有 CSS 都在一个文件中,并且在每个页面上都使用它,这意味着浏览器只需下载一次 CSS 信息,然后就可以为其他每个页面缓存它。 This makes your web site download faster.这使您的网站下载速度更快。
  • It's easier to compress (minify) your CSS if it's all in separate files, again making the site download faster.如果 CSS 全部位于单独的文件中,则压缩(缩小)CSS 会更容易,这再次使站点下载速度更快。

You have to add to your <head> in your HTML the following line:您必须在 HTML 中向<head>添加以下行:

<link rel="stylesheet" type="text/css" href="PATH/TO/YOUR/FILE">

The benefits are that you have more clear an clean code.好处是你有更清晰的代码。 And you can use it in all your HTML files that you want, and if you change your CSS code you will affect all the files that are using it.并且您可以在您想要的所有 HTML 文件中使用它,如果您更改 CSS 代码,您将影响所有使用它的文件。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM