CSS Advanced
CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
Conic Gradients
CSS Shadows
Shadow Effects
Box Shadow
CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS MaskingCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries
CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive
:first-line
Определяет стиль первой строки блочного текста. Длина этой строки зависит от
многих факторов, таких как используемый шрифт, размер окна браузера, ширина
блока, языка и т.д.
К псевдоэлементу :first-line могут
применяться не все стилевые свойства. Допустимо использовать свойства, относящиеся
к шрифту, изменению цвет текста и фона, а также: clear, line-height, letter-spacing, text-decoration, text-transform, vertical-align и word-spacing.
В примере 16.4 показано использование псевдоэлемента :first-line применительно к абзацу текста.
Пример 16.4. Выделение первой строки текста
HTML5CSS 2.1IECrOpSaFx
Результат примера показан на рис. 16.4.
Рис. 16.4. Результат применения псевдоэлемента :first-line
В данном примере первая строка выделяется красным цветом и курсивным начертанием.
Обратите внимание, что при изменении ширины окна браузера, стиль первой строки
остается постоянным, независимо от числа входящих в нее слов
5.2 Синтаксис селекторов
Простой селектор — это либо , либо , непосредственно за которым в произвольном порядке может следовать несколько , или . Простой селектор сопоставим, если сопоставимы все его компоненты.
Селектор представляет собой последовательность из одного или нескольких простых селекторов, между которыми расположены комбинаторы. Комбинаторами могут служить пробелы, символы «>» и «+». Между комбинатором и простыми селекторами может находиться произвольное количество пробелов.
Элементы дерева документа, которые сопоставляются селектору, называются его областями применения . Селектор, состоящий из одного простого селектора, сопоставляется любому элементу, удовлетворяющему требованиям данного селектора. Если к последовательности дополнительно приписать селектор и комбинатор, то это наложит дополнительные требования соответствия. Поэтому областью применения селектора всегда следует считать подмножество элементов, сопоставляемых крайнему справа простому селектору.
К последнему в последовательности простому селектору может быть добавлен один . В этом случае информация о стиле будет применяться только к части каждой области применения.
5.2.1 Группировка
Если в нескольких селекторах используются одни и те же объявления, их можно сгруппировать в список, разделив запятыми.
В данном примере собраны три правила с одинаковыми объявлениями. Таким образом, запись
H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }
эквивалентна следующей:
H1, H2, H3 { font-family: sans-serif }
Наряду с такой возможностью в CSS предлагаются другие алгоритмы сокращения, включая и .
5.12
5.12.1 :first-line
:first-line
. :
P:first-line { text-transform: uppercase }
: »
«. «P:first-line»
HTML.
, ,
.
,
,
, .. ,
HTML:
<P>This is a somewhat long HTML paragraph that will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>
THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.
<P><P:first-line> This is a somewhat long HTML paragraph that will </P:first-line> be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>
,
,
. ,
SPAN:
<P><SPAN class="test"> This is a somewhat long HTML paragraph that will be broken into several lines.</SPAN> The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>
<P><P:first-line><SPAN class="test"> This is a somewhat long HTML paragraph that will </SPAN></P:first-line><SPAN class="test"> be broken into several lines.</SPAN> The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>
:first-line
-,
. :first-line
: ,
5.12.2 :first-letter
:first-letter
»
» »
«,
.
-,
— ‘none’,
.
, :first-letter: ,
(
‘float’ ‘none’),
CSS2
,
:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Drop cap initial letter</TITLE>
<STYLE type="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; font-style: italic;
font-weight: bold; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article
in The Economist.</P>
</BODY>
</HTML>
<P> <SPAN> <P:first-letter> T </P:first-letter>he first </SPAN> few words of an article in the Economist. </P>
,
:first-letter
(.. ),
:first-line
, .
,
, ,
.
.
(.. ,
Unicode
«open» (Ps), «close»
(Pe) «other» (Po)),
, ,
:
:first-letter
.
.
, , «ij»
,
:first-letter.
,
.
P ’24pt’.
‘blue’, — ‘red’.
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>- 2- .</P>
,
«»,
:
<P> <P:first-line> <P:first-letter> </P:first-letter>- </P:first-line> 2- . </P>
, :first-letter
:first-line. ,
:first-line, :first-letter,
,
:first-letter.
5.12.3 :before :after
‘:before’ ‘:after’
.
.
H1:before {content: counter(chapno, upper-roman) ". "}
:first-letter :first-line
:before :after,
, .
P.special:before {content: "Special! "}
P.special:first-letter {color: #ffd800}
«S» «Special!»
.
Когда использовать и не использовать генерируемый контент в CSS
Генерируемый контент в CSS реализуется с помощью комбинации свойства с псевдоэлементами или .
Контентом может быть простой текст или контейнер, которым мы манипулируем при помощи CSS, чтобы выводить графическую форму или декоративный элемент. Здесь я буду говорить о первом типе контента — тексте.
Генерируемый контент не стоит использовать для важного текста по следующим причинам:
- Он будет недоступен скрин-ридерам;
- Он будет невыделяем;
- Если генерируемый контент использует излишнее содержание для украшения, скрин-ридеры будут читать его, что ухудшит впечатления пользователей.
Используйте генерируемый контент для декорации и незначительного текста, но убедитесь, что он правильно обрабатывается скрин-ридерами, чтобы использующие эту технологию не отвлекались на него. Основывайтесь на методике “прогрессивного улучшения”, когда собираетесь использовать генерируемый контент.
На Smashing Magazine есть отличная статья Габриеля Романато об использовании генерируемого контента.
Синтаксис
Синтаксис
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | ||
| * | Повторять ноль или больше раз. | * |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Псевдоэлемент :first-letter</title>
<style type=»text/css»>
txtBox {
font-size: 12pt;
line-height: 1.2;
}
.txtBox:first-letter {
margin-top: -15px;
background-color: #ffeeaa;
color: red;
font-size: 320%;
font-weight: bold;
float: left;
}
</style>
</head>
<body>
<h1>Отрывок из сказки «Теремок»</h1>
<div class=»txtBox»><p>Стоит в поле теремок. Бежит мимо мышка-норушка. Увидела теремок, остановилась и спрашивает:</p>
<p>— Терем-теремок! Кто в тереме живет? Никто не отзывается. Вошла мышка в теремок и стала там жить.</p>
</div>
</body>
</html><!DOCTYPE html><html><head><meta charset=»utf-8″><title>Псевдоэлемент :first-letter</title><style type=»text/css»>txtBox {font-size: 12pt;line-height: 1.2;}.txtBox:first-letter {margin-top: -15px;background-color: #ffeeaa;color: red;font-size: 320%;font-weight: bold;float: left;}</style></head><body><h1>Отрывок из сказки «Теремок»</h1><div class=»txtBox»><p>Стоит в поле теремок. Бежит мимо мышка-норушка. Увидела теремок, остановилась и спрашивает:</p><p>— Терем-теремок! Кто в тереме живет? Никто не отзывается. Вошла мышка в теремок и стала там жить.</p></div></body></html>
Псевдоэлемент :first-letter
5.6 Селекторы дочерних элементов
Селектор дочерних элементов сопоставим, если элемент является по отношению к некоторому другому
элементу. Данный тип селекторов состоит из двух и более селекторов, разделенных
символом «>».
Следующее правило задает стиль всех элементов P, являющихся дочерними элементами
элемента BODY:
BODY > P { line-height: 1.3 }
В приведенном ниже примере осуществляется объединяются селекторы
потомков и селекторы дочерних элементов:
DIV OL>LI P
Селектор, построенный в этом примере, сопоставляется элементу P,
являющемуся потомком элемента LI, который должен быть дочерним элементом элемента OL. Последний, в свою очередь, должен быть потомком элемента DIV
Обратите внимание, что необязательные пробелы вокруг комбинатора «>» опущены.
Информацию о выборе первого дочернего элемента см. ниже в раздел о псевдоклассах .
5.10 Псевдоэлементы и псевдоклассы
В языке CSS2 стиль обычно прикрепляется к элементу в зависимости от его
местонахождения в . В большинстве случаев эта простая модель оказывается приемлемой, но все же иногда
из-за структуры она не
позволяет реализовать некоторые устоявшиеся сценарии построения публикации.
Например, в HTML 4.0 (см. ) нет элемента, который
бы указывал на первую строку абзаца, и поэтому нет простого селектора CSS,
который бы мог указывать на нее.
В CSS вводится представление о псевдоэлементах и псевдоклассах, позволяющих осуществлять
форматирование на основании информации, не включенной в дерево документа.
- Псевдоэлементы формируют абстрактные представления о дереве документа в дополнение к тем, которые определяются языком документа. Например, в языках,
используемых для создания документов, не предусмотрены алгоритмы доступа к первой букве или первой строке содержимого элемента. Псевдоэлементы CSS
позволяют разработчикам таблиц стилей обращаться к этим объектам, доступ к которым нельзя получить другим способом. Псевдоэлементы предоставляют разработчикам таблиц стилей различные способы назначения стиля содержимому, не существующему в исходном документе (например, псевдоэлементы
предоставляют доступ к генерируемому содержимому). - Псевдоклассы позволяют осуществлять классификацию элементов по их характеристикам, которые не являются именем, атрибутом или содержимым и не могут быть получены из дерева документа. Псевдоклассы могут быть динамическими в том смысле, что элемент может приобрести псевдокласс или лишиться его во время работы пользователя с этим документом. Исключение составляет псевдокласс , который может быть выведен из
дерева документа.
Ни псевдоэлементы, ни псевдоклассы не отображаются в исходном документе или дереве документа.
Псевдоклассы могут располагаться в любом месте селекторов, а псевдоэлементы могут находиться только после
некоторого селектора.
Имена псевдокласов и псевдоэлементов учитывают регистр.
Некоторые псевдоклассы являются взаимоисключающими, а другие можно применять
одновременно к одному и тому же элементу. В случае конфликта правил результат
определяется принятым .
могут либо все правила, которые определяют селекторы, содержащие :first-line или :first-letter, либо поддержать
только некоторую часть свойств, обусловленных использованием псевдоэлементов.
Псевдоэлементы
Как упоминалось в начале статьи, псевдоэлементы можно сравнить с виртуальными элементами, которые можно обрабатывать как обычные элементы HTML. Они не существуют в дереве документа или в DOM, это значит, что мы их создаем с помощью CSS.
Также напомню, что разница между двойным и одиночным доветочиями это просто визуальное различие между псевдоэлементами стандартов CSS 2.1 и CSS3, вы можете свободно использовать любой вариант.
::before/:before
Псевдоэлемент , также как и его сосед добавляет содержимое (текст или форму) к другому элементу HTML. Еще раз отмечу, что этого контента нет в DOM, но им можно манипулировать, как будто он есть. Свойство надо добавлять в CSS.
Запомните, что добавленный в псевдоэлемент текст нельзя выделить.
В результате будет выведено:
Примечание: Обратили внимание на пробел после “Hello ”? Да, о пробелах надо позаботиться самостоятельно
::after/:after
Псевдоэлемент также используется для добавления содержимого (текста или формы) к другому элементу HTML. Этот контент отсутствует в DOM, но им можно манипулировать, как будто он есть; свойство надо добавлять в CSS. Текст, добавленный в псевдоэлемент, нельзя выделить.
В результате будет выведено:
::backdrop (эксп.)
Псевдоэлемент это бокс, генерируемый перед полноэкранным элементом, расположенным над всем остальным контентом. Он используется в сочетании с псевдоклассом для изменения цвета фона максимизированного окна — если вас не устраивает дефолтный черный.
Примечание: для псевдоэлемента обязательно двойное двоеточие, иначе он не работает.
Разовьем наш пример с псевдоклассом :
Демо:
See the Pen CSS ::backdrop pseudo-element by Ricardo Zea (@ricardozea) on CodePen.
::first-letter/:first-letter
Псевдоэлемент выбирает первый символ на строке текста. Если перед текстом есть элемент типа изображения, видео или таблицы, он не влияет на текст и первая буква по-прежнему выбирается из текста.
Это отличная вещь для использования в параграфах, для повышения типографской привлекательности без использования изображений и внешних ресурсов.
Совет: этот псевдоэлемент способен захватывать первую букву, сгенерированного контента в , несмотря на его отсутствие в DOM.
::first-line/:first-line
Псевдоэлемент выбирает первую строку в элементе. Он не работает со строчными элементами, только с блочными.
При использовании в параграфе, например, только первая строка будет стилизована, даже если текст обтекает другой элемент.
::selection
Псевдоэлемент используется для стилизации выделенного текста. Браузеры на движке Gecko пока используют версию с префиксом .
Примечание: сочетание в одном правиле синтаксиса с префиксом и без префикса не работает, надо создавать два отдельных правила.
::placeholder (эксп.)
Псевдоэлемент выбирает текст, добавленный в качестве заглушки в элементы формы с помощью атрибута .
Его также можно указывать как , этот синтаксис фактически и используется в CSS.
Примечание: этот элемент еще не является частью стандарта, с большой вероятностью его имплементация изменится в будущем, поэтому используйте его с осторожностью. В некоторых браузерах (IE 10 и Firefox до версии 18), псевдоэлемент реализован как псевдокласс, но во всех остальных браузерах это псевдоэлемент, поэтому если вы не поддерживаете старые версии Firefox и IE 10, вы будете писать примерно такой код:
В некоторых браузерах (IE 10 и Firefox до версии 18), псевдоэлемент реализован как псевдокласс, но во всех остальных браузерах это псевдоэлемент, поэтому если вы не поддерживаете старые версии Firefox и IE 10, вы будете писать примерно такой код:
Стиль первой буквы.
Ну а если Вам этого примера мало можете взглянуть на ещё один:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»><html><head><title>Псевдоэлемент first-letter.</title><style type=»text/css»>p {font: 16px Arial;}p:first-letter {font: bold 24px Verdana;color:#ff0000}</style></head><body><p>Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.<p><p>Осмысливая мысли, в смысле смысла, есть смысл, помыслить о немыслимом..<p></body></html>
смотреть пример
В примере выше мы изменили размер, шрифт, цвет и жирность первой буквы для всех параграфов на странице.
CSS Tutorial
CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL
CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand
CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders
CSS Margins
Margins
Margin Collapse
CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset
CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow
CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand
CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive
CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples
CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar
CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions
5.9 ID-селекторы
Язык документа может содержать атрибуты типа ID. Их отличие от других атрибутов заключается в том, что любые два из них обязательно имеют различные значения. Независимо от языка документа атрибут ID может использоваться для уникальной идентификации элементов. В HTML-документах все атрибуты ID обозначаются «id», а в XML-документах атрибуты ID могут обозначаться по-другому, но для них справедливо то же самое ограничение.
Атрибут ID языка документа позволяет разработчикам назначать идентификатор одному экземпляру элемента в дереве документа. В CSS ID-селекторы сопоставляются экземпляру элемента в зависимости от его идентификатора. В CSS ID-селектор содержит символ «#», непосредственно за которым следует значение атрибута ID.
Следующий ID-селектор сопоставляется элементу H1, значение атрибута ID которого равно «chapter1»:
H1#chapter1 { text-align: center }
В следующем примере правило стиля сопоставляется элементу, у которого значение атрибута ID равно «z98y». Т.е. это правило будет сопоставляться элементу P:
<HEAD>
<TITLE>Match P</TITLE>
<STYLE type="text/css">
*#z98y { letter-spacing: 0.3em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Разреженный текст</P>
</BODY>
Однако в следующем примере это правило стиля будет сопоставляться только элементу H1, значение атрибута ID которого равно «z98y». В этом примере данное правило не сопоставляется элементу P:
<HEAD>
<TITLE>Match H1 only</TITLE>
<STYLE type="text/css">
H1#z98y { letter-spacing: 0.5em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Разреженный текст</P>
</BODY>
ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов. Например, в HTML-документе, в терминах каскада селектор #p123 более специфичен, чем .
Примечание. В XML 1.0 информация о том, в каком атрибуте содержатся ID элементов, располагается в DTD. Во время синтаксического анализа XML-документа агенты пользователей не всегда просматривают DTD и поэтому не всегда могут иметь информацию об идентификаторе элемента. Если разработчик таблицы стилей знает или предполагает, что подобное может случиться, то он должен использовать обычные селекторы атрибутов вместо ID-селекторов: вместо . Порядок каскадирования обычных селекторов атрибутов отличается от порядка каскадирования ID-селекторов. Возможно, при этом понадобится добавить в объявления приоритет «!important»: . Естественно, что элементы в документах XML 1.0, не использующих DTD, вообще не имеют атрибута ID.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Для псевдоэлемента сработает лишь небольшой набор CSS-свойств:
- Шорткат font и шрифтовые свойства, начинающиеся на font — ;
- Шорткат background и свойства фона, начинающиеся на background — ;
- Шорткат margin и внешние отступы, начинающиеся на margin — ;
- Шорткат padding и внутренние отступы, начинающиеся на padding — ;
- Шорткат border и свойства рамок, начинающиеся на border — ;
- цвет текста color ;
- текстовые свойства text — decoration , text — shadow , text — transform , letter — spacing , word — spacing , line — height , text — decoration — color , text — decoration — line , text — decoration — style , box — shadow , float , vertical — align .
5.10 Псевдоэлементы и псевдоклассы
В CSS2 стиль обычно присоединяется к
элементу на базе его позиции в . Этой простой модели во многих
случаях достаточно, но некоторые обычные
сценарии могут оказаться недоступными из-за
структуры .
Например, в HTML
4.0 (см. )
нет элементов, относящихся к первой строке
параграфа, и, следовательно, простой
селектор CSS не может с ним соотноситься.
CSS вводит псевдоэлементы и псевдоклассы,
чтобы разрешить форматирование на базе
информации, находящейся вне дерева
документа.
-
Псевдоэлементы создают абстракции
дерева документа наряду с абстракциями,
специфицированными языком документа.
Например, языки документа не имеют
механизмов для доступа к первой букве или
первой строке содержимого элемента .
Псевдоэлементы CSS позволяют дизайнерам
таблиц стилей получить доступ к
информации, иначе не доступной.
Псевдоэлементы могут также предоставить
способ назначить стиль содержимому,
которое не существует в документе-источнике
(например, псевдоэлементы
дают доступ к генерируемому содержимому). - Псевдоклассы классифицируют элементы не
по их именам, атрибутам или содержимому, а
по другим характеристикам ; по
характеристикам, которые в принципе не могут быть
получены из дерева документа.
Псевдоклассы могут быть динамическими в
предположении, что элемент может получить
или потерять псевдокласс, пока
пользователь взаимодействует с
документом. Исключением является ,
который может быть вычислен из дерева
документа.
Ни псевдоэлементы, ни псевдоклассы не
появляются в документе-источнике или в
дереве документа.
Псевдоклассы допустимы
в селекторах везде, в то время как
псевдоэлементы могут появляться только
после селектора.
Имена псевдоэлементов и псевдоклассов
нечувствительны к регистру.
Некоторые псевдоклассы взаимоисключающи,
а другие могут применяться одновременно в
одном и том же элементе. В случае конфликта
правил, нормальный определяет выход.
могут все
правила с селекторами :first-line или :first-letter или,
альтернативно, могут поддерживать только
поднаборы свойств этих псевдоэлементов.