CSS - как высушить? - PullRequest
Новая
       3

CSS - как высушить?

2 голосов
/ 24 мая 2010

Есть ли способ высушить этот CSS вверх? Разница только в цвете? 

div.base-text-gold {
    position: absolute; bottom: 9px; color: #FED577; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}

div.base-text-grey {
    position: absolute; bottom: 9px; color: #D1D2D4; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}

Ответы [ 6 ]

8 голосов
/ 24 мая 2010

Разделите цвета на разные классы CSS следующим образом: 

div.base-text {
    position: absolute; bottom: 9px; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}

div.gold {
    color: #FED577;
}

div.grey {
    color: #D1D2D4;
}

, а затем просто примените два элемента вместо элементов: 

<div class="base-text gold">...</div>
5 голосов
/ 24 мая 2010

Вы можете попробовать один из lessCSS или dotlesscss библиотеки доступны

2 голосов
/ 24 мая 2010

Вы можете создать «базовый класс» base-text, а затем просто оставить цвета в «подклассах»: 

div.base-text {
    position: absolute; bottom: 9px; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}

div.base-text-gold {
    color: #FED577;
}

div.base-text-grey {
     color: #D1D2D4;
}

Конечно, недостатком является то, что вам придется добавить 2 класса к вашему div вместо одного: 

<div class="base-text base-text-gold">...</div>
1 голос
/ 24 мая 2010

Моя первоначальная реакция - сказать вам, что, вероятно, не стоит указывать цвета в именах классов CSS. На данный момент, это действительно не лучше, чем встроенный CSS. Вам лучше пойти с .emphasized или .strong для золотого текста, в зависимости от вашей ситуации. И даже тогда вы можете просто стилизовать и использовать тег <em> или <strong>. Тем не менее, как насчет того, чтобы ответить на ваш вопрос?

Ответ заключается в попытке никогда не использовать одно и то же объявление дважды. 

div.base-text-gold, div.base-text-grey {
    position: absolute; bottom: 9px; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}

div.base-text-gold { color: #FED577; }
div.base-text-grey { color: #D1D2D4; }
0 голосов
/ 24 мая 2010

Ну ... одна вещь, которую вы могли бы сделать: 

div.base-text {
    position: absolute; bottom: 9px; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}

div.base-text-gold {
    color: #FED577;
}

div.base-text-grey {
    color: #D1D2D4;
}

И в каждом из ваших дивов просто идите: 

<div class="base-text base-text-gold">This is the gold div.</div>
<div class="base-text base-text-grey">This is the grey div.</div>
0 голосов
/ 24 мая 2010

Вы можете наследовать от класса "base-text", который не определяет цвет.

Тогда у вас есть два варианта: рядом с ним есть стиль = "" ... 

<style>
div.base-text {
    position: absolute; bottom: 9px; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
</style>

<html><head>[the style thingie above]</head><body>
   <div class="base-text" style="color:BLARGH"> RAWR~ </div>
</body></html>

ИЛИ

наследовать от классов золота и серого тоже 

<style>
div.base-text {
    position: absolute; bottom: 9px; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
div.grey {
    color: #999999;
}
div.gold {
    color: #DDDD99;
}
</style>
<html><head>[the style thingie above]</head><body>
   <div class="base-text gold" style="color:BLARGH"> RAWR~ </div>
   <div class="base-text grey" style="color:BLARGH"> DADADEEEEE~ </div>
</body></html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...