diff options
Diffstat (limited to 'files/ru/web/css/_doublecolon_first-letter/index.html')
| -rw-r--r-- | files/ru/web/css/_doublecolon_first-letter/index.html | 133 |
1 files changed, 133 insertions, 0 deletions
diff --git a/files/ru/web/css/_doublecolon_first-letter/index.html b/files/ru/web/css/_doublecolon_first-letter/index.html new file mode 100644 index 0000000000..b023b36e3b --- /dev/null +++ b/files/ru/web/css/_doublecolon_first-letter/index.html @@ -0,0 +1,133 @@ +--- +title: '::first-letter (:first-letter)' +slug: 'Web/CSS/::first-letter' +tags: + - CSS + - Layout + - Reference + - Псевдоэлементы +translation_of: 'Web/CSS/::first-letter' +--- +<div>{{CSSRef}}</div> + +<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> <strong><code>::first-letter</code></strong> применяет стили к первой букве первой строки <a href="/ru/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">блочного элемента</a>, но только если нету другого предшествующего содержимого (такого как изображения или инлайн таблицы).</p> + +<pre class="brush: css no-line-numbers">/* Стили для первой буквы элемента <p> */ +p::first-letter { + font-size: 130%; +}</pre> + +<p>Может быть непросто определить первую букву элемента:</p> + +<ul> + <li>Пунктуация, которая предшествует или следует сразу за первой буквой, включается в селектор. Пунктуация включает любой символ Юникода, определённый в классах <em>open</em> (Ps), <em>close</em> (Pe), <em>initial quote</em> (Pi), <em>final quote</em> (Pf), and <em>other punctuation</em> (Po).</li> + <li>В некоторых языках существуют диграфы, которые должны преобразовываться в верхний регистр вместе, например <code>IJ</code> в Нидерландском. В этих случаях обе буквы диграфа должны соответствовать псевдоэлементу <code>::first-letter</code> (это слабо поддерживается браузерами, смотрите <a href="/En/CSS/::first-letter#Browser_compatibility" title="https://developer.mozilla.org/En/CSS/::first-letter#Browser_compatibility">таблицу совместимости</a> ниже).</li> + <li>Комбинация псевдоэлемента {{ cssxref("::before") }} и свойства {{ cssxref("content") }} может привести к добавлению некоторого текста в начало элемента. В этом случае псевдоэлементу <code>::first-letter</code> будет соответствовать первая буква добавленного содержимого.</li> +</ul> + +<div class="note"> +<p>В CSS3 появилась запись <code>::first-letter</code> (с двумя двоеточиями) для различения <a href="/ru/docs/Web/CSS/Pseudo-classes">псевдоклассов</a> и <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлементов</a>. Браузеры также поддерживают запись <code>:first-letter</code>, введённую в CSS2.</p> +</div> + +<h2 id="Разрешённые_свойства">Разрешённые свойства</h2> + +<p>Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом <code>::first-letter</code>:</p> + +<ul> + <li>Все свойства, связанные с шрифтами: {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} и {{ Cssxref("font-family") }}</li> + <li>Все свойства, связанные с фоном: {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }} и {{cssxref("background-blend-mode")}}</li> + <li>Все свойства для внешних отступов: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}</li> + <li>Все свойства для внутренних отступов: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}</li> + <li>Все свойства, связанные с рамкой: сокращения {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}} и полные записи свойств</li> + <li>Свойства {{ cssxref("color") }}</li> + <li>Свойства {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (только если <code>float</code> равен <code>none</code>)</li> +</ul> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Пример</h2> + +<p>Сделаем первую букву каждого абзаца красной и большой.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt + ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo + dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p> +<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> +<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut + aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit + esse molestie consequat.</p> +<p>-Начало специального знака препинания.</p> +<p>_Начало специального знака препинания.</p> +<p>"Начало специального знака препинания.</p> +<p>'Начало специального знака препинания.</p> +<p>*Начало специального знака препинания.</p> +<p>#Начало специального знака препинания.</p> +<p>「特殊的汉字标点符号开头。</p> +<p>《特殊的汉字标点符号开头。</p> +<p>“特殊的汉字标点符号开头。</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p::first-letter { + color: red; + font-size: 130%; +}</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{ EmbedLiveSample('Example', '80%', 420) }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td> + <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Обобщает разрешённые свойства до типографических, оформления текста, инлайн свойств разметки, {{cssxref("opacity")}} и {{ cssxref("box-shadow") }}.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}</td> + <td>{{ Spec2('CSS3 Text Decoration')}}</td> + <td>Разрешает использовать {{cssxref("text-shadow")}} с <code>::first-letter</code>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Введение синтаксиса с двумя двоеточиями. Определения поведения в граничных случаях, таких как внутри элементов списка или для некоторых специфичных языков (например Нидерландский диграф <code>IJ</code>).</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Нет измененений.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Изначальное определение, используя синтаксис с одним двоеточием.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div> +<p>{{Compat("css.selectors.first-letter")}}</p> +</div> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>{{cssxref("::first-line")}}</li> +</ul> |