Какое свойство управляет символами элемента заглавные или строчные
Строчными называются такие элементы документа, которые являются непосредственной частью строки. К строчным элементам относятся теги <img>, <span>, <a>, <q>, <code> и др., а также элементы, у которых свойство display установлено как inline. В основном они используются для изменения вида текста или его логического выделения.
По аналогии с блочными элементами перечислю их характерные особенности.
- Внутрь строчных элементов допустимо помещать текст или другие строчные элементы. Вставлять блочные элементы внутрь строчных запрещено.
- Эффект схлопывания отступов не действует.
- Свойства, связанные с размерами (width, height) не применимы.
- Ширина равна содержимому плюс значения отступов, полей и границ.
- Несколько строчных элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
- Можно выравнивать по вертикали с помощью свойства vertical-align.
Строчные элементы удобно использовать для изменения вида и стиля текста,
в частности, отдельных символов и слов. Для этой цели обычно применяется универсальный
тег <span>, который самостоятельно никак не модифицирует
содержимое, но легко объединяется со стилями через классы или идентификаторы.
За счёт чего с помощью этого тега можно легко управлять видом и положением отдельных
фрагментов текста или рисунков.
Для вёрстки строчные элементы применяются реже, чем блочные. Это
связано в основном с тем, что внутрь строчных элементов не допускается вкладывать
контейнеры <div>, <p> и подобные широко распространённые теги. Тем не менее, блочные и строчные
элементы удачно дополняют друг друга, поскольку позволяют на всех уровнях менять
вид составляющих веб-страниц. В примере 3.16 показано использование тега <span>
для выделения отдельных слов.
Пример 3.16. Применение тега <span>
XHTML 1.0CSS 2.1IECrOpSaFx
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Строчные элементы</title>
<style type=”text/css”>
.pose {
background: #fc0; /* Цвет фона */
margin-left: 1em; /* Отступ слева */
}
.press {
padding: 1px; /* Поля вокруг текста */
border: 1px dotted maroon; /* Параметры рамки */
color: navy; /* Цвет текста */
}
.num {
font-weight: bold; /* Жирное начертание */
color: maroon; /* Цвет текста */
}
</style>
</head>
<body>
<p><span class=”pose”>Лягте животом на пол</span>.
Соедините стопы вместе, согнув ноги в коленях и развернув их в стороны.
Руки за головой. Тяните голову руками вверх и вперед до полного
сокращения <span class=”press”>мышц живота</span>. Задержитесь на две
секунды. Выполните <span class=”num”>восемь</span> повторений.</p>
</body>
</html>
Результат примера показан ниже (рис. 3.25).
Рис. 3.25. Текст, оформленный с помощью стилей
В данном примере тег <span> и стили используются
для выделения различными способами фрагментов текста. В частности, выделение
происходит за счёт фонового цвета, рамки вокруг текста и сменой его цвета. Обратите внимание, что в результате переноса текста рамка вокруг него также перенеслась на другую строку. Во многих случаях это выглядит не очень красиво, поэтому можно запретить перенос текста через white-space: nowrap.
Для текста, который не обрамлён строчным тегом вроде <span> создаётся анонимный строчный элемент. Для примера выше схема элементов будет следующей (рис. 3.26).
Рис. 3.26. Анонимные строчные элементы
Серым цветом на рисунке помечен текст внутри тега <span>, а пунктиром анонимные строчные элементы. Для таких элементов задать стиль напрямую нельзя, он наследуется от родителя.
Преобразование в строчный элемент
Строчные элементы можно превращать в блочные с помощью свойства display
и его значения block. Также возможно и обратное
действие через значение inline (пример 3.17).
Пример 3.17. Свойство display
XHTML 1.0CSS 2.1IECrOpSaFx
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Строчные элементы</title>
<style type=”text/css”>
.notetitle {
border: 1px solid black; /* Параметры рамки */
border-bottom: none; /* Убираем границу снизу */
padding: 3px; /* Поля вокруг текста */
display: inline; /* Устанавливаем как строчный элемент */
background: #ffeebf; /* Цвет фона */
font-weight: bold; /* Жирное начертание */
font-size: 0.9em; /* Размер шрифта */
margin: 0; /* Убираем отступы */
white-space: nowrap; /* Запрещены переносы текста */
}
.note {
border: 1px solid #634f36; /* Параметры рамки */
background: #f3f0e9; /* Цвет фона */
padding: 7px; /* Поля вокруг текста */
margin: 0 0 1em 0; /* Значение отступов */
}
</style>
</head>
<body>
<p class=”notetitle”>Примечание</p>
<p class=”note”>Исходя из различных критериев, основными из
которых являются показатели целесообразности и эффективности приложенных
усилий, можно однозначно сказать следующее. А именно, что достижение
желаемых результатов требует гибкого подхода, основанного на опыте и
глубоком понимании смысла вышеизложенного.</p>
</body>
</html>
Результат примера приведен на рис. 3.27.
Рис. 3.27. Замена блочного элемента на строчный
В данном примере блочный тег <p> отображается
на веб-странице как строчный элемент. Это требуется для того, чтобы ширина
фона и рамки равнялась ширине самого текста с учетом полей. Как известно,
ширина блочных элементов не зависит от ширины содержимого, поэтому и приходится
представлять тег <p> в виде строчного элемента.
В принципе, аналогичным решением будет использовать вместо <p>
тег <span>.
Учтите, что преобразование элемента в строчный не даёт право нарушать последовательность вложения тегов и вкладывать блочные элементы внутрь строчных.
Источник
Модуль CSS-текст описывает функции CSS, которые управляют переводом исходного текста в форматированный и переносом строк. Различные свойства CSS обеспечивают контроль над преобразованием регистра, обработкой пробелов, правилами переноса и переносом текста и строк, выравниванием, интервалами и отступами.
Основной единицей текста является символ. Тем не менее, поскольку системы письма не всегда так просты, как основной английский алфавит, то, чем на самом деле является символ, зависит от контекста, в котором используется этот термин. Например, в корейской системе письма каждое квадратное представление слога (например, 한 = хань) можно считать символом. Однако квадратный символ действительно состоит из нескольких букв, каждая из которых представляет фонему (например, ㅎ = h, ㅏ = a, ㄴ = n), и каждая из них также может считаться символом.
CSS построен на Unicode.
1. Преобразование текста: свойство text-transform
Свойство text-transform стилизует текст. Оно не влияет на базовое содержимое и не должно влиять на содержимое операции копирования и вставки простого текста.
Свойство наследуется.
| text-transform | |
|---|---|
| Значения: | |
| none | Значение по умолчанию, означает отсутствие эффектов. |
| capitalize | Изменяет написание первой буквы каждого слова в элементе, делая её прописной. |
| uppercase | Выводит все слова в элементе прописными буквами. |
| lowercase | Выводит все слова в элементе строчными буквами. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: inherit;
text-transform: initial;
2. Обработка пробелов и переносы строк: свойство white-space
Свойство white-space обрабатывает пробелы между словами и переносы строк внутри элемента.
Свойство наследуется.
| white-space | |
|---|---|
| Значения: | |
| normal | Значение по умолчанию. Между словами вставляется только по одному пробелу, дополнительные пробелы отбрасываются. Текст переносится только в случае необходимости. |
| nowrap | Запрещает переносы строк, за исключением применения <br>. |
| pre | Пробелы в тексте не игнорируются, браузер отображает дополнительные пробелы и переносы строк. |
| pre-wrap | Сохраняет пробелы в тексте, делая разрывы строк там, где это необходимо. |
| pre-line | Удаляет лишние пробелы, за исключением случаев <br>. |
| break-spaces | Поведение идентично pre-wrap, за исключением того, что: любая последовательность неудаляемых пробелов всегда занимает место, в том числе в конце строки; возможность переноса строки существует после каждого неудаляемого пробела, в том числе между пробелами. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;
white-space: inherit;
white-space: initial;
3. Настройка табуляции: свойство tab-size
Свойство tab-size используется для изменения величины отступа, получаемого с помощью клавиши ТAB. Значения свойства игнорируются, когда установлено одно из трёх значений pre-line, normal или nowrap свойства white-space.
Работает только для элементов <textarea> и <pre>, для остальных блочных элементов значение всегда будет равно единице. Значения свойства, указанные в единицах длины, поддерживается только в Chrome 42+.
Свойство наследуется.
| tab-size | |
|---|---|
| Значения: | |
| целое число | Любое целое положительное число. По умолчанию табуляция делает отступ, равный восьми пробелам. |
| длина | Значение отступа, указываемое в единицах длины, например, рх. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
tab-size: 0;
tab-size: 10px;
tab-size: inherit;
tab-size: initial;
4. Разрыв строки и границы слов
Когда содержимое на строчном уровне разбивается на строки, оно разбивается на линейные блоки. Такое разбиение называется разрыв строки.
Когда строка прерывается из-за явных элементов управления разрывом строки, например, символа новой строки или тега <br>, начала или конца блока — это принудительный разрыв строки.
Если строка обрывается из-за переноса содержимого, когда браузер создает необязательные разрывы строк, чтобы вписать содержимое — это мягкий перенос.
4.1. Правила разрыва для букв: свойство word-break
Свойство word-break определяет возможности мягкого переноса между буквами, т.е. когда допустимо разбивать строки текста. В частности, оно контролирует, существует ли возможность мягкого переноса между смежными типографскими буквенными единицами и/или цифрами. Это не влияет на правила, регулирующие возможности мягкого переноса, созданные пробелами.
Свойство наследуется.
| word-break | |
|---|---|
| Значения: | |
| normal | Слова разрываются в соответствии с их обычными правилами. Значение по умолчанию. |
| break-all | Разрыв допускается в пределах слов. Перенос слов не применяется. |
| keep-all | Запрещает разрывы между парами символов. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: inherit;
word-break: initial;
4.2. Разрыв строки: line-break
Свойство line-break определяет правила переноса строк, применяемых внутри элемента, в частности то, как перенос взаимодействует со знаками препинания и символами.
Свойство наследуется.
| line-break | |
|---|---|
| Значения: | |
| auto | Браузер определяет набор используемых ограничений на разрыв строки, которые могут варьироваться в зависимости от длины линии, например, использовать менее строгий набор правил разрыва строки для коротких строк. Значение по умолчанию. |
| loose | Разбивает текст, используя наименее ограничивающий набор правил переноса строк. Обычно используется для коротких строк, например, в газетах. |
| normal | Разбивает текст, используя наиболее распространенный набор правил переноса строк. |
| strict | Разбивает текст, используя строгий набор правил переноса строк. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: inherit;
line-break: initial;
4.3. Расстановка переносов: свойство hyphens
Свойство hyphens определяет, разрешено ли использование переносов для создания возможностей мягкого переноса внутри строки текста.
Расстановка переносов — это контролируемое разбиение слов, при котором им обычно не разрешается разрываться, чтобы улучшить расположение абзацев. Как правило, разбиение слов происходит по слоговым или морфемным границам и при визуальном указании на разделение (обычно путем вставки дефиса, ‐). В некоторых случаях переносы могут также изменить написание слова. В любом случае, перенос слов является только эффектом рендеринга: он не должен влиять ни на содержимое документа, ни на выбор текста или поиск.
CSS Text Level 3 не определяет точные правила переноса слов, поэтому рекомендуется выбирать подходящие для языка точки переноса.
Свойство наследуется.
| hyphens | |
|---|---|
| Значения: | |
| none | Слова не переносятся, даже если символы внутри слова явно определяют возможности переноса. |
| manual | Слова переносятся только в тех местах, где внутри слова есть символы, которые явно указывают на возможность переноса слов (специальный символ ). Значение по умолчанию. |
| auto | Слова могут быть разбиты на возможности переноса, определяемые автоматически соответствующим языку ресурсом переноса в дополнение к тем, которые явно указаны условным дефисом. Необходимо задать язык своего контента (например, используя HTML-атрибут lang или заголовок HTTP Content-Language), чтобы получить правильный автоматический перенос слов. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
hyphens: none;
hyphens: manual;
hyphens: auto;
hyphens: inherit;
hyphens: initial;
4.4. Переполнение блока-обертки: свойство overflow-wrap/word-wrap
Свойство overflow-wrap (или его устаревшее имя word-wrap) указывает, может ли неразрывная строка прерваться в неразрешенных точках, чтобы предотвратить переполнение линейного блока. Работает в том случае, когда свойство white-space разрешает перенос.
Свойство наследуется.
| overflow-wrap, word-wrap | |
|---|---|
| Значения: | |
| normal | Неразрывные строки могут разрываться только в разрешенных точках разрыва. Значение по умолчанию. |
| break-word | |
| anywhere | Неразрывная последовательность символов может быть разбита в произвольной точке, если в строке нет других приемлемых точек разрыва. Влияет только на визуальное отображение, не затрагивая исходный текст. В точке разрыва строки символ переноса не добавляется. Возможности мягкого переноса, представленные в любом месте, учитываются при расчете собственных размеров минимального содержимого. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;
overflow-wrap: inherit;
overflow-wrap: initial;
5. Выравнивание и выключка строк
Выравнивание и выключка строк контролируют, как встроенный контент распределяется в линейном блоке.
5.1. Краткая запись для выравнивания текста: свойство text-align
Блок текста представляет собой набор линейных блоков. Свойство text-align задает свойства text-align-all и text-align-last и описывает, как блоки на уровне строки в каждом линейном блоке выравниваются относительно начальной и конечной сторон линейного блока. Значения, отличные от justify-all или match-parent, присваиваются text-align-all и сбрасываются в text-align-last на auto.
Свойство наследуется.
| text-align | |
|---|---|
| Значения: | |
| start | Содержимое на уровне строки выравнивается по начальному краю линейного блока. Значение по умолчанию. |
| end | Содержимое на уровне строки выравнивается по конечному краю линейного блока. |
| left | Содержимое на уровне строки выравнивается по левому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста. |
| right | Содержимое на уровне строки выравнивается по правому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста. |
| center | Содержимое на уровне строки центрируется внутри линейного блока. |
| justify | Текст выравнивается по ширине линейного блока, чтобы точно заполнить поле строки, прижимаюсь к левому и правому краям родительского элемента. Если иное не указано в text-align-last, последняя строка перед принудительным разрывом или конец блока выравнивается по началу. Пробелы между словами и буквами распределяются таким образом, чтобы длина всех строк была равна. Разные браузеры могут увеличить как отступы между словами, так и интервалы между буквами. |
| justify-all | Устанавливает text-align-all и text-align-last в justify, также выравнивая последнюю строку. |
| match-parent | Значение ведет себя так же, как inherit за исключением того, что унаследованное значение start или end интерпретируется относительно значения direction (или исходного содержащего блока, если нет родителя) и приводит к вычисленному значению left или right. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: match-parent;
text-align: inherit;
5.2. Выравнивание текста по умолчанию: свойство text-align-all
Свойство text-align-all — сокращенный вариант свойства text-align определяет выравнивание всех строк содержимого в контейнере блока, за исключением последних строк, переопределенных значением text-align-last. Принимает значения start, end, left, right, center, justify и match-parent.
Свойство наследуется.
Синтаксис
text-align-all: start;
text-align-all: end;
text-align-all: left;
text-align-all: right;
text-align-all: center;
text-align-all: justify;
text-align-all: match-parent;
text-align-all: inherit;
5.3. Выравнивание последней строки: свойство text-align-last
Свойство text-align-last описывает, как выравнивается последняя строка блока или строки непосредственно перед принудительным разрывом строки.
Если задано значение auto, содержимое в соответствующей строке выравнивается по text-align-all, если только для text-align-all не настроено justify — в этом случае оно выравнивается по началу блока. Все остальные значения интерпретируются как описано для text-align.
Принимает значения auto, start, end, left, right, center, justify и match-parent.
Свойство наследуется.
Синтаксис
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;
text-align-last: match-parent;
6. Промежутки
CSS позволяет контролировать промежутки между словами и типографскими символами с помощью свойств word-spacing и letter-spacing.
6.1. Промежутки между словами: свойство word-spacing
Свойство word-spacing определяет дополнительный интервал между словами.
Устанавливает интервалы между словами. Можно использовать положительные и отрицательные значения. При отрицательном значении слова могут накладываться друг на друга.
На значение word-spacing оказывает влияние значение свойства text-align в случае выравнивания текста по ширине.
Свойство наследуется.
| word-spacing | |
|---|---|
| Значения: | |
| normal | Дополнительный интервал не применяется. Вычисляет в 0. Значение по умолчанию. |
| длина | Задает дополнительный интервал в дополнение к внутреннему интервалу между словами, определенному шрифтом. Значения могут быть отрицательными, но могут быть ограничения, зависящие от реализации. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
word-spacing: normal;
word-spacing: 1px;
word-spacing: 0.2em;
word-spacing: 1rem;
word-spacing: inherit;
word-spacing: initial;
6.2. Трекинг: свойство letter-spacing
Свойство letter-spacing определяет дополнительный интервал, или трекинг, между смежными типографскими символами. Межбуквенный интервал является дополнением к кернингу и word-spacing. В зависимости от действующих правил выравнивания пользовательские агенты могут дополнительно увеличивать или уменьшать расстояние между типографскими символьными единицами для выравнивания текста.
Свойство наследуется.
| letter-spacing | |
|---|---|
| Значения: | |
| normal | Дополнительный интервал не применяется. Вычисляет в 0. Значение по умолчанию. |
| длина | Определяет дополнительный интервал между типографскими символами. Значения могут быть отрицательными, но могут быть ограничения, зависящие от реализации. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
letter-spacing: normal;
letter-spacing: 0.1em;
letter-spacing: 2px;
letter-spacing: inherit;
letter-spacing: initial;
7. Отступ первой строки: свойство text-indent
Свойство text-indent задает отступ, применяемый к строкам встроенного содержимого в блоке. Отступ обрабатывается как поле, примененное к начальному краю линейного блока.
Если в первой строке блочного элемента присутствует изображение, то оно сдвинется вместе с остальным текстом.
Свойство наследуется.
| text-indent | |
|---|---|
| Значение: | |
| длина/% | Размер отступа в виде абсолютной длины. Процентное значение вычисляется от собственной логической ширины блока-контейнера. Значение по умолчанию 0. |
| each-line | Отступы затрагивают первую строку каждого блока-контейнера и каждую строку после принудительного разрыва строки (но не строки после с мягким переносом). |
| hanging | Обратное преобразование. Все строки, кроме первой, будут с отступом. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
text-indent: 5mm;
text-indent: 20px;
text-indent: 5%;
text-indent: 2em each-line;
text-indent: 2em hanging;
text-indent: inherit;
text-indent: initial;
По материалам CSS Text Module Level 3
Источник