Границы и псевдоэлементы

Правила CSS для подчёркивания с точкой разберёте самостоятельно, когда рассмотрите особенности псевдоэлементов и управление ими. Его правила в самом последнем блоке файла CSS.

Уголки

Свойства рамок известны из предыдущих тем. Новое — управление каждой границей в отдельности. Для оформления используются несемантические элементы. Причём у каждгого из них нет содержимого, ширина и высота блока равны нулю. Ещё в задаче важны особенности псевдокласса :hth-child(#). Он считает подряд все дочерние элементы, а свойства применяет только к тем, у которых имя и порядковый номер совпадают.


Кружок

В этом разделе, комментарии не требуются. Свойство border-radius не сложное, но любопытное.

Лимон

Снова border-radius, но уже с фантазией автора и с тенью, но не внешней, а внутренней.

Морковка

Используя только CSS »нарисуйте« морковку, похожую на образец.

Морковка.

Псевдоэлементы у строчных объектов

Почти каждому элементу HTML селекторами CSS могут быть добавлены псевдоэлементы. Они располагаются между открывающим и закрывающим тегами перед и после контента. Поэтому у элементов без содержимого (с одним тегом: IMG, HR, BR…) их быть не может. Яркий пример автоматическое добавление кавычек строчным цитатам — элементы Q.

Интересующих нас псевдоэлементов всего два и они виртуальные потому, что в структуре кода HTML их не существует. Подобные элементы, добавленные браузером, называются порождённые. Он самостоятельно создаёт их, выполняя код CSS, и встраивает в структуру DOM. Ни выделить их, ни скопировать невозможно. Убедитесь в этом у слова псевдоэлементы, выделенного полужирным шрифтом.

Псевдоэлементы у блочных объектов

Изначально оба псевдоэлемента создаются с типом inline (строчные). Их, как и реальные элементы, можно превратить в block (блочные). И даже перемещать в любое место, не влияя на контент, назначив им абсолютное позиционирование. А чтобы «привязать» к позиции родительского элемента, ему нужно назначить позиционирование относительное.

В таких случаях псевдоэлементы располагаются на переднем плане и над потоком контента, и над родительским объектом. Для примера оба псевдоэлемента имеют фон и сдвинуты с исходных мест.

Картинка в рамке

Псевдоэлементы обладают свойством обычных элементов. У них есть и поля, и отступы и границы. Браузер отображает псевдоэлементы только тогда, когда в его правиле имеется свойство conten="", хотя бы с пустым значением. Иначе псевдоэлемент не будет создан.

Изображения на странице должны быть ограничены рамкой, чтобы не выглядели как заплаты. Но никто не говорил, что рамка должна быть сплошной линией и располагаться только по границе рисунка. Пример рамки вокруг изображения, созданной псевдоэлементами элемента FIGURE.

Цветущая японская вишня.

Картинка в полурамке

Оформите произвольную картинку, сохранив стиль предложенной рамки. Особое внимание выделите подбору её цвета. Фотография в примере и в задании одна. Розовая рамка акцентирует внимание на цветах, а синяя — на голубом небе.

Цветущая японская вишня.

Всплывающая подсказка

Для хранения пользовательских данных в CSS 3 разработчику позволено самостоятельно создавать атрибуты, начинающиеся с символов data-… и произвольным именем. Их можно использовать для хранения дополнительных сведений о документе, о контенте, об отдельных его фрагментах. Наведите мышку на слово data, выделенное полужирным шрифтом.

В данном примере подсказка записана в элементе [SPAN]. Он отображается на экране только тогда, когда на слово наведена мышка. Для его оформления использованы:

То есть всё то, что вы прочитали выше, рассмотрели с использованием «Инструментов веб-разработки» и выполнили в работе.