Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Псевдоэлементы CSS

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

Псевдоэлемент состоит из двух двоеточий ( :: ) и имени. Двойное двоеточие было введено в CSS3 для того, чтобы отделить псевдоэлементы от псевдоклассов. Однако для совместимости с прежними таблицами стилей допускается использовать одинарное двоеточие( : ).

::first-line первая строка текстового блока.
Пример
<style type="text/css">
    p::first-line {
        font-weight: bold;
    }
</style>
<p>
    При редактировании CSS-файла возникает противоречивая задача. С одной стороны код должен быть удобным для восприятия и редактирования, быстрого отыскания нужного селектора, для чего активно применяются отбивки, комментарии, пробелы и символы табуляции. С другой стороны, объем кода должен быть компактным и не содержать в себе ничего лишнего. Компактность позволяет несколько ускорить загрузку сайта и повысить его производительность.
</p>
<p>
    Данное противоречие решается наличием двух версий CSS-файла: один для редактирования, а второй для загрузки на сервер. Сам же процесс сокращения кода называется минимизацией и вполне автоматизирован с помощью специализированных программ или сетевых сервисов. Но если приходится часто вносить изменения в CSS-файл, то процесс минимизации становится неудобным. Сами посудите, вначале надо отредактировать файл, затем его минимизировать и полученный код сохранить в файл, который нужно залить на сервер. Слишком много действий приходится совершать ради одного изменения. Логичнее было бы возложить задачу минимизации на сайт. Загрузили файл на сервер, и вот он уже в компактном виде отдается посетителям. Одно из таких универсальных решений называется minify, это библиотека на PHP5. Она минимизирует, объединяет и кэширует CSS-файлы, а также JavaScript.
</p>

РЕЗУЛЬТАТ:

При редактировании CSS-файла возникает противоречивая задача. С одной стороны код должен быть удобным для восприятия и редактирования, быстрого отыскания нужного селектора, для чего активно применяются отбивки, комментарии, пробелы и символы табуляции. С другой стороны, объем кода должен быть компактным и не содержать в себе ничего лишнего. Компактность позволяет несколько ускорить загрузку сайта и повысить его производительность.

Данное противоречие решается наличием двух версий CSS-файла: один для редактирования, а второй для загрузки на сервер. Сам же процесс сокращения кода называется минимизацией и вполне автоматизирован с помощью специализированных программ или сетевых сервисов. Но если приходится часто вносить изменения в CSS-файл, то процесс минимизации становится неудобным. Сами посудите, вначале надо отредактировать файл, затем его минимизировать и полученный код сохранить в файл, который нужно залить на сервер. Слишком много действий приходится совершать ради одного изменения. Логичнее было бы возложить задачу минимизации на сайт. Загрузили файл на сервер, и вот он уже в компактном виде отдается посетителям. Одно из таких универсальных решений называется minify, это библиотека на PHP5. Она минимизирует, объединяет и кэширует CSS-файлы, а также JavaScript.

Псевдоэлемент ::first-letter дает возможность оформить текст "буквицами".

::first-letter первая буква текстового блока.
Пример
<style type="text/css">
    p::first-letter {
        font: italic 40px Georgia, serif;
    }
</style>
<p>
    За горами, за лесами,<br>
    За широкими морями,<br>
    Не на небе – на земле<br>
    Жил старик в одном селе...
</p>

РЕЗУЛЬТАТ:

За горами, за лесами,
За широкими морями,
Не на небе – на земле
Жил старик в одном селе...

::before генерируемое содержимое, расположенное до содержимого элемента;
::after генерируемое содержимое, расположенное после содержимого элемента.

Псевдоэлементы ::before и ::after используются вместе со свойством content и наследуют стиль от элемента, к которому добавляются.

При добавлении ::before или ::after к блочному элементу их свойство display может принимать значения block, inline, none, list-item. Все остальные будут восприниматься как block.

При добавлении ::before или ::after к строчному элементу их свойство display может принимать значения inline и none. Все остальные будут восприниматься как inline.

Псевдоэлементы ::before и ::after нельзя добавить ни к элементу img, ни к элементу input, так как эти элементы не имеют содержимого.
Пример
<style type="text/css">
    li {
        list-style: none;
    }
    li::before {
        content: "\25BA";
        padding-right: 5px;
    }
</style>
<ul>
    <li>α – альфа</li>
    <li>β  – бета</li>
    <li>γ – гамма</li>
</ul>

РЕЗУЛЬТАТ:

  • α – альфа
  • β – бета
  • γ – гамма
::selection текст, выделенный пользователем.

К выделенному тексту можно применять свойства color, background и background-color.

Firefox понимает этот псевдоэлемент только с префиксом, т.е. ::-moz-selection
Пример
<style type="text/css">
    p::selection {
        background-color: #ff0;
    }
    p::-moz-selection {
        background-color: #ff0;
    }
</style>
<p>Выделите левой кнопкой мыши текст этого абзаца, и он будет на желтом фоне.</p>

РЕЗУЛЬТАТ:

Выделите левой кнопкой мыши текст этого абзаца, и он будет на желтом фоне.


Смотрите также:


.