Уроки 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>&lt;p&gt;&lt;/p&gt;</b>  </p>

Идентификатор применяемый только для текста, заключённого между тегами - <p></p>

◄ Предыдущий урок

Содержание

Следующий урок ►