gpt4 book ai didi

html - .html 页面中的 css 应该放在哪里?

转载 作者:太空宇宙 更新时间:2023-11-03 22:49:40 28 4
gpt4 key购买 nike

我有一个 index.html 页面和一个 style.css 文件。

我有一个名为 .slider 的样式类和一个名为 .logo 的样式类。我应该将 .slider.logo 都放在 style.css 页面中还是应该将 .slider 放在 index.html 和 中.logo 在 .css 里面?

我问这个是因为我不知道我是否应该只将与一个页面相关的样式放在全局 style.css 中,还是应该将它内嵌在它适用的页面中?

最佳答案

通常您会嵌入特定于页面的 css。这是我做我的 CSS 的方式:

全局 css(单独文件):

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

注意:在当今的网络世界中,我们使用了大量的插件/主题,这些插件/主题往往会推出更新的版本,因此当您覆盖这些插件/主题时,请确保您创建了一个 css 文件具体到那个主题。

例如,

Bootstrap 3.1

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

为您的所有 Bootstrap 覆盖创建此文件,以便您可以在发布时使用最新版本。

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

页面特定的 css(嵌入式):

<head>
<!-- last element in head //-->
<style type="text/css">
.pageSpecific
{
color: red;
}

</style>
</head>

当我在开发阶段或者html元素不需要css分类的时候。

简单样式格式(内联):

<th style="min-width: 65px;">Column Header</th>

您也可以打印特定的 css:

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

并在此文件中将您的 css 包装成这样:

@media print{
<!-- print specific css here//-->
}

请记住,您可能希望在以后使用 css 分类,当时它可能看起来是特定于页面的。始终为可重用性编写代码!

最后:

我喜欢用css minifier当我将我的文件投入生产时。我使用 UglyJs 对我的 javascript 文件执行相同操作.您还可以使用 LESS css,但现在我会坚持使用这些简单的约定或类似的东西。

关于html - .html 页面中的 css 应该放在哪里?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40570531/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com