CSS

Question

我在网上阅读了一篇文章，了解使用 CSS 的技巧，其中一个要点是：

Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.”

任何人都可以向我指出有关如何为我的网站设置主 CSS 页面以及如何调用 classes 的任何教程（甚至在这里提供帮助） Master CSS 页面到我网页中的对象。

例如，如果我在我的 CSS 主页面中设置一些样式，我可以将 div 上的 class 设置为 class="main-header-blue" 并且它会从我的 Master CSS 页面并将其应用到我的 div（我可以从我的任何网页调用此 class）

如有任何帮助或建议，我们将不胜感激。提前谢谢你。

Answer 1

我想你要找的是Normalize.css。通过在您自己的自定义样式之前包含此资产，将有助于消除浏览器与文档上的边距和填充等内容的不一致。

否则，只要像往常一样打扮就可以了。如果您还有其他问题，请告诉我！

Answer 2

希望我的解读是你的答案：

CSS 从自上而下的角度应用样式。这意味着，如果您插入两个样式表，则首先应用最上面的样式表，然后第二个覆盖第一个样式表

这意味着：

<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="mystyle2.css"> // this one overrides the first

这也适用于样式：

div {
  background-color:green;
}

div {
  background-color:red;
}
// the background color is red.

这可能意味着第一个样式表是主样式表。那个包含 'master styles'，第二个包含 'overriding the defaults'。这在您从第 3 方导入样式表时很有用（例如 Bootstrap）。

第二种解释是SASS。在 SASS 中，您可以创建一个主样式表，其中包含将应用于其他样式表的变量。所以，在主样式表中你这样说：

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

然后在您的其他样式表中使用这些：

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Answer 3

设置 "master" 样式表的基本方法如下：

假设您的文件夹结构如下：

网页（文件夹）
- css（文件夹）
  - style.css（文件）
- index.html（文件）

假设您在项目文件夹的根目录下有一个名为 index.html 的文件。您需要像这样 include/reference index.html 中的样式表 (style.css)：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="mydiv">Your content</div>
  </body>
</html>

然后你可以在你的 style.css 文件中加入这个：

.mydiv {
  width: 300px;
  height: 300px;
  background-color: red;
}

这将使 <body> 内的 <div> 具有 300 像素的 width 和 height 以及红色的 background-color。您可以通过给定 <div> class mydiv.

在网页内的任何位置调用此样式

就是这么简单。

CSS - Create/Use 主样式表

CSS - Create/Use Master Stylesheet

html

stylesheet