В таблице каскадных стилей (CSS) довольно просто менять стили элементов (внешний вид) веб-страницы. Для того чтобы задать индивидуальный стиль элементу, отличному от остальных введено понятие классов.
Классы
Они используются, когда нужно применить стиль для индивидуального элемента или применить разные стили для одного тега.
Синтаксис
Тег. Имя класса {свойство: значение}
Рассмотрим пример.
Берём произвольный текст: «В последнее время (да, наверное, и не только), стал проявляться интерес пользователей к продвижению сайтов. Одна из статей по продвижению расположена и на рассматриваемом сайте». И этот текст расположим на голубеньком фоне.
В файле CSS записываем.
P {
background-color: BFFFF3;
}
Но вот теперь, нам захотелось, чтобы второй параграф был написан на желтеньком фоне. Для этого создаём класс для тега <p>, называем его, например, «yellow» и устанавливаем цвет фона # FFE311
P. yellow{
background-color: FFE311;
}
Класс создан, теперь в самом коде HTML, где нам нужно устанавливаем
<p>здесь располагаем текст, который нужно выделить с заданным классом<P>
… <body> <p>В последнее время (да, наверное, и не только), стал проявляться интерес пользователей к продвижению сайтов.</p> < p class="yellow"> Одна из статей по продвижению расположена и на рассматриваемом сайте </p> </body> …
Смотрим результат:
В данном примере класс «yellow» применяется к тегу <P>. Но его (и естественно стиль, описанный в нём) можно применить к любому тегу. Для этого в файле CSS записывается определение класса, но без указания тега:
.
yellow{
background-color: FFE311;
}
Идентификаторы
Идентификаторы (или <ID-селектор> применяются для изменения стиля индивидуального элемента, при этом идентификатору присваивается уникальное имя (т.е. такое имя нигде не должно повторятся в коде).
Синтаксис
#Имя идентификатора {свойство: значение}
Обращение к идентификатору аналогичное как к классу, только вместо атрибута тега «class», устанавливается «id».
Рассмотрим на примере.
Создаём идентификатор «yellow», который определяет цвет фона желтого цвета.
#yellow{
background-color: FFE311;
}
Идентификатор написан, теперь в самом коде HTML, где необходимо устанавливаем
<p id =»yellow»>здесь текст, который нужно выделить с заданным id<P>
… <body> <p>В последнее время (да, наверное, и не только), стал проявляться интерес пользователей к продвижению сайтов.</p> < p id="yellow"> Одна из статей по продвижению находится и на рассматриваемом сайте </p> </body> …
Смотрим и видим аналогичный результат. Второй абзац текста написан на желтом фоне (см. на рисунок выше).
Автор блога https://delajblog.ru
Похожие статьи:
