CSS-расширение свойств класса

Я довольно новичок в 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 */
}

но я не уверен, как это сделать. Спасибо за ваши вклады

10
css stylesheet

7 ответов

Вы можете добавить несколько классов к одному элементу, так что есть один .класс button, который охватывает все, затем a .button-submit class, который добавляет вещи.

например:

.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 здесь

21

вы можете попробовать это: 

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

9

вместо того, чтобы повторять общий ответ "добавить класс кнопок к элементу", я собираюсь показать вам что-то новое в странном и странном мире new age 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.

распространить слово!!!

6

вы можете сделать это, так как вы можете применять более одного класса к элементу. Создайте свой мастер-класс и другие более мелкие классы, а затем просто примените их по мере необходимости. Например:

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

вы можете посмотреть в Sass. С Sass вы можете в основном создавать переменные в файле css, а затем повторно использовать их снова и снова. http://sass-lang.com/ Следующий пример был взят с официального сайта Сасс:

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

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

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

добавить класс для кнопки и ссылки для общих частей

.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>
1
.ask-button-display,
.ask-button-submit {
  /* COMMON RULES */
}

.ask-button-display {

}

.ask-button-submit {

}
0