Рассылка закрыта
При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Самоучитель по HTML и CSS - 36
Самоучитель по HTML и CSS
6. Соседние селекторыСоседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов. <p>Lorem ipsum <b>dolor</b> sit amet.</p> Тег <B> является дочерним по отношению к тегу <P>, поскольку он находится внутри этого контейнера. Соответственно <P> выступает в качестве родителя <B>. <p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p> Теги <VAR> и <B> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <P>, никак не влияет на их отношение. <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p> Соседними здесь являются теги <B> и <I>, а также <I> и <TT>. При этом <B> и <TT> к соседним элементам не относятся из-за того, что между ними расположен контейнер <I>. Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий. Селектор 1 + Селектор 2 { Описание правил стиля } Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к Селектору 2, но только в том случае, если он является соседним для Селектора 1 и следует сразу после него. Замечание Соседние селекторы не поддерживаются браузером Internet Explorer. В примере 6.1 показана структура взаимодействия тегов между собой. Пример 6.1. Использование соседних селекторов <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Соседние селекторы</title> <style type="text/css"> B + I { color: red; /* Красный цвет текста */ } </style> </head> <body> <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p> </body> </html> Результат данного примера показан на рис. 6.1.
Рис. 6.1. Выделение текста цветом при помощи соседних селекторов В данном примере происходит изменение цвета текста для содержимого контейнера <I>, когда он располагается сразу после контейнера <B>. В первом абзаце такая ситуация реализована, поэтому слово «consectetuer» в браузере отображается красным цветом. Во втором абзаце, хотя и присутствует тег <I>, но по соседству никакого тега <B> нет, так что стиль к этому контейнеру не применяется. Соседние селекторы удобно использовать для тех тегов, к которым автоматически добавляются отступы, чтобы самостоятельно регулировать величину отбивки. Например, если подряд идут теги <H1> и <H2>, то расстояние между ними легко регулировать как раз с помощью соседних селекторов. Аналогично дело обстоит и для идущих подряд тегов <H2> и <P>, а также в других подобных случаях. В примере 6.2 таким манером изменяется величина отступов между указанными тегами. Пример 6.2. Отступы между заголовками и текстом <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Соседние селекторы</title> <style type="text/css"> H1 + H2 { margin-top: -10px; /* Смещаем заголовок 2 вверх */ } H2 + P { margin-top: -1em; /* Смещаем первый абзац вверх к заголовку */ } </style> </head> <body> <h1>Заголовок 1</h1> <h2>Заголовок 2</h2> <p>Абзац!</p> </body> </html> Поскольку при использовании соседних селекторов стиль применяется только ко второму элементу, то размер отступов уменьшается за счет включения отрицательного значения параметра margin-top. При этом текст поднимается вверх, ближе к предыдущему элементу. Формы. Однострочное текстовое полеОднострочное текстовое поле предназначено для ввода строки символов с помощью клавиатуры. Синтаксис создания такого поля следующий. <input type="text"
параметры>
Параметры поля перечислены в табл. 1.
Создание текстового поля с разными параметрами показано в примере 1. Пример 1. Текстовое поле <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Текстовое поле</title> </head> <body> <form action="handler.php"> <p><b>Как ваше имя?</b></p> <p><input type="text" maxlength="25" size="40"></p> </form> </body> </html> В данном примере создается текстовое поле длиной 40 символов, с ограничением на ввод до 25 символов. Рецепты CSSКак увеличить расстояние от маркера до текста?Для изменения расстояния между маркером списка и текстом используйте атрибут padding-left для селектора LI, как показано в примере 1. Пример 1. Отступ от маркера до текста <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <title>Расстояние между маркером и текстом</title> <style type="text/css"> LI { padding-left: 20px; /* Отступ от маркера до текста */ } </style> </head> <body> <hr> <ul> <li>Чебурашка</li> <li>Крокодил Гена</li> <li>Шапокляк</li> </ul> <hr> </body> </html> Результат данного примера показан ни рис. 1.
Рис. 1. Расстояние в 20 пикселов между маркерами и текстом списка Отрицательное значение для padding-left использовать нельзя, поэтому минимальное задаваемое расстояние равно нулю. Но даже в этом случае небольшой исходный промежуток между маркером и текстом останется.
Copyright 2007—2008 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
|
| В избранное | ||
