Question

我在线阅读了一篇关于使用CSS的提示的文章，其中一个指针是：

使用主样式表。 “我看到的最常见的错误之一初学者和中间人成为CSS的受害者删除默认浏览器样式。这导致了不一致跨越浏览器的设计外观，最终留下了一个很多设计师指责浏览器。这是一个错误的责任课程。在编写网站时，在进行任何其他操作之前，您应该这样做重置样式。“

有人可以指点我的任何教程（甚至是这里的帮助），我如何为我的网站设置一个主CSS页面，以及如何将主CSS页面中的类调用到我的网页中的对象。 / p>

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

感谢任何帮助或建议。提前谢谢。

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.

这可能意味着第一个样式表是主样式表。那个包含'主要样式'，第二个包含'覆盖默认值'。当您从3方派对（例如 Bootstrap ）导入样式表时，这非常有用。

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

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

然后在其他样式表中使用：

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

Answer 3

设置“主”样式表的基本方法如下：

假设您有这样的文件夹结构：

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

假设您在项目文件夹的根目录下有一个名为index.html的文件。您需要在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;
}

这会使<div>内的<body>的{{1}}和width为300像素，height为红色。您可以通过提供background-color课程<div>在网页内的任何位置调用此样式。

就是这样简单地说。

CSS - 创建/使用主样式表

3 个答案: