Псевдо элементы. Pseudo-elements псевдо-элементы CSS уроки для начинающих академия

От автора: спецификация CSS Pseudo-elements Module Level 4 проливает свет на поведение существующих псевдоэлементов и предоставляет новые. Тем не менее, только несколько из новых псевдоэлементов имеют хоть какую-то поддержку в последних версиях браузеров.

Сегодня мы поговорим о следующих псевдоэлементах:

::before — вставляет генерируемый контент перед контентом элемента

::after — вставляет генерируемый контент после контента элемента

::first-letter — выбирает первую букву элемента

::first-line — выбирает первую строку элемента

::selection — стилизует текст, выделенный курсором

Из них элементы::first–letter, ::first–line и::selection влияют на контент, который входит в исходники. Псевдоэлементы::before и::after, наоборот, вставляют контент в документ, которого нет в исходниках. Разберем поподробнее все псевдоэлементы.

Замечание: синтаксис с одним двоеточием

Вы могли видеть версии::first–letter, ::first–line, ::before и::after с одним двоеточием в старом CSS. В CSS2 эти псевдоэлементы задавались через одноразовое двоеточие:. IE8 требует синтаксис с одинарным двоеточием, хотя большая часть других браузеров поддерживает оба варианта. Лучше использовать синтаксис с двойным двоеточием.

Псевдоэлементы::before и::after

Большая часть псевдоэлементов позволяет выбирать контент, который уже присутствует в исходниках документа, но не задан с помощью языка (другими словами, ваш HTML). Однако::before и::after работают по-другому. Эти псевдоэлементы добавляют генерируемый контент в дерево документа. Созданный контент не существует в HTML исходниках, но он отображается.

Зачем использовать генерируемый контент? Например, можно помечать обязательные поля формы, добавляя контент после лейблов:

/* Применяется к лейблу, ассоциирующемуся с требуемым полем */ .required::after { content: " (Required) "; color: #c00; font-size: .8em; }

В нужном поле формы необходимо использовать HTML свойство required. Так как данная информация уже доступна в DOM, то::before и::after выступают в роли помощников. Это не критический контент, поэтому его можно и не вносить в исходники.

Замечание: генерируемый контент и доступность

Некоторые скрин ридеры и браузеры распознают и читают генерируемый контент, однако большая часть этого не умеет. Не используйте псевдоэлементы::before и::after для предоставления генерируемого контента для пользователей с ограниченными возможностями. Более подробно этот вопрос можно изучить в статье Leonie Watson «поддержка доступности для генерируемого CSS контента ».

Другой способ применения::before и::after – добавление префикса или суффикса в контент. Вышеупомянутая форма может использовать вспомогательный текст, как показано ниже:

< form method = "post" action = "/save" >

< fieldset >

< legend > Change Your Password < / legend >

< p >

< label for = "password" > Enter a new password < / label >

< input type = "password" id = "password" name = "password" >

< / p >

< p >

< label for = "password2" > Retype your password < / label >

< input type = "password" id = "password2" name = "password2" >

< / p >

< p class = "helptext" > Longer passwords are stronger . < / p >

< p > < button type = "submit" > Save changes < / button > < / p >

< / fieldset >

< / form >

Заключим наш вспомогательный текст в парные скобки с помощью::before и::after.

Helptext::before { content: "("; } .helptext::after { content: ")"; }

Helptext :: before {

content : "(" ;

Helptext :: after {

content : ")" ;

Результат.

Возможно, самый полезный способ применения::before и::after – очистка обтекаемых элементов. Nicolas Gallagher представил эту технику (которая основана на работе Thierry Koblentz) в своем посте «новый микро clearfix хак »:

/* Для поддержки IE <= 9 используйте:before и:after */ .clearfix::before, .clearfix::after { content: " "; /* Обратите внимание на пробел между кавычек. */ display: table; } .clearfix::after { clear: both; }

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

Псевдоклассы::before и::after ведут себя полностью, как дочерние элементы тега, за которым они закреплены. Они наследуют все возможные свойства родителя и расположены внутри блока родителя. Они также взаимодействуют с другими блоковыми элементами, как если бы они были настоящими тегами. Свойства display: block или display: table на::before и::after работают точно так же, как и на других элементах.

Предупреждение: один псевдоэлемент на селектор

На данный момент на один селектор разрешается применять только один псевдоэлемент. То есть запись типа p::first-line::before неправильная.

Создание типографических эффектов с помощью:first-letter

Псевдоэлементы::before и::after вставляют контент, а::first-letter работает с контентом, уже прописанном в исходниках. С его помощью можно создавать эффект первой буквы или буквицы, который вы могли видеть в журналах и книгах.

Замечание: первая буква и буквицы

Эффект первой буквы – это буква в верхнем регистре в начале текста, которой задан больший размер шрифта по отношению к остальному тексту. Буквица похожа на первую букву, однако буквица вставляется в первый параграф из минимум двух строк.

Стили ниже добавляют первую заглавную букву во все параграфы p в документе:

p::first-letter { font-family: serif; font-weight: bold; font-size: 3em; font-style: italic; color: #3f51b5; }

p :: first - letter {

font - family : serif ;

font - weight : bold ;

font - size : 3em ;

font - style : italic ;

color : #3f51b5;

Из скриншота можно заметить, что::first-letter изменяет line-height первой строки, если элементу было задано значение line-height без единиц измерения. В данном случае все теги p наследуют значение line-height 1.5 от тега body.

Существует три способа сгладить эту проблему:

уменьшить значение line-height для псевдоэлемента::first–letter, почти всегда подойдет значение.5;

задать line-height с единицами измерения для псевдоэлемента::first–letter;

задать line-height с единицами измерения для body или родителя::first–letter.

Первый вариант сохраняет вертикальный ритм, как в случае со значением line-height без единиц измерения. Второй вариант ограничивает сторонние эффекты фиксированного line-height до самих псевдоэлементов. Третий вариант – самый плохой, есть большая вероятность того, что вы создадите побочный эффект, который нужно будет переписывать с помощью дополнительного CSS кода.

В нашем случае давайте уменьшим значение line-height для p::first-letter до.5 (и перепишем свойства в файле, будем использовать сокращенное свойство font):

p::first-letter { font: bold italic 3em / .5 serif; color: #3f51b5; }

p :: first - letter {

color : #3f51b5;

Результат можно посмотреть ниже. Заметьте, что нам также нужно было настроить нижний margin каждого параграфа p, чтобы компенсировать уменьшенное значение line-height на p::first-letter.

Для создания буквиц понадобится чуть больше строк CSS. В отличие от первых заглавных букв, прилегающий текст к буквице обтекает ее. То есть нам нужно добавить float: left; в наши стили. Также мы добавим верхний, правый и нижний margin:

p::first-letter { font: bold italic 3em / .5 serif; font-style: italic; color: #607d8b; float: left; margin: 0.2em 0.25em .01em 0; }

p :: first - letter {

font : bold italic 3em / . 5 serif ;

font - style : italic ;

color : #607d8b;

float : left ;

margin : 0.2em 0.25em . 01em 0 ;

Плавающий элемент, или в нашем случае псевдоэлемент, заставляет остальной текст обтекать его, как показано ниже.

Если вы не используете px или rem для установки размеров, margin и line-height, будет очень сложно идеально стилизовать::first-letter во всех браузерах.

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

“Lorem ipsum dolor sit amet, consectetur adipiscing elit.” Fusce odio leo, sollicitudin vel mattis eget, ...

< p > & #8220;Lorem ipsum dolor sit amet, consectetur adipiscing elit.” Fusce odio leo, sollicitudin vel mattis eget, ...

В данном случае стили для::first-letter будут применены как к открывающей кавычке, так и к первой букве, как показано ниже. Стили применяются одинаково во всех браузерах.

Тем не менее, результат будет отличаться, когда знак пунктуации генерируется элементом. Рассмотрим следующую разметку:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce odio leo, sollicitudin vel mattis eget, iaculis sit ...

< p > < q > Lorem ipsum dolor sit amet , consectetur adipiscing elit . < / q > Fusce odio leo , sollicitudin vel mattis eget , iaculis sit . . . < / p >

На данный момент браузеры отрисовывают тег q в виде кавычек, использующихся в определенном языке, которые будут открываться и закрываться. Однако не все браузеры одинаково распознают такие кавычки. В Firefox 42 (см. ниже), Safari 8 и более ранних версиях::first-letter изменяет только открывающую кавычку.

В Chrome, Opera и Yandex открывающая кавычка тега q и первая буква параграфа не стилизуются. Ниже показан скриншот в Chrome.

IE применяет стили как к открывающей кавычке, так и к первой букве параграфа. Смотрите ниже.

В спецификации CSS Pseudo-elements Module Level 4 говорится, что знак пунктуации, предшествующий или следующий сразу после первой буквы или символа должен стилизоваться. Однако в спецификации нет точного разъяснения насчет применения стилей к генерируемым знакам пунктуации.

Баги браузеров при использовании::first-letter

По большей части::first-letter работает во всех браузерах ровно так, как ожидаешь. Как и со всеми CSS свойствами, у данного псевдоэлемента есть парочка багов и случаев неправильного использования, о которых нужно знать.

В Firefox 39 и раньше некоторые символы заставляют Firefox игнорировать правило::first–letter: ‑,$,^,_,+,`,~,>,<.>

Это относится к случаям, когда первый символ задан через::before и свойство content, а также если он прописан в исходниках документа. Фикса этого бага нет. Если используете::first-letter, вам придется избегать этих символов в начале параграфа.

Замечание: баги в Blink браузерах

Некоторые версии Blink браузеров не применят правило::first–letter, если у родителя задано свойство display со значением inline или table. Баг есть в Chrome 42, Opera 29 и Yandex 15. Баг пофиксили в Chrome 44, однако релиз увидит свет не раньше, чем эта книга окажется у вас в руках. Самый простой способ обойти баг – добавить к родителю свойство display: inline-block, display: block или display: table-cell.

Создание типографических эффектов с помощью::first-line

Псевдокласс::first-line работает почти как::first-letter, только эффект распространяется на всю первую строку элемента. Можно, например, делать первую строку каждого параграфа больше и изменять цвет текста:

Можно принудительно поставить конец первой строки с помощью br или hr, как показано ниже. К сожалению, это не всегда работает. Если ваш элемент может вместить только 72 символа, то тег br после 80-го символа никак не повлияет на псевдоэлемент::first-line. Вы просто получите странный разрыв строки.

Точно так же и с неразрывным пробелом (), который вставляется, чтобы не разрывать слова между строк. Это никак не повлияет на::first-line. Слово, которое расположено перед будет принудительно перемещено на строку, где расположен текст после неразрывного пробела.

Генерируемый контент, добавленный через::before, будет отображаться на первой строке, как показано ниже.

Если генерируемый текст достаточно длинный, он полностью заполнит первую строку. Однако если добавить display: block (например, p::before {content: ‘!!!’; display: block;}), то контент займет всю первую строку целиком.

К сожалению, этот баг до сих пор есть в Firefox 40 и более ранних версиях. Firefox полностью игнорирует правило.

Забавные интерфейсы с помощью::selection

Псевдоэлемент::selection относится к так называемым «подсвечивающим» псевдоэлементам, прописанным в спецификации CSS Pseudo-Elements Module Level 4. Данный подсвечивающий псевдоэлемент ранее входил в спецификацию Selectors Level 3, единственный, поддерживающийся в браузерах.

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

С::selection можно использовать не все свойства. В спецификации прописаны только следующие свойства:

Помните о доступности при выборе цвета переднего фона и заднего фона для::selection. Некоторые комбинации цветов дают плохой контраст для слабо видящих людей. Другие комбинации могут быть неразборчивыми для дальтоников. Перед конечным выбором цветов используйте инструмент проверки контраста и симулятор дальтонизма.

В Pseudo-Elements Module также прописаны псевдоклассы::spelling-error и::grammar-error. Когда они будут реализованы, мы сможем стилизовать текст с ошибками, проверяемыми по словарю браузера.

Псевдоэлементы CSS это своего рода условные составные части уже существующих html тегов.

С точки зрения синтаксиса они ни чем не отличаются от псевдоклассов . Их схожесть также проявляется в некоторой «фантомности» того, к чему они применяются, только в отличие от псевдоклассов псевдоэлементы реагируют не на изменение состояния определенных тегов на странице, а создают своего рода фантомные составляющие части уже существующих тегов.

Как пользоваться селекторами псевдоэлементов CSS?

Задачей селектора псеводоэлемента CSS является выбор из структуры документа составных частей элементов подпадающих под характеристики селектора и спецификацию псевдоэлемента.

Задается он при помощи двуеточия после которого следует название используемого псевдоэлемента.

В качестве примера давайте выведем первую букву в абзацах красным цветом большего размера:

p: first- letter { font- size: 150 %; color: red; }

Нюансом при использовании псевдоэлементов CSS является то, что они должны идти в конце селектора. Тоесть такая запись работать не будет:

p: first- line span{ color: red; }

Какие бывают псевдоэлементы?

Подводя итоги

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

Чаще всего на практике используются:after и:before (к примеру для добавления маркеров спискам, более сложного оформления выпадающего меню), чуть реже:first-letter и:first-line. Области же применения остальных псевдоэлементов достаточно экзотичны и крайне редко встречаются в практике.

Да и не стоит забывать, что только эти 4 селектора поддерживаются всеми браузерами достаточно давно. Остальные псевдоэлементы начали входить в обиход с появлением стандарта CSS3, что означает отсутствие их поддержки у старых браузеров.

Цель урока: Рассмотрение понятия «медиа-запросы» для создания отзывчивой верстки. Знакомство с псевдоклассами и псевдоэлементами в CSS. Рассмотрены примеры создания стилей

Медиа-запросы — логическое выражение, которое может быть равно истине (true) или лжи (false)

Условием является либо параметры устройства, на котором отображается веб-страница, либо размеры экрана пользователя.

Медиа-запрос записывается либо в стилевом файле, либо во вложенном стиле и имеет следующую структуру:

All — все устройста. Может быть screen | print | tv

max-width — медиа функция , которая может задавать параметры указанного устройства или разрешение экрана

В примере устройство с максимальным разрешением экрана — 480px и с минимальным — 320px:

Из примера видно, что функции могут содержать логические условия: AND — И, NOT — НЕ и ONLY — только

Медиа-запросы логично размещать после всех описанных стилей

Псевдоклассы в CSS

Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя.

Важно: На псевдокласс указывает наличие двоеточия (:)

Три псевдокласса определены именно для гиперссылки (для тега a):

* active — псевдокласс не только для гиперссылки

Псевдоклассы для всех элементов :

Псевдоклассы для всех элементов управления :

input:focus{...} /* в тот момент, когда элемент получает фокус */ input:active{...}/* в момент активации элемента */

Пример: На странице расположено текстовое поле. Необходимо взять элемент в толстую черную рамку, когда он в фокусе, и в толстую красную, когда он активен

Выполнение:

Результат:

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

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

Псевоэлементы, определяющие новые элементы:

элемент:first-letter {...}/* первая буква или символ элемента */ элемент:first-line {...}/* первая строка элемента */

Выполнение:

К этому тексту применен стиль. К этому тексту применен стиль. К этому тексту применен стиль. К этому тексту применен стиль. К этому тексту применен стиль.

Результат:

Псевоэлементы, генерирующие содержимое:

элемент:before {content:""}/* генерирует текст перед элементом */ элемент:after {content:""} /* генерирует текст после элемента */

Пример: К содержимому абзаца с классом new добавить дополнительное слово — Ого! .

Выполнение:

Ловля льва в пустыне с помощью метода золотого сечения.

Метод ловли льва простым перебором.

Результат:

Пример: Для маркированного списка убрать маркер и установить вместо него какой-либо символ

Выполнение:

ul { list-style-type: none; /* Прячем маркеры списка */ } li:before { content: "\20aa "; /* Добавляем перед элементом списка символ в юникоде */ }

Чебурашка
Крокодил Гена
Шапокляк
Крыса Лариса

Результат:

Задание: Скопируйте текст, расположенный ниже, и вставьте в веб-страницу. Используя css либо , создайте следующие правила, чтобы достигнуть эффекта как на итоговом изображении.

Текст:

<body > <h1 > Стих 1</ h1 > <p > <br / > <br / > Я понял, что пришедшее извне<br / > </ p >

<br / > <br / > (Угли недолго проживут<br / > </ p >

Вот так и жду, не шевелясь,<br / > Когда уйдут из сердца лица,<br / > Ушедшие однажды с глаз,<br / > </ p > <hr > <h1 > Стих 2</ h1 > <p > Обещай, что вернешься Домой.<br / > Эти зимы меня одолеют.<br / > Я смотрю на тебя и не смею<br / > </ p >

<br / > Нам обоим запомнятся годы<br / > <br / > Научившей любить и прощать. </ p >

Обещай, что в далеком краю,<br / > Если станет тебе одиноко,<br / > <br / > </ p >

И поселится в сердце покой.<br / > <br / > Обещай,<br / > что когда-нибудь все же<br / > ты конечно вернешься Домой. </ p > <hr > </ body >

Стих 1

Вопрос такой: зачем все это мне?
Но, не найдя ответа на подходе,
Я понял, что пришедшее извне
Стремительно вовне же и уходит.

Другой вопрос - как быть? Но тут
Ответ просился сам: бездействуй!
(Угли недолго проживут
В костре, где все без происшествий.)

Вот так и жду, не шевелясь,
Когда уйдут из сердца лица,
Ушедшие однажды с глаз,
Чтоб никогда не возвратиться.

Стих 2

Обещай, что вернешься Домой.
Эти зимы меня одолеют.
Я смотрю на тебя и не смею
Прикоснуться холодной рукой.

Обещай, что не будешь скучать.
Нам обоим запомнятся годы
Нашей странной и глупой свободы,
Научившей любить и прощать.

Обещай, что в далеком краю,
Если станет тебе одиноко,
Ты прочтешь эти добрые строки
Про бескрайнюю Нежность мою.

И поселится в сердце покой.
Нет тебя мне на свете дороже.
Обещай,
что когда-нибудь все же
ты конечно вернешься Домой.

Что такое псевдо-элементы?

Псевдо-элемент CSS используется для стиля указанных частей элемента.

Например, он может быть использован для:

Стиль первой буквы или строки элемента
Вставка содержимого до или после содержимого элемента

Синтаксис

Синтаксис псевдо-элементов:

selector::pseudo-element {
property:value;
}

Обратите внимание на двойную нотацию двоеточия- ::first-line Против:first-line

Двойной двоеточие заменил нотацию одиночной двоеточия для псевдо-элементов в CSS3. Это была попытка W3C различать псевдо-классы и псевдо-элементы .

Синтаксис с одним двоеточием использовался как для псевдо-классов, так и для псевдо-элементов в CSS2 и CSS1.

Для обратной совместимости синтаксис с одним двоеточием приемлем для CSS2 и CSS1 псевдо-элементов.

Псевдо-элемент:: первая строка

::first-line псевдо-элемент используется для добавления особого стиля к первой строке текста.

В следующем примере форматируется первая строка текста во всех

Элементах:

Пример

p::first-line {
color: #ff0000;
font-variant: small-caps;
}

Примечание: Псевдо-элемент::first-line может применяться только к элементам уровня блока.

Следующие свойства применяются к::first-line псевдо-элементу:

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

Псевдо-элемент:: первая буква

::first-letter псевдо-элемент используется для добавления специального стиля к первой букве текста.

В следующем примере форматируется первая буква текста во всех

Элементах:

Пример

p::first-letter {
color: #ff0000;
font-size: xx-large;
}

Примечание: Псевдо-элемент::first-letter может применяться только к элементам уровня блока.

Следующие свойства применяются к:: первая буква псевдо-элемент:

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

Псевдо-элементы и классы CSS

Псевдо-элементы можно комбинировать с классами CSS:

Пример

p.intro::first-letter {
color: #ff0000;
font-size:200%;
}

В приведенном выше примере будет отображаться первая буква абзацев с классом = "Intro", в красном и в большем размере.

Множественные псевдо-элементы

Также можно комбинировать несколько псевдо-элементов.

В следующем примере первая буква абзаца будет красной, в размер шрифта XX-Large. Остальная часть первой линии будет синей, а в капители. Остальная часть абзаца будет размер шрифта по умолчанию и цвет:

Пример

p::first-letter {
color: #ff0000;
font-size: xx-large;
}

P::first-line {
color: #0000ff;
font-variant: small-caps;
}

CSS-:: перед псевдо-элемент

Псевдо-элемент::before может использоваться для вставки некоторого содержимого перед содержимым элемента.

В следующем примере изображение вставляется перед содержимым каждого элемента

:

Пример

h1::before {
content: url(smiley.gif);
}

CSS-The:: после псевдо-элемент

Псевдо-элемент::after может использоваться для вставки некоторого содержимого после содержимого элемента.

В следующем примере изображение вставляется после содержимого каждого элемента

:

Пример

h1::after {
content: url(smiley.gif);
}

CSS-элемент:: выбор псевдо-элемента

Псевдо-элемент::selection совпадает с частью элемента, выбранного пользователем.

Следующие свойства CSS могут быть применены к::selection: color , background , cursor и outline .

В следующем примере выделенный текст выделяется красным цветом на желтом фоне:

Пример

::selection {
color: red;
background: yellow;
}

Все псевдо-элементы CSS

All CSS Pseudo Classes

Selector	Example	Пример описания
:active	a:active	Выбор активной ссылки
:checked	input:checked	Выбор каждого отмеченного элемента
:disabled	input:disabled	Выбор всех отключенных элементов
:empty	p:empty	Выбор каждого элемента Не имеющего дочерних элементов
:enabled	input:enabled	Выбор всех включенных элементов
:first-child	p:first-child	Выбирает каждый элемент Являющийся первым дочерним элементом родительского элемента
:first-of-type	p:first-of-type	Выбор каждого элемента Являющегося первым элементом Родительского элемента
:focus	input:focus	Выбор элемента , имеющего фокус
:hover	a:hover	Выбор ссылок при наведении указателя мыши
:in-range	input:in-range	Выбор элементов со значением в указанном диапазоне
:invalid	input:invalid	Выбор всех элементов с недопустимым значением
:lang(language )	p:lang(it)	Выбирает каждый элемент Со значением атрибута lang, начинающимся с "IT"
:last-child	p:last-child	Выбирает каждый элемент Являющийся последним дочерним элементом родительского элемента
:last-of-type	p:last-of-type	Выбирает каждый элемент Являющийся последним Элементом его родительского элемента

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

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

Пример

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

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

РЕЗУЛЬТАТ:

Пример

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

РЕЗУЛЬТАТ:

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

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

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

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

Пример

α – альфа
β – бета
γ – гамма

РЕЗУЛЬТАТ:

α – альфа
β – бета
γ – гамма

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

Firefox понимает этот псевдоэлемент только с префиксом, т.е. ::-moz-selection

Пример

РЕЗУЛЬТАТ:

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