Применение классов к тегам в CSS (переместить категорию статьи))

Подробности

Категория: HTML, CSS

Применение классов к тегам в CSS

В предыдущем уроке было рассмотрено применение одних и тех же классов к двум разным тегам.

Но часто бывает так, что нужно применить какой-то класс со стилевыми атрибутами только к какому-то определённому тегу. То есть, если написать класс для тега <p></p> и потом применить к тегу <i></i> — то ничего не измениться, так как классы был написан для тегов <p></p> . Это удобно если существуют два (или более) класса с одинаковыми названиями, но при этом прописанных для разных тегов. Вы прописываете класс в нужном вам теге а браузер сам определяет какие именно нужно применить стилевые атрибуты.

 

Синтаксис подобной технологии прост — Тег.Класс:

p.myst_1 { … }

Рассмотрим пример в котором попытаемся применить стиль к тексту написанному между тегами <p></p> и какими-нибудь другими:

<style>
p.myst {
font-size: 16px;
color: #1CC4F7;
font-family: "Book Antiqua";
}
</style>

<p class="myst">Текст, написанный между тегами <b>&lt;p&gt;&lt;/p&gt;</b>
с применением класса -<b>myst</b></p>
<p>Простой текст, без применения стилей.</p>
<i class="myst">Наклонный текст, заключённый между
тегами <b>&lt;i&gt;&lt;/i&gt;</b> с попыткой применения класса — myst </i>

 

Простой текст, без применения стилей.

Наклонный текст, заключённый между тегами <i></i> с попыткой применения класса — myst

Теперь рассмотрим более интересный пример, где зададим “стилевые классы” для некоторых ячеек таблицы и при этом один из классов будет иметь то же название, что и класс для тегов <p></p> .

Для ячеек таблицы стили будут задаваться так — table td.mystyle{ … }

<style>
p.myst_1 {
font-size: 16px;
color: #BC1CF7;
font-family: "Book Antiqua";

table td.myst_1{
background: Green;
color: #F7F31C;
}

table td.myst_2{
background: #D5713F;
color: #FCFCFC;
}

}
</style>

<table  border="2" cellspacing="14" cellpadding="10">
<tr>
<td class="myst_1" >Жёлтый текст</td>
<td>Обычный текст</td>
</tr>
<tr>
<td>Обычный текст</td>
<td class="myst_2">Ванильный фон</td>
</tr>
</table>

<br>

<p class="myst_1"> Текст с применением класса — myst_1, название
которого так же применяется для ячейки таблицы.</p>
<i class="myst_1">К этому тексту никакой стиль не применился</i>

 

Жёлтый текст	Обычный текст
Обычный текст	Ванильный фон

 

Текст с применением класса — myst_1, название которого так же применяется для ячейки таблицы.

• < Назад