Помогите с преобразованием стилей CSS из тега в тег

Question

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

Если у моего CSS есть определенный стиль, который работает с тегом <div>, что мне нужно сделать, чтобы он работал с тегом span?

Что, если стиль CSS работает с любым тегом абзаца <p>, как мне заставить его работать с тегом div?

Answer 1

Эмпирического правила не существует. Это зависит от того, к какому элементу в данный момент применяется стиль и к какому элементу он должен быть применен. Большинство элементов, если вы не используете сброс CSS, будут иметь стили по умолчанию, которые будут комбинироваться с любыми применяемыми стилями. Например, <div> имеет display из block. A <span> имеет display из inline. <p> имеет набор display из block и margin-top и margin-bottom. Вы можете использовать Firebug в Firefox, чтобы увидеть стили, которые применяются к элементу по умолчанию. Различные браузеры имеют разные правила CSS по умолчанию.

Answer 2

div, p {  /* adds styles for both the tags */
    color: red;
}

Answer 3

Создание CSS примерно так:

.mystyle
{
/* style info */
}

Означает, что его можно использовать так:

<span class="mystyle">stuff styled using the CSS above</span>
<p class="mystyle">more stuff like my CSS</p>

Answer 4

Вы можете применять один и тот же класс к каждому тегу или использовать несколько тегов в вашем селекторе:

div,p,span {/*your styles*/ будет применяться к div, p и span

Answer 5

Не могли бы вы предоставить более подробную информацию о типе стилей, которые вы используете? Простой ответ заключается в том, что вы просто применяете стиль к обоим тегам, используя класс:

<div class="someClass">contents of div here</div>
<span class="someClass">contents of span here</span>

или просто объявив стиль под тегами:

div, span, p {
    font-weight: bold;
}

Но есть проблемы. Чтобы использовать ваш пример, div является элементом блока, а span является встроенным элементом, поэтому некоторые стили, связанные с позиционированием, например float, не могут работать для обоих. И если вы используете идентификаторы вместо классов, вы вообще не сможете их повторно использовать, потому что идентификатор можно прикрепить только к одному элементу.

Answer 6

div, p, span{
color: blue;
}

Это будет применено ко всем тегам p, div и span