CSS 在头上添加一个 id

Question

我正在开发具有 100 页的响应式网站。它是使用 CMS 实现的。问题是，我只需要为主页应用一些样式。

在 CMS 中为一个页面添加 class 或 id 有点麻烦，因为它使用模板来呈现页面。

我在标题部分添加了 css。我不想添加外部文件的原因是因为相同的 id 可能会在其他页面上使用。

在这种情况下，在头部部分添加 CSS 是一种不好的做法。

<head>
    <style>
        //my css
    </style>
</head>
<body>


</body>

谢谢

Answer 1

总之是的。出于可维护性的原因。您最好使用 css 的级联特性来定位特定于特定页面的样式，而不是使用大量内联样式。

例如，考虑：

<body class="my-page">
<h1 id="myId">Title</h1>


<body>
<h1 id="myId">Title</h1>

h1#myId{ font-size:12px; }
body.my-page h1#myId{ font-size:14px; }

后一种风格优先。 h1#myId 将是全局的，但在特定页面上您可以覆盖此样式。有没有办法找出正在使用的模板，并调整正文class？

Answer 2

如果您的 CMS 使用 PHP...
您可以检测您是否在主页中，然后调用您的自定义外部样式表，例如：

<?php
$page = $_SERVER["REQUEST_URI"];
$isHomePage = $page==="/" || $page==="/index.php" || $page==="";

if( $isHomePage ) {
   echo '<link href="homepage.css" rel="stylesheet" type="text/css" />';
} else {
   echo '<link href="style.css" rel="stylesheet" type="text/css" />';
}
?>

</head>

Answer 3

内联 CSS 非常好。您是应该使用内联 CSS 还是简单地为页面设置唯一 ID 取决于您使用的 CMS 的复杂性和灵活性。使用内联 CMS 仅意味着您必须从每个单独的页面更新 CSS，而不是从所有单独页面的单一来源更新。

关于你的第二点，在 <style> 标签的头部添加 CSS 是一个不错的做法。事实上，<style> 是 <head> 的 child 才能正确验证。根据the HTML 5.2 specification, <style> can be a child of any element as long as it it scoped, though at the present date, Firefox is the only browser可以使用scoped属性。

除此之外，由于页面的加载方式，在 <body> 中使用 <style> 标记可能会导致 flash of unstyled content。因此，如果您使用内联 CSS，请始终在头脑中这样做以正确验证并改善用户体验:)

希望对您有所帮助！

CSS 在头上添加一个 id

CSS in head over adding an id

html

css

head