Можем ли мы включить общий класс css в другой класс css?

Я новичок в CSS. Мне просто интересно, возможно ли включить один общий класс в другой класс?

например,

.center {align: center};
.content { include .center here};

Я столкнулся с css framework - Blueprint. Нам нужно поместить информацию о позиции в HTML, например.

<div class="span-4"><div class="span-24 last">

Таким образом, мы поместим атрибут позиционирования внутри html вместо css. Если мы изменим макет, нам нужно изменить html вместо css.

Вот почему я задаю этот вопрос. Если я могу включить .span-4 в свой собственный css, я не буду указывать его в своем теге html.

Ответ 1

Необычно, хотя CSS говорит о наследовании, классы не могут "наследовать" таким образом. Самое лучшее, что вы можете сделать, это следующее:

.center, .content { align: center; }
.content { /* ... */ }

Также я настоятельно рекомендую вам не делать "голые" селектора классов, подобные этому. Используйте и идентификатор, или тег и класс, где это возможно:

div.center, div.content { align: center; }
div.content { /* ... */ }

Я говорю об этом, потому что, если вы делаете селектора как можно шире, он становится неуправляемым (по моему опыту), когда вы получаете большие таблицы стилей. Вы оказываетесь в непреднамеренных селекторах, взаимодействующих друг с другом до того момента, когда вы создаете новый класс (например .center2), потому что изменение оригинала влияет на все виды вещей, которые вы не хотите.

Ответ 2

Здесь используется Каскадный в каскадных таблицах стилей.

Подумайте о своем элементе html или widget/module (группе вложенных элементов html) в качестве объекта. Вы знаете, что у вас будут объекты, которые имеют одни и те же свойства, поэтому вы захотите создать повторно используемый класс, который они могут использовать.

.baseModule {align: center;}

Скажите, что ваш модуль является сообщением (ошибка, вспышка...). Таким образом, вы "расширяете" или "включаете" свой класс .baseModule, потому что все сообщения выравниваются по центру (см. Последний пример html).

.message {border: 1px solid #555;}

Кроме того, вы хотите, чтобы ваши сообщения об ошибках имели красный фон. Кроме того, вы можете переписать свойство border из .baseModule.message здесь, если хотите, чтобы он был другого цвета или чего-то другого.

.error {background-color: red;}

Итак, теперь у вас есть несколько определений CSS, которые можно использовать повторно с легкостью.

<!-- Regular message module -->
<p class="baseModule message">
    I am a regular message.
</p>

<!-- Error message module -->
<p class="baseModule message error">
    I am an error message. My background color is red.
</p>

Чтобы связать это с вашим вопросом, вы в основном используете несколько имен классов для максимального повторного использования. Предоставленный ie6 не поддерживает цепные селектор (class1.class2.class3), но он все еще является опрятным трюком!

Ответ 3

В стандартном CSS это невозможно сделать, хотя было бы неплохо.

Для чего-то подобного вам нужно использовать SASS или подобное, которое "компилируется" для CSS.