Уроки CSS |
Идентификаторы в CSS |
Помимо стилевых классов, о которых вы могли узнать из прошлого урока, существуют идентификаторы. Суть та же самая, но только синтаксис немного другой:
#название идентификатора
Включение в тег – id=" название идентификатора "
Например:
<style>
#myindef {
color: #00F7C9;
}
</style>
<p id="myindef">Текст к которому подключен идентификатор</p>
Текст к которому подключен идентификатор
Подобную технологию удобно использовать, когда вы пишите “глобальные” стили для основных элементов, в которых в свою очередь будут располагаться уникальные контекстные элементы.
Напишем пример, в котором с помощью идентификатора зададим стиль для самой таблицы, а для ячеек применим классы:
<style>
#mytable {
border: 3px solid #EBE377;
background: #D9F3EC;
width: 300px;
height: 150px;
}
table td.myst_1{
background: Green;
color: #F7F31C;
text-align: center;
}
table td.myst_2{
background: #D5713F;
color: #FCFCFC;
text-align: center;
}
</style>
<table id="mytable">
<tr>
<td class="myst_1" >Жёлтый текст</td>
<td>Обычный текст</td>
</tr>
<tr>
<td>Обычный текст</td>
<td class="myst_2">Ванильный фон</td>
</tr>
</table>
Жёлтый текст | Обычный текст |
Обычный текст | Ванильный фон |
Так же идентификаторы можно применять к какому-то одному конкретному тегу:
<style>
p#my_p{
color: Green
font-size: 18px;
}
</style>
<p id="my_p"> Идентификатор применяемый только для текста,
заключённого между тегами - <b><p></p></b> </p>
Идентификатор применяемый только для текста, заключённого между тегами - <p></p>
◄ Предыдущий урок | Содержание | Следующий урок ► |