Генератор цветов Уроки C++ Уроки Windows forms Учебники по программированию Уроки HTML Уроки CSS Готовые задания Исходники Полезные программы
регистрация доменов

Дешёвые домены



Уроки 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>

Текст, написанный между тегами <p></p> с применением класса -myst

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

Наклонный текст, заключённый между тегами <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, название которого так же применяется для ячейки таблицы.

К этому тексту никакой стиль не применился



◄ Предыдущий урок Содержание Следующий урок ►