br 8eb34


search

Управление селекторами

selectСелекторами могут выступать теги, классы и идентификаторы, к которым применяются определенные свойства. Изменение, которое сделано для определенного тега будет относится ко всем тегам в HTML-документе, а так же для всех остальных документов, к которым будет привязан файл стилей.

Но что если требуется выбрать определенные теги, стоящие в некоторой последовательности?

Для подобного управления селекторами применяют контекстные, дочерние и соседние селекторы. Существует ещё универсальный селектор, который обозначается знаком * и служит для того, чтобы описать стили для всех элементов. Универсальный селектор обычно указывается в начале файла со стилями ( *{свойства стилей} ), как правило, в нем указывается общий фон, общий шрифт и т.п.

Контекстные селекторы

Контекстные селекторы обозначаются для выбранных вложенных тегов. То есть к тегам в HTML-документе, которые находятся внутри других тегов, будут применены обозначенные стили. Для этого сначала пишем тег-контейнер, а через пробел ставим тег, который находится в нём:

div b {font-size:14px; color: brown;} - стиль в файле CSS

<div>текст<b>выделенный</b></div> - часть кода в HTML-документе

После этих записей изменения коснуться только слова "выделенный", так как оно находится в теге b, стоящем в <div>

Дочерние селекторы

Дочерние селекторы по своему действию похожи с контекстными, они также предназначены для изменения свойств вложенных тегов. Разница состоит в том, что контекстные селекторы изменяют все вложенные теги, а дочерние - только те, которые непосредственно вложены. Дочерние селекторы обозначаются знаком >.

div>p {color: blue} - пример стиля в файле CSS

<div>
<p>Весь текст синим <b>цветом</b> </p>
</div> - фрагмент кода HTML-документа

В результате получится, что весь текст окрасится синим цветом, кроме слова, заключенного в тег b, так как он не является дочерним элементом для <div>.

Соседние селекторы

Соседние селекторы являются тегами, которые в HTML-документе находятся рядом друг с другом, но не разделены другими тегами, и не вложены, как контекстные селекторы. Для их обозначения в файле стилей используется знак +:

b+img {border: 1px solid #993300} - стиль в файле CSS

<p><b>Картинка1<b><img src="/images/pic.jpg"></p> - код в HTML

После этого изображение, которое в HTML-документе находится после тега b будет показываться в рамке. Если вы не знаете как вставлять изображения на веб-страницу читайте тут.

Добавить комментарий

Защитный код
Обновить

Комментарии