css - CSS - 扩展类属性

Question

我对 CSS 很陌生，到目前为止一直在寻找我的方式。我正在创建这些按钮，例如带有阴影和东西的链接。现在网站上需要几个这样的按钮——关于按钮的一切都是一样的——除了很少的属性改变，比如宽度和字体大小。

现在不是复制相同的代码 - 一遍又一遍地为每个按钮 - 有一种方法可以扩展按钮并仅添加更改的属性。

两个按钮的示例 - css

.ask-button-display {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
width:350px;
font-size: 20px;
font-weight: bold;
padding:10px;
}


.ask-button-submit {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
font-weight: bold;
width:75px;
font-size: 12px;
padding: 1px;
}

这就是我目前在我的 html 中使用它的方式

<a href="/" id="ask-question-link" class="ask-button-display">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a>

所以我想知道是否有更清洁的方法来做到这一点 - 比如

.button {
/* PUT ALL THE COMMON PROPERTIES HERE */
}

AND THEN SOMEHOW EXTEND IT LIKE
.button #display {
/* THE DIFFERENT PROPERTIES OF Display BUTTON */
}

.button #ask {
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */
}

但我不知道该怎么做。感谢您的投入

score 22 · Accepted Answer

您可以为一个元素添加多个类，因此有一个涵盖所有内容的 .button 类，然后是一个添加内容的 .button-submit 类。

例如：

.button {
    padding: 10px;
    margin: 10px;
    background-color: red;
}

.button-submit {
    background-color: green;
}

在此处查看实时 jsFiddle

在您的情况下，以下应该有效：

.button {
    background: #8BAF3B;
    border-radius: 4px;
    display: block;
    letter-spacing: 0.5px;
    position: relative;
    border-color: #293829;
    border-width: 2px 1px;
    border-style: solid;
    text-align:center;
    color: #FFF;
    width:350px;
    font-size: 20px;
    font-weight: bold;
    padding:10px;
}


.button-submit {
    width:75px;
    font-size: 12px;
    padding: 1px;
}

在此处查看实时 jsFiddle

score 13 · Accepted Answer

你可能想试试这个：

.button {
    padding: 10px;
    margin: 10px;
    background-color: red;
}

.button.submit {
    background-color: green;
}
.button.submit:hover {
    background-color: #ffff00;
}

这样你就可以避免重复这个词，并且能够像这样使用元素中的类：

<a href="/" id="btnAsk" class="button">Ask a Question</a> 
<a href="/" id="btnSubmit" class="button submit">Submit</a>

请参阅 JSFiddle ( http://goo.gl/6HwroM )中的示例

score 6 · Accepted Answer

而不是重复常见的“向元素添加按钮类”答案，我将向您展示新时代 CSS 或更广为人知的 SCSS 的奇怪而古怪的世界中的一些新东西！

样式表中代码的这种重用可以通过称为“混合”的东西来实现。这允许我们做的是通过使用“@include”属性重用某些样式。

让我给你举个例子。

@mixin button($button-color) {
    background: #fff;
    margin: 10px;
    color: $color;
}

然后每当我们有一个按钮我们说

#unique-button {
    @include button(#333);
    ...(additional styles)
}

在此处阅读更多信息：http: //sass-lang.com/tutorial.html。

传播这个词！！！

score 4 · Accepted Answer

您可以这样做，因为您可以将多个类应用于一个元素。创建您的大师班和其他较小的课程，然后根据需要应用它们。例如：

<a href="/" id="ask-question-link" class="button submit">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a>

这将应用按钮并提交您将创建的类，同时允许您单独应用这些类。

沿以下行修改您的代码示例：

.master_button {
/* PUT ALL THE COMMON PROPERTIES HERE */
}
AND THEN SOMEHOW EXTEND IT LIKE
.button_display {
/* THE DIFFERENT PROPERTIES OF Display BUTTON */
}
.button_ask {
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */
}

并申请如下：

<a href="/" id="ask-question-link" class="master_button button_ask">Ask a Question</a> 
<a href="/" class="master_button submit" id="ask-button-submit">Submit</a>

score 2 · Accepted Answer

.ask-button-display,
.ask-button-submit {
  /* COMMON RULES */
}

.ask-button-display {

}

.ask-button-submit {

}

score 2 · Accepted Answer

你可能想研究一下 Sass。使用 Sass，您基本上可以在您的 css 文件中创建变量，然后一遍又一遍地重复使用它们。http://sass-lang.com/ 以下示例取自 Sass 官网：

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

score 1 · Accepted Answer

为公共部分的两个链接添加一个按钮类

.button {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
}

在你的其他课程中保留不常见的规则。

你的 HTML 将是

<a href="/" id="ask-question-link" class="button ask-button-display">Ask a Question</a>
<a href="/" class="button ask-button-submit" id="ask-button-submit">Submit</a>

score 0 · Accepted Answer

在不更改/添加新类的情况下，您可以为类名以“ask-button”开头的所有元素添加样式......（无论类的元素是什么；按钮、锚点、div 等）假设您的按钮是 div然后：

 div[class^="ask-button"] {
   // common css properties
 }

您还可以列出所有具有共同属性的类，如下所示：

.ask-button-display,
.ask-button-submit {
   // common css properties here
}

然后为每个按钮添加单独的样式：

.ask-button-display{
    // properties only for this button
    }

.ask-button-submit {
   // properties only for this button
}

css - CSS - 扩展类属性

8 回答 8

Related

Reference