- •1. Структура web-документа. Вставка комментария.
- •2. Текст - логика и физика..
- •3. Форматирование Web-документа
- •Теги физического форматирования текста.
- •Логическая разметка текста.
- •Теги логического форматирования текста.
- •Полезные советы:
- •4. Организация ссылок. Правила записи ссылок Организация ссылок
- •Правила записи ссылок
- •Ссылки на документы различных типов
- •Ссылки на другие ресурсы Интернета
- •5. Списки нумерованные и маркированные. Списки определений Создание списков html страницы
- •Нумерованный список html страницы
- •Маркированный список html страницы
- •Многоуровненвый список html страницы
- •Списки определений html страницы
- •7. Встраивание изображений в web-документ. Выравнивание изображений. Задание размеров выводимого изображения. Отделение изображения от текста. Альтернативный текст
- •Выравнивание изображений.
- •Задание размеров выводимого изображения.
- •Отделение изображений от текста.
- •Рамки вокруг изображений.
- •Альтернативный текст.
- •8. . Использование изображения в качестве ссылки. Баннеры.
- •9. Графические форматы для web-документа
- •10. Таблицы. Создание простейших таблиц. Представление таблиц на странице.
- •11.Форматирование данных внутри таблицы.
- •12. Вложенные таблицы.
- •13. Объединение ячеек таблицы по горизонтали и по вертикали.
- •Объединение ячеек html таблицы по вертикали
- •14. Особенности построения таблицы. Отображение пустых ячеек в таблице. Выравнивание данных в столбцах таблицы Особенности построения html таблиц
- •Выравнивание данных в столбцах html таблицы
- •15. Фреймы. Сферы применения фреймов.
- •Сферы применения фреймов
- •16. Правила описания фреймов.
- •17. Особенности навигации при использовании фреймов. Взаимодействие между фреймами. Различие между фреймами и окнами браузера.
- •Взаимодействие между фреймами в html
- •18. Плавающие фреймы. Варианты их использования.
- •19. Карты-изображения. Графическое представление карты-изображения. Описание конфигурации карты-изображения. Средства создания карты-изображения.
- •20. Каскадные таблицы стилей. Встраивание таблицы стилей в документ.
- •21. Группирование и наследование.
- •22. Селекторы. Селектор class и Селектор id.
- •Пример 2. Использование классов c тегами
- •Пример 3. Использование классов c тегами
- •Теги Span и Div
- •Пример 2. Использование тега div
- •Селекторы id Параметр id задает уникальное имя элемента, которое используется для обращения к нему скриптов. Это позволяет управлять стилем элемента динамически. Синтаксис id селектора следующий.
- •Пример 3. Использование идентификатора id
- •23. Примеры применения контекстных селекторов.
- •24. Псевдоклассы. Псевдоклассы связей.
- •25. Модель форматирования. Блоковые элементы. Встроенные элементы.
- •26. Стилевые свойства форматирования текста.
- •27. Стилевые свойства для цвета и фона.
- •28. Блоки. Визуальное форматирование
- •2 9. Абсолютное, относительное и статическое форматирование.
- •30. Отображение списков.
24. Псевдоклассы. Псевдоклассы связей.
Ну кто из нас не знает, что такое псевдоселекторы (или псевдоклассы) в CSS? Да-да, это то, что обычно пишут после селектора через двоеточие. Самые известные псевдоклассы это :link, :hover, :visited и :active.
Такие конструкции в CSS, как правило, можно встретить в каждом файле стилей, но их использование ограничивается лишь описанием состояния ссылок и не более того.
В общем, тема псевдоселекторов еще не обсуждалась на нашем сайте, так что самое время приступить ;-)
Итак, как я уже сказал, веб-разработчики используют псевдоклассы в основном для задания стилей ссылок, например :link для непосещенной ссылки, :hover для ссылки при наведении, :active для нажатой и удерживаемой ссылки и :visited для посещенной. Кстати, у нас есть отличная статья про оформление ссылок, рекомендую.
Название и назначение псевдоклассов
:link — отвечает за стили непосещенной ссылки;
:hover — состояние объекта (не обязательно ссылки) при наведении на него мышкой;
:active — состояние активного объекта (например, для ссылки и зажатие ее мышкой);
:visited — состояние посещенной ссылки;
:focus — когда вы используете какой-то объект на страницы, то на нем устанавливается фокус (в случае и текстовым поле это постановка курсора в это поле);
:first-child — первый дочерний элемент текущего элемента;
:last-child — соответственно, последний дочерний элемент чего-то;
:only-child — применяет стиль к элементу, если он единственный дочерний элемент;
:nth-child() — какой-то по счету с начала дочерний элемент, например p:nth-child(4);
:nth-last-child() — аналогично, только отчет с конца; интересно, что в этом и предыдущем селекторах можно задавать не только конкретные цифры, но и счетность, к примеру вот так: ul li:nth-last-child(2n+1);
:lang() — если у элемента указан язык (с помощью атрибута lang, например lang="en"), то этот элемент можно выбрать так;
:root — дает указание применить стиль к корневому элементу (в html документе это тег <html>);
:not() — дает ограничение на применение стилей по селектору (то есть селектор .red-block:not(div) применит указанный стиль ко всем элементам с классом .red-block, только есть этот элемент не <div>);
:empty — выбирает пустые элементы;
:first-of-type — применяет стиль к первому элементу этого типа, то есть если у вас есть два дива, стиль будет работать только для первого из них;
:last-of-type — аналогично предыдущему, только для последнего элемента;
:only-of-type — применяет стили к элементы, если он имеет уникальный тип внутри своего родителя;
:nth-of-type() — выбирает указанный по счету с начала элемент текущего типа;
:nth-last-of-type() — тоже самое, но отсчет с конца;
:target — например, если у вас адрес имеет вид index.html#anchor, то этот псевдо класс задаст правило для элемента с id="anchor";
:enabled — выбирает активные инпуты;
:disabled — а этот неактивные;
:checked — отмеченные чекбоксы и выбранные радиобаттоны;
:indeterminate — для радиобаттонов и чекбоксов опеределяет состояние, когда они «никакие», то есть ни выбраны, ни не выбраны (ужас как написал ;-)
:default — элемент по-умолчанию, например кнопка отправки формы;
:valid — стиль для правильного инпута (когда указана data type в HTML 5);
:invalid — когда, соответственно, инпут невалиден;
:in-range — когда значение инпута находиться в заданных границах (type="range", задан min и max, но это все только в HTML 5);
:out-of-range — когда не попадает в границы;
:required — все обязательные поля;
:optional — все необязательные;
:read-only — те элементы, которые доступны только для чтения;
:read-write — для чтения и записи.
Псевдоклассы
Обычно правила форматирования присоединяются к элементу страницы, имеющему определенное положение в структуре документа. Концепция псевдоклассов и псевдоэлементов расширяет адресацию правил форматирования, позволяя внешней информации влиять на процесс форматирования.
Псевдоклассы и псевдоэлементы можно использовать в селекторах правил форматирования, однако реально в исходном тексте документа HTML они не существуют. Вернее, они как бы вставляются браузером при определенных условиях в документ, и на них можно ссылаться в таблицах стилей. их называют классами и элементами, так как это удобный способ описания их поведения. Говоря точнее, их поведение определяется фиктивной последовательностью тэгов.
Псевдоэлементы применяются для адресации некоторых частей элементов, тогда как псевдоклассы позволяют таблицам стилей для элементов разных типов применять разные процедуры форматирования.
Примечание
В браузерах Internet Explorer и Netscape Navigator реализованы только псевдоклассы для элементов связей А. Псевдоэлементы в них не используются вообще.
Псевдоклассы связей
Связь в документе HTML определяется тэгом <А> с параметром HREF. Обычно браузеры отображают посещенные связи отлично от непосещенных (например, разными цветами). Уровень 1 каскадных таблиц стилей регламентирует правила для отображения связей через псевдоклассы элемента А:
A:link { color: red } /* непосещенная связь */
A:visited { color: blue } /* посещенная связь */
A:active { color: green } /* активная связь */
A:hover { color: lime } /* связь, на которой расположен курсор мыши */
Любую связь в документе можно отнести к одному из перечисленных классов. Активная связь — это связь, которая выбрана в данный момент.
Примечание
Комментарии в каскадных таблицах стилей задаются аналогично комментариям в языке С: текст, заключенный между символами /* и */, является комментарием.
Примечание
Псевдокласс hover включен в каскадные таблицы стилей, уровень 2, который частично реализован в Internet Explorer 4.01.
В приведенном примере задается отображение непосещенных связей красным цветом, посещенных — синим, активных — зеленым. Если курсор мыши будет расположен над связью, то ее цвет изменится на ярко-зеленый.
Предупреждение
Браузер Internet Explorer 4.01 правильно реализует псевдоклассы связей, тогда как Netscape Navigator 4.0 не воспринимает псевдоклассы active и hover.
Так как псевдоклассы применяются к единственному типу элементов А, то при задании их в селекторе правил этот элемент можно опустить. Следующие два правила равносильны:
A:link { color: red } /* непосещенная связь */
:link { color: red } /* непосещенная связь */