Question

I m pretty new to CSS and have been finding my way around so far. I am creating these button like links with shadows and stuff. Now there are several such buttons required on the site - everything about the buttons is same - except few properties change like width and font size.

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

两个按钮的示例 - 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 */
}

But I m not sure how to do this. Thanks for your inputs

Answer 1

您可以将多个类添加到一个元素中, 因此可以有一个. 按钮类, 覆盖所有内容, 然后是. 按钮上传类, 添加一些内容。

例如:

.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

Answer 2

You might want to try this:

.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>>http://goo.gl/6HwroM )

Answer 3

而不是重复常见的“在元素中添加按键类”回答, 我要给你们展示一些新事物, 在新时代的CSS, 或者更人所知的SCSS这个怪异和疯狂的世界里!

样式表中代码的重新使用可以用一个叫做 Mixin 的东西来实现。这使得我们能做的是使用 @ include 属性来重新使用某些样式。

让我举一个例子。

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

当我们有一个按钮时,我们说

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

更多信息:http://sass-lang.com/tutimental.html 。

张开嘴!

Answer 4

您可以这样做, 因为您可以对元素应用一个以上的类。创建您的主类和其他小类, 然后根据需要应用它们。例如 :

<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>

Answer 5

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

.ask-button-display {

}

.ask-button-submit {

}

Answer 6

You may want to look into Sass. With Sass you can basically create variables in your css file and then re-use them over and over. http://sass-lang.com/ The following example was taken from Sass official website:

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

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

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

Answer 7

为共同部分的两个链接添加按钮类到两个链接

.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>

Answer 8

在不修改/ 添加新类的情况下, 您可以将样式添加到以“ sk- button” 开头的类名的所有元素中... (无论该类的元素是什么; 按钮、 hold、 div 等 ) ), 不如说您的按钮是 divs :

 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
}

友情链接