Описание
Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.
Синтаксис
элемент:nth-child(odd | even | <число> | <выражение>) {...}
Значения
odd Все нечетные номера элементов. even Все четные номера элементов. число Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке. выражение Задается в виде an+b , где a и b целые числа, а n - счетчик, который автоматически принимает значение 0, 1, 2...Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
HTML5 CSS3 IE Cr Op Sa Fx
| 2134 | 2135 | 2136 | 2137 | 2138 | |
| Нефть | 16 | 34 | 62 | 74 | 57 |
| Золото | 4 | 69 | 72 | 56 | 47 |
| Дерево | 7 | 73 | 79 | 34 | 86 |
| Камни | 23 | 34 | 88 | 53 | 103 |
В данном примере псевдокласс :nth-child используется для изменения стиля первой строки таблицы, а также для выделения цветом всех четных строк (рис. 1).
Тег
устанавливает перевод строки в том
месте, где этот тег находится. В отличие от тега параграфа
Использование тега BR
не добавляет пустой отступ перед
строкой. Если текст, в котором используется перевод строки, обтекает плавающий
элемент, то с помощью параметра clear
тега
можно сделать так, чтобы следующая строка начиналась ниже элемента.
Синтаксис
Текст
текст
Параметры
clear Сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент.Закрывающий тег
Не требуется.
Пример 1. Использование тега
Р.Л. Стивенсон
Лето в стране настало,
Вереск опять цветет.
Но некому готовить
Вересковый мед.
Описание параметров тега
Параметр CLEAR
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Параметр clear сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент. Плавающим элементом называется изображение, у которого установлен параметр align или слой, к которому применяется свойство CSS float .
Результат использования параметра clear
зависит
от края, по которому выравнивается элемент и значения аргумента clear
.
Так, если изображение выравнивается по левому краю, а значение параметра clear
тега
установлено как all
или left
, то текст после тега
будет отображаться ниже рисунка. Любые другие значения параметра clear
заставят текст располагаться справа от изображения и обтекать его.
Синтаксис
Аргументы
all Отменяет обтекание элемента одновременно с правого и левого края. left Отменяет обтекание с левой стороны элемента, расположенного после тега. right Отменяет обтекание с правой стороны элемента. none Отменяет действие данного свойства.
Значение по умолчанию
Аналог CSS
Пример 2. Отмена обтекания текста
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
Примечание
Использование параметра clear в спецификации HTML 4 осуждается и взамен рекомендуется применять элемент CSS clear — BR { clear: both | left | none | right }.
Теги форматирования
| Браузер | Internet Explorer | Netscape | Opera | Safari | Mozilla | Firefox | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Версия | 5.5 | 6.0 | 7.0 | 6.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 1.0 | 1.7 | 1.0 | 2.0 |
| Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да |
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Тег
устанавливает перевод строки в том
месте, где этот тег находится. В отличие от тега параграфа
Использование тега BR
не добавляет пустой отступ перед
строкой. Если текст, в котором используется перевод строки, обтекает плавающий
элемент, то с помощью параметра clear
тега
можно сделать так, чтобы следующая строка начиналась ниже элемента.
Синтаксис
Текст
текст
Параметры
clear Сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент.Закрывающий тег
Не требуется.
Пример 1. Использование тега
Р.Л. Стивенсон
Лето в стране настало,
Вереск опять цветет.
Но некому готовить
Вересковый мед.
Результат данного примера показан ни рис. 1.
Рис. 1. Вид текста при использовании тега
Описание параметров тега
Параметр CLEAR
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Параметр clear сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент. Плавающим элементом называется изображение, у которого установлен параметр align или слой, к которому применяется свойство CSS float .
Результат использования параметра clear
зависит
от края, по которому выравнивается элемент и значения аргумента clear
.
Так, если изображение выравнивается по левому краю, а значение параметра clear
тега
установлено как all
или left
, то текст после тега
будет отображаться ниже рисунка. Любые другие значения параметра clear
заставят текст располагаться справа от изображения и обтекать его.
Синтаксис
Аргументы
all Отменяет обтекание элемента одновременно с правого и левого края. left Отменяет обтекание с левой стороны элемента, расположенного после тега. right Отменяет обтекание с правой стороны элемента. none Отменяет действие данного свойства.
Значение по умолчанию
Аналог CSS
Пример 2. Отмена обтекания текста
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
Результат примера показан на рис. 2.
Рис. 2. Отмена обтекания блока текстом
Примечание
Использование параметра clear в спецификации HTML 4 осуждается и взамен рекомендуется применять элемент CSS clear - BR { clear: both | left | none | right }.
