把css放在HTML的哪里-猿码集

为什么要把CSS放在HTML的哪里？

在编写网页时，我们通常会使用CSS来为网页增加样式、版式等等，这些样式规则需要和HTML文档结合起来才能生效，而CSS有几种不同的处理方式。首先，CSS可以直接放在HTML文档中，可通过style标签或行内style属性的形式进行设置；其次，CSS文件可以与HTML文档分离，以link标签的形式引入；最后，还可以使用JavaScript等脚本语言动态进行样式设置。

虽然说三种方式都能够在HTML网页中实现CSS样式的添加，但是其中在HTML文件中写CSS是最方便，最快捷的一种方式。

把CSS放在HTML文档的哪里？

1. head标签中

HTML文档的head标签内可放置多种元信息，例如<title>标签、<meta>标签等等，这些元信息通常可对浏览器渲染网页的方式进行指定，同时也为引擎提供了标准化的网站信息。在这些元信息中，还可以放置<style>标签，通过这种方式，实现的CSS可以为HTML文件中的元素添加样式表达。


  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <title>把CSS放在HTML的哪里</title>
    <style type="text/css">
      /* CSS样式规则 */
      body {
        background-color: #e7e7e7;
        font-size: 16px;
      }
    </style>
 </head>
  <body>
    <!-- HTML文档主体 -->
  </body>
  </html>

如上述代码所示，在head标签中的style标签中定义好CSS样式，通过CSS规则直接作用在对应元素上，使HTML页面的显示效果被修改。

2. 后置于HTML文档末端

在HTML文档主体展示完毕后，我们可以通过将<style>标签放置在HTML文件的末尾，达到将CSS代码和HTML文件分开的效果。这种放置方式的优势在于，可以让浏览器先加载HTML结构以后再加载CSS文件，以避免CSS代码抢占HTML加载C的情况，起到优化加载速度的效果。


  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <title>把CSS放在HTML的哪里</title>
  </head>
  <body>
    <!-- HTML文档主体 -->
    <style type="text/css">
      /* CSS样式规则 */
      body {
        background-color: #e7e7e7;
        font-size: 16px;
      }
    </style>
  </body>
  </html>

放置于HTML文档末端的方式，相比在head标签内引入，可以使HTML文档性能得到更好的优化，这里需要强调的是，这种方式并非适用于所有情况。

3. 外部CSS文件加载

上述两种方式都是将CSS放在HTML文档内部，但是当一个网站根据需要加载大量CSS时，如果将它们都放在HTML文件内部，将会导致HTML消息膨胀，加载时间加长，影响页面性能。所以我们采用将CSS文件分离成外链的形式来指定CSS规则。外部CSS文件通过link标签引入到HTML文件中，加载速度更快，可以方便地为多个页面共享CSS样式规则。这种方式是目前最为主流的CSS写法。


  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <title>把CSS放在HTML的哪里</title>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <!-- HTML文档主体 -->
  </body>
  </html>

如上述代码，使用标签和rel属性进行外链方式的CSS加载。其中href属性指定需要引入的CSS文件的地址，而rel属性则是告诉浏览器一个引用资源与当前页面之间的关系，这里的“stylesheet”表示引用的资源是一个样式表。

CSS放在什么地方是最好的？

在选择CSS文件的加载位置时，我们需要根据网站的具体情况来决定。不同的应用场景对应的最佳写法是不同的。但是，对于大多数情况，仍然有建议将CSS放在网页头部的原文支持。

首先一个直接原因是安全性。由于CSS文件通常用于美化页面的视觉效果，同时也可以通过CSS规则在元素中插入代码和块元素，因此CSS文件中可能会包含敏感信息，如cookie或其他敏感信息。这意味着放置在头部可以确保这些敏感信息不会轻易暴露。另外，将CSS放在头部可以让浏览器首先对页面进行渲染，尽快呈现一个可用的页面。

放置在头部的另一个优点是可维护性。将CSS放在头部可以让项目文件看起来整洁，使所有与页面样式相关的规则都在一起。这有助于提高代码的可读性，并且如果您需要更改一个样式规则，您可以轻松找到它。

即刻上手

通过以上概述，我们知道将CSS放在哪里最好。下面来看一下实例：


  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <title>把CSS放在HTML的哪里</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <style>
    /* 请放心使用“任意”的CSS样式规则，以下只是一个示例 */
      #header {
        background-color: #3b3e42;
        height: 60px;
      }
      .nav .menu {
        float: left;
        margin-right: 10px;
      }
      .nav .menu a {
        color: #fff;
        font-size: 24px;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <header id="header">
      <nav class="nav">
        <ul class="menu">
          <a href="#">菜单1</a>
          <a href="#">菜单2</a>
          <a href="#">菜单3</a>
        
      </nav>
    </header>
  </body>
  </html>

上述代码我们同时引入了一个外部CSS文件和一个内联的样式表。外部文件用于所有与头部有关的样式，而内联样式表则处理一些单独的元素，例如顶部导航菜单。这样做可使项目的CSS代码和原始HTML代码保持一致，并可保持结构性，易于维护。

CSS放在HTML文件中的注意事项

如果不正确地放置CSS代码，我们将可能会遇到一些问题。

1. 加载速度

如果您重复载入CSS样式，可能会导致网页加载变慢，因为大量的CSS代码需要浏览器下载并处理。如果你在同一个页面中进行不同样式的多处编写，可能会增加页面加载时间，网页性能会受到一定影响。

2. CSS代码优先级

当CSS在不同地方编写且指向相同样式时，可能会发生排除的情况。如内部CSS样式表会覆盖在页头中定义的相同样式。可以通过CSS规则来解决这个问题。但是在不同位置编写的同一CSS规则就是一个很糟糕的代码体验。

因此，尽管我们可以在网页的任何地方编写CSS规则，但为了网站的最佳性能，建议在开发时花费一些时间来决定在HTML文件中的正确位置编写CSS代码。

结论

CSS是前端必不可少的一部分，合理的CSS加载方式将会提高网站的性能，优化用户体验。

在选择CSS加载方式时，我们需要根据我们的需求来决定，是通过额外的文件引入，还是简单地在头部中进行定义，还是在文档的末尾。

最后，我们需要意识到CSS加载位置所带来的不利影响，并避免在不同的CSS文件中编写多个相同的CSS规则，以减少浏览器的工作量。

把css放在HTML的哪里