Буквы строчные css: text-transform

Буквы строчные css: text-transform | htmlbook.ru

Содержание

text-transform | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменен.

Синтаксис

text-transform: capitalize | lowercase | uppercase | none | inherit

Значения

capitalize: Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют.
lowercase: Все символы текста становятся строчными (нижний регистр).
uppercase: Все символы текста становятся прописными (верхний регистр).
none: Не меняет регистр символов.
inherit: Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-transform</title>
  <style>
   h2 { 
    text-transform: uppercase; /* Заглавные буквы */
   }
   p { 
    text-transform: capitalize; /* Каждое слово начинается с заглавной буквы */
   }
  </style>
 </head>
 <body> 
  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p> 
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства text-transform

Объектная модель

[window.]document.getElementById(«elementID»).style.textTransform

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Как сделать в CSS заглавные буквы?

Оформляя страницу сайта, нам не редко приходится выделять заголовки или какие-то фрагменты текста заглавными буквами. Конечно, в случае если это нужно сделать один раз, то проще всего не заморачиваться и набрать нужный текст с помощью клавиши Caps Lock. А что если мы делаем какую-то типовую страницу, и все последующие будут на нее похожи, и текст нужно будет выделять в одних и тех же блоках на странице?

В случае если у нас есть блоки, в которых текст обязательно должен быть выделен, мы можем для них задать отображение текста, с помощью свойства CSS, заглавными буквами.

Навигация по статье:

Как сделать в CSS заглавные буквы?

Чтобы сделать в CSS заглавные буквы можно воспользоваться свойства text-transform, используя одно из его значений uppercase. Например:

Делаем блок с заголовком в html:

<div> <h4>Задаём в CSS заглавные буквы</h4> </div>

<div>

<h4>Задаём в CSS заглавные буквы</h4>

</div>

Задаем свойство text-transform: uppercase; для тега h4:

.text-transformation h4{ text-transform: uppercase; }

.text-transformation h4{

text-transform: uppercase;

}

Задаём в CSS заглавные буквы

Текст блока

Кроме uppercase данное CSS свойство может принимать и другие значения:
capitalize -каждое новое слово будет идти с заглавной буквы

lowercase — все буквы становятся строчными (маленькими)
none — значение по умолчанию
inherit — значение наследуется

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

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

Для этого всего лишь нужно вычислить класс, который отвечает за отображения заголовка статьи, и задать ему нужное свойство.

Интересное свойство font-variant

Для выделения текста в CSS заглавными буквами существует еще одно свойство

font-variant, которое дает достаточно необычный и интересный эффект.

font-variant может принимать три значения:

small-caps – отображает все символы слова, которые следуют после заглавной буквы, капительными символами. Строчные символы преобразуются в заглавные, но уменьшенного размера.

normal – вид шрифта по умолчанию

inherit – наследует стиль отображения шрифта у родительского элемента.

Вот пример использования данного свойства:

<div> <h3>Капительные символы в заголовке</h3> <h3>Стандартный заголовок h3</h3> </div>

<div>

<h3>Капительные символы в заголовке</h3>

<h3>Стандартный заголовок h3</h3>

</div>

CSS:

.kapitel{ font-variant:small-caps!important; }

.kapitel{

font-variant:small-caps!important;

}

Капительные символы в заголовке

Стандартный заголовок h3

Надеюсь, что теперь у вас не возникнет проблем с созданием заглавных букв! Если вам понравилась статья, обязательно поделитесь ею в социальных сетях, и подпишитесь на мою рассылку.

А на сегодня у меня все. До встречи в следующих статьях!

С уважением Юлия Гусарь

CSS-текст

Модуль 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

text-transform | CSS | WebReference

Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменён.

Краткая информация

Значение по умолчанию	none
Наследуется	Да
Применяется	Ко всем элементам
Анимируется	Нет

Синтаксис

text-transform: capitalize | lowercase | uppercase | none

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

capitalize: Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют.
lowercase: Все символы текста становятся строчными (нижний регистр).
uppercase: Все символы текста становятся прописными (верхний регистр).
none: Не меняет регистр символов.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>text-transform</title> <style> h2 { text-transform: uppercase; /* Заглавные буквы */ } p { text-transform: capitalize; /* Каждое слово начинается с заглавной буквы */ } </style> </head> <body> <h2>Культурный памятник Средневековья</h2> <p>Амазонская низменность неумеренно берёт небольшой провоз кошек и собак, а Хайош-Байа славится красными винами. </p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства text-transform
Объектная модель
Объект.style.textTransform
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
— свойство полностью поддерживается браузером со всеми допустимыми значениями;
— свойство браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02.03.2020
Редакторы: Влад Мержевич
Свойство text-transform | CSS справочник
CSS свойства
Определение и применение
CSS свойство text-transform управляет регистром текста.
Поддержка браузерами
CSS синтаксис:
text-transform:"none | capitalize | uppercase | lowercase | initial | inherit";
JavaScript синтаксис:
object.style.textTransform = "capitalize"
Значения свойства
Значение Описание
none Текст отображается как есть (регистр букв не изменяется). Это значение по умолчанию.
capitalize Преобразует первые символы каждого слова в верхний регистр.
uppercase Преобразует все символы в верхний регистр.
lowercase Преобразует все символы в нижний регистр.
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.
Версия CSS
CSS1
Наследуется
Да.
Анимируемое
Нет.
Пример использования
<!DOCTYPE html> <html> <head> <title>Свойство text-transform.</title> <style> .test { text-transform : capitalize; /* преобразуем первые символы каждого слова в верхний регистр */ width : 500px; /* задаём ширину текстового блока. */ } .test2 { text-transform : uppercase; /* преобразуем все символы в верхний регистр */ width : 500px; /* задаём ширину текстового блока. */ } .test3 { text-transform : lowercase; /* преобразуем все символы в нижний регистр */ width : 500px; /* задаём ширину текстового блока. */ } </style> </head> <body> <p class = "test">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p> <p class = "test2">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p> <p class = "test3">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p> </body> </html>
Пример изменения регистра текста, используя CSS.CSS свойства
text-transform — текст заглавными буквами
Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 7.0+ 1.0+
Описание
CSS свойство text-transform контролирует использование строчных и прописных букв в тексте. Оно позволяет весь текст сделать написанным заглавными буквами или строчными. С помощью свойства text-transform можно сделать так, чтобы каждое слово в тексте начиналось с заглавной буквы.
Значение по умолчанию: none
Применяется: ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется: нет
Наследуется: да
Версия: CSS1
Синтаксис JavaScript: object.style.textTransform=»uppercase»
Синтаксис
text-transform: none|capitalize|uppercase|lowercase|inherit;
Значения свойства
Значение Описание
none Текст отображается без изменений.
capitalize Переделывает первую букву каждого слова в прописную.
uppercase Переделывает все символы в прописные.
lowercase Переделывает все символы в строчные.
inherit Указывает, что значение наследуется от родительского элемента.
Пример
Text-Transform
Пример демонстрирует разницу между значениями свойства.
div {
text-transform: none;
}
Регистр текста в CSS
Вот уже несколько уроков мы вовсю изощряемся с форматированием текста посредством CSS, а в этот раз мы учимся менять регистр текста. В этом плане каскадные таблицы стилей открывают перед нами очень широкие возможности, а если быть точнее, мы можем:
Отобразить весь текст заглавными буквами;
Выделить весь текст строчными буквами;
Сделать так, чтобы первая буква каждого слова началась с верхнего регистра.
«Это все, конечно, хорошо, но когда это может понадобиться?» — спросите вы. Представим себе такую ситуацию, когда вам нужно отобразить все пункты меню заглавными буквами. Для этого не обязательно набирать их, включая клавишу CapsLock, или держа нажатым кнопку Shift. Будет достаточно задать всем пунктам списка отображение в верхнем регистре, создав соответствующее правило в CSS файле. И это лишь одна из многих возможных ситуаций.
Видеоверсия:

Свойство text-transform
Управлять регистром текста мы будем при помощи свойства text-transform. У нее есть 4 основных значения — uppercase (заглавные буквы), lowercase (строчные буквы), capitalize (верхний регистр у каждой первой буквы слова, остальные значения не меняются), none (не применяется форматирование). На первый взгляд вам все это может показаться очень сложным.
Главное — не паниковать…
Но на практике все довольно просто, в чем вы сейчас и убедитесь. Главное — это подобрать правильный селектор, ведь значения свойства text-transform наследуются.
Выделяем заглавными буквами
Первым делом я предлагаю задать всему тексту заглавные буквы, для чего мы создаем следующее CSS правило:
body { text-transform: uppercase; }
В принципе, ничего сложного, мы лишь использовали значение uppercase. Как говорится, все интуитивно понятно. Вот как это выглядит в жизни:
Все с большой буквы…
Нижний регистр — применить для всех
Следующим шагом давайте повсеместно применим строчные буквы, для чего пишем следующее:
body { text-transform: lowercase; }
Как вы уже наверное догадались, два значения, с которыми мы только что познакомились являются в какой-то мере антонимами. А на иллюстрации ниже вы можете видеть результат только что созданного свойства.
Веб-страница при включенном lowercase
Выделяем первую букву каждого слова верхним регистром
Для этого нам достаточно воспользоваться соответствующим значением:
body { text-transform: capitalize; }
Не знаю насколько часто вы будете использовать такое CSS правило, однако знать о подобной возможности вам не помешает, особенно при решении нетривиальных задач. Результат виден на изображении ниже.
Текст после применения capitalize
И наконец, давайте вкратце остановимся на последнем значении — none. Как я уже говорил, он может применяться для отмены наследования от родителя. Например, представим что у нас действуют все предыдущие правила, а для абзацев нам стоит их отменить, для этого мы пишем следующее:
p { text-transform: none; }
Смею предположить что вам все понятно, если нет — задавайте свои вопросы в комментариях. А на этом у меня все. Надеюсь, данный урок по CSS был для вас полезен. Если это так:
Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
[popup_trigger tag=»span»]Подписывайтесь[/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.
На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!
преобразование текста | htmlbook.ru
Internet Explorer Хром Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+
Краткая информация
Версии CSS
КСС 1 CSS 2 CSS 2.1 CSS 3
Описание
Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текст будет изменен.
Синтаксис
преобразование текста: заглавные | строчные | прописные | нет | унаследовать
Значения
увеличить
Первый символ каждого слова в предложении будет заглавным.Остальные символы свой вид не меняют.
строчная
Все символы текста становятся строчными (нижний регистр).
прописные
Все символы текста становятся прописными (верхний регистр).
нет
Не меняет регистр символов.
наследовать
Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
преобразование текста <стиль> h2 { текст-преобразование: прописные; / * Заглавные буквы * / } п { текст-преобразование: заглавные буквы; / * Каждое слово начинается с заглавной буквы * / } Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, conctetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.Ut wisis enim ad minim veniam, quis nostrud упражнение ullamcorper Suscipit лобортис нисл ут аликвип экс еа коммодо конскват.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойств text-transform
Объектная модель
[окно.] Document.getElementById («elementID»). Style.textTransform
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение наследования.
.
CSS-текст

Модуль CSS-текст функции CSS, которые управляют переводом исходного текста в форматированный и переносом строк. Различные свойства CSS обеспечивают контроль над преобразованием регистра, обработкой пробелов, правил переноса и переносом текста, выравниванием, интервалами и отступами.
Основной единицей текста является символ. Тем не менее, поскольку системы письма не всегда так просты, как основной английский алфавит, то есть, чем на самом деле, символ зависит от контекста, в котором используется этот термин.Например, в корейской системе письмо представительное слога (например, 한 = хань) можно считать символом. Однако квадратный символ действительно состоит из нескольких букв, каждая из которых представляет фонему (например, ㅎ = h, ㅏ = a, ㄴ = n), и каждая из них также может считаться символом.
CSS построен на Unicode.
1. Преобразование текста: свойство text-transform
Свойство text-transform стилизует текст. Оно не влияет на базовое содержимое и не должно влиять на содержимое операции копирования и вставки простого текста.
Свойство наследуется.
преобразование текста
Значения:
нет Значение по умолчанию, означает отсутствие эффектов.
капитализировать Изменяет написание первой буквы каждого слова в стиле ее прописной.
прописные Вывод все слова в элементенте прописными буквами.
строчная Вывод все слова в элементе строчными буквами.
начальный Устанавливает значение свойства в значение по умолчанию.
наследовать Наследует значение свойства от родительского элемента.
Синтаксис
преобразование текста: нет; текст-преобразование: заглавные буквы; текст-преобразование: прописные; преобразование текста: нижний регистр; текст-преобразование: наследование; текст-преобразование: начальный;
2.Обработка пробелов и переносы строк: свойство white-space
Свойство white-space обрабатывает пробелы между словами и переносы строк внутри элемента.
Свойство наследуется.
белое пространство
Значения:
нормальный Значение по умолчанию. Между словами вставляется только по одному пробелу, дополнительные пробелы отбрасываются. Текст переносится только в случае необходимости.
nowrap Запрещает переносы строк, за исключением применения – .
до Пробелы в тексте не игнорируются, браузер отображает дополнительные пробелы и переносы строк.
предварительная упаковка Сохраняет пробелы в тексте, делая разрывы строк там, где это необходимо.
предварительная линия Удаляет лишние пробелы, за исключением случаев .
перерывов Поведение идентично pre-wrap , за исключением того, что: любая последовательность неудаляемых пробелов всегда занимает место, в том числе в конце строки; возможность переноса строки после каждого неудачного пробела, в том числе между пробелами.
начальный Устанавливает значение свойства в значение по умолчанию.
наследовать Наследует значение свойства от родительского элемента.
Синтаксис
пробел: нормальный; белое пространство: nowrap; белое пространство: предварительно; белое пространство: предварительная упаковка; белое пространство: предварительная строка; пробел: пробелы; белое пространство: наследовать; пробел: начальный;
3. Настройка табуляции: свойство tab-size
Свойство tab-size используется для изменения величины отступа, получаемого с помощью клавиши ТAB. Значения свойства игнорируются, когда установлено одно из трёх значений pre-line , normal или nowrap свойства white-space .
Работает только для элементов </kbd> и <kbd><pre> </kbd>, для остальных блочных элементов значение всегда будет равно единице. Значения свойства, шаблоны в моделях длины, поддерживается только в Chrome 42+. </p> <p> Свойство наследуется. </p> <table> <tr> <th colspan="2"> размер табулятора </th> </tr> <tr> <td> Значения: </td> <td/> </tr> <tr> <td> целое число </td> <td> Любое целое положительное число. По умолчанию табуляция делает отступ, равный восьми пробелам.</td> </tr> <tr> <td> длина </td> <td> Значение отступа, указываемое в единицах длины, например, <kbd> рх </kbd>. </td> </tr> <tr> <td> <kbd> начальный </kbd> </td> <td> Устанавливает значение свойства в значение по умолчанию. </td> </tr> <tr> <td> <kbd> наследовать </kbd> </td> <td> Наследует значение свойства от родительского элемента. </td> </tr> </table> <p> <b> Синтаксис </b> </p> <pre> <code> размер табуляции: 0; размер табуляции: 10 пикселей; размер табуляции: наследование; размер табуляции: начальный; </code> </pre><h4><span class="ez-toc-section" id="4-2"> 4.Разрыв строки и границы слов </span></h4> <p> Когда содержимое на строчном уровне разбивается на строки, оно разбивается на линейные блоки. Такое разбиение связки строки. </p> <p> Когда строка прерывается из-за явных элементов управления разрывом строки, например, символа новой строки или тега <kbd> <br> </kbd>, начала или конца блока - это принудительный разрыв строки. </p> <p> Если строка обрывается из-за переноса содержимого, когда создается необязательные разрывы строк, чтобы вписать содержимое - это мягкий перенос.</p> <h5><span class="ez-toc-section" id="41_word-break-2"> 4.1. Правила разрыва для букв: свойство word-break </span></h5> <p> Свойство <kbd> разрыв слова </kbd> указать возможности мягкого переноса между буквами, т.е. когда допустимо разбивать строки текста. В частности, оно контролирует, существует возможность мягкого переноса между другими типографскими буквенными единицами и / или цифрами. Это не влияет на правила, регулирующие возможности мягкого переноса, созданные пробелами. </p> <p> Свойство наследуется. </p> <table> <tr> <th colspan="2"> разрыв слова </th> </tr> <tr> <td> Значения: </td> <td/> </tr> <tr> <td> <kbd> нормальный </kbd> </td> <td> Слова разрываются в соответствии с их обычными правилами.Значение по умолчанию. </td> </tr> <tr> <td> <kbd> обкатка </kbd> </td> <td> Разрыв разрешений в пределах слов. Перенос слов не применяют. </td> </tr> <tr> <td> <kbd> хранить все </kbd> </td> <td> Запрещает разрывы между парами символов. </td> </tr> <tr> <td> <kbd> начальный </kbd> </td> <td> Устанавливает значение свойства в значение по умолчанию. </td> </tr> <tr> <td> <kbd> наследовать </kbd> </td> <td> Наследует значение свойства от родительского элемента. </td> </tr> </table> <p> <b> Синтаксис </b> </p><pre> <code> разрыв слова: нормальный; слово-разрыв: сломать все; слово-разрыв: сохранить все; разрыв слова: наследовать; слово-разрыв: начальный; </code> </pre><h5><span class="ez-toc-section" id="42"> 4.2. Разрыв строки: разрыв строки </span></h5> <p> Свойство <kbd> перенос строки </kbd> определяет правила переноса строк, применяемых внутри элемента, в частности, как переносит со знаками препинания и символами. </p> <p> Свойство наследуется. </p> <table> <tr> <th colspan="2"> разрыв строки </th> </tr> <tr> <td> Значения: </td> <td/> </tr> <tr> <td> <kbd> авто </kbd> </td> <td> Браузер определяет используемый набор правил разрыва строки, которые могут ограничиваться в зависимости от линии, например, использовать менее строгий набор правил разрыва строки для коротких строк.Значение по умолчанию. </td> </tr> <tr> <td> <kbd> свободный </kbd> </td> <td> Разбивает текст, используя название ограничивающий набор правил переноса строк. Обычно используется для коротких строк, например, в газетах. </td> </tr> <tr> <td> <kbd> нормальный </kbd> </td> <td> Разбивает текст, используя наиболее распространенный набор правил переноса строк. </td> </tr> <tr> <td> <kbd> строгий </kbd> </td> <td> Разбивает текст, используя строгий набор правил переноса строк. </td> </tr> <tr> <td> <kbd> начальный </kbd> </td> <td> Устанавливает значение свойства в значение по умолчанию.</td> </tr> <tr> <td> <kbd> наследовать </kbd> </td> <td> Наследует значение свойства от родительского элемента. </td> </tr> </table> <p> <b> Синтаксис </b> </p><pre> <code> перенос строки: авто; разрыв строки: свободный; разрыв строки: нормальный; разрыв строки: строгий; разрыв строки: наследовать; разрыв строки: начальный; </code> </pre><h5><span class="ez-toc-section" id="43"> 4.3. Расстановка переносов: свойство дефисов </span></h5> <p> Свойство <kbd> дефисов </kbd> определяет, разрешено ли использование переносов для создания возможностей мягкого переноса внутри строки текста.</p> <p> Расстановка переносов - это контролируемое разбиение слов, при котором им обычно не разрешается разрываться, чтобы улучшить расположение абзацев. Как правило, разбиение слов происходит по слоговым или морфемным границам и при визуальном указании на разделение (обычно путем вставки дефиса, <kbd> - </kbd>). В некоторых случаях переносы. В любом случае, перенос слов является только эффектом рендеринга: он не должен влиять ни на содержимое документа, ни на выбор текста или поиск.</p> <p> CSS Text Level 3 не определяет точные правила переноса слов, поэтому рекомендуется выбирать подходящие для языка точки переноса. </p> <p> Свойство наследуется. </p> <table> <tr> <th colspan="2"> дефис </th> </tr> <tr> <td> Значения: </td> <td/> </tr> <tr> <td> <kbd> нет </kbd> </td> <td> Слова не переносятся, даже если символы внутри слова явно определяют возможности переноса. </td> </tr> <tr> <td> <kbd> руководство </kbd> </td> <td> Слова переносятся только в тех местах, где внутри слова есть символы, которые явно указывают на возможность переноса слов (специальный символ <kbd> </kbd>).Значение по умолчанию. </td> </tr> <tr> <td> <kbd> авто </kbd> </td> <td> могут быть разбиты на возможности переноса, установленные автоматически языку ресурсы переноса в дополнение к тем, которые явно указаны условным дефисом. Необходимо задать язык своего контента (например, используя HTML-атрибут <kbd>, язык </kbd> или заголовок HTTP Content-Language), чтобы получить правильный перенос слов. </td> </tr> <tr> <td> <kbd> начальный </kbd> </td> <td> Устанавливает значение свойства в значение по умолчанию.</td> </tr> <tr> <td> <kbd> наследовать </kbd> </td> <td> Наследует значение свойства от родительского элемента. </td> </tr> </table> <p> <b> Синтаксис </b> </p><pre> <code> дефисы: нет; дефисы: руководство; дефисы: авто; дефисы: наследуются; дефисы: начальные; </code> </pre><h5><span class="ez-toc-section" id="44_-_overflow-wrap_word-wrap"> 4.4. Переполнение блока-обертки: свойство overflow-wrap / word-wrap </span></h5> <p> Свойство <kbd> overflow-wrap </kbd> (или его устаревшее имя <kbd> word-wrap </kbd>) указывает, может ли неразрывная строка прерваться в неразрешенных точках, чтобы предотвратить переполнение линейного блока.Работает в том случае, когда свойство <kbd> white-space </kbd> разрешает перенос. </p> <p> Свойство наследуется. </p> <table> <tr> <th colspan="2"> переполнение, перенос слов </th> </tr> <tr> <td> Значения: </td> <td/> </tr> <tr> <td> <kbd> нормальный </kbd> </td> <td> Неразрывные строки могут разрываться только в разрешенных точках разрыва. Значение по умолчанию. </td> </tr> <tr> <td> <kbd> разрывное слово </kbd> </td> <td/> </tr> <tr> <td> <kbd> где угодно </kbd> </td> <td> Неразрывная последовательность символов может быть разбита в произвольной точке, если в строке нет других приемлемых точек разрыва.Влияет только на визуальное отображение, не рассматриивая исходный текст. В точке разрыва строки символ переноса не добавляется. Возможности мягкого переноса, представленные в любом месте, учитываются при расчете собственных размеров минимального содержимого. </td> </tr> <tr> <td> <kbd> начальный </kbd> </td> <td> Устанавливает значение свойства в значение по умолчанию. </td> </tr> <tr> <td> <kbd> наследовать </kbd> </td> <td> Наследует значение свойства от родительского элемента. </td> </tr> </table> <p> <b> Синтаксис </b> </p><pre> <code> перелив-обертка: нормальный; переполнение-обертка: слово-прерывание; переполнение-обертка: где угодно; переполнение-обертка: наследование; overflow-wrap: начальный; </code> </pre><h4><span class="ez-toc-section" id="5-2"> 5.Выравнивание и выключка строк </span></h4> <p> Выравнивание и выключение строк контролирует, как встроенный контент, определяющий в линейном блоке. </p> <h5><span class="ez-toc-section" id="51_text-align-2"> 5.1. Краткая запись для выравнивания текста: свойство text-align </span></h5> <p> Блок текста представляет собой набор линейных блоков. Свойство <kbd> text-align </kbd> задает свойства <kbd> text-align-all </kbd> и <kbd> text-align-last </kbd> и приведенные, как блоки на уровне строки в каждом линейном блоке выравниваются относительно начальной и конечной стороннего блока.Значения, отличные от <kbd> justify-all </kbd> или <kbd> match-parent </kbd>, присваиваются <kbd> text-align-all </kbd> и сбрасываются в <kbd> text-align-last </kbd> на <kbd> auto </kbd>. </p> <p> Свойство наследуется. </p> <table> <tr> <th colspan="2"> выравнивание текста </th> </tr> <tr> <td> Значения: </td> <td/> </tr> <tr> <td> <kbd> начало </kbd> </td> <td> Содержимое на уровне строки выравнивается по начальному краю линейного блока. Значение по умолчанию. </td> </tr> <tr> <td> <kbd> конец </kbd> </td> <td> Содержимое на уровне строки выравнивается по конечному краю линейного блока.</td> </tr> <tr> <td> <kbd> слева </kbd> </td> <td> Содержимое на уровне строки выравнивается по левому краю строки линейного блока. В вертикальной системе письменности это будет физический верх или низ, в зависимости от ориентации текста. </td> </tr> <tr> <td> <kbd> правый </kbd> </td> <td> Содержимое на уровне строки выравнивается по правому краю линейного блока. В вертикальной системе письменности это будет физический верх или низ, в зависимости от ориентации текста.</td> </tr> <tr> <td> <kbd> центр </kbd> </td> <td> Содержимое на уровне строки центрируется внутри линейного блока. </td> </tr> <tr> <td> <kbd> оправдать </kbd> </td> <td> Текст выравнивается по ширине линейного блока, чтобы точно заполнить поле строки, прижимаюсь к левому и правому краям родительского элемента. Если не указано в <kbd> text-align-last </kbd>, последняя строка перед принудительным разрывом или конец блока выравнивается по началу. Пробелы между словами и буквами распределяются таким образом, чтобы длина всех строк была равна.Разные браузеры могут увеличить как отступы между словами, так и интервалы между буквами. </td> </tr> <tr> <td> <kbd> оправдать-все </kbd> </td> <td> Устанавливает <kbd> text-align-all </kbd> и <kbd> text-align-last </kbd> в <kbd> justify </kbd>, также выравнивая последовательность. </td> </tr> <tr> <td> <kbd> Соответствующий родитель </kbd> </td> <td> Значение ведет себя так же, как <kbd> наследовать </kbd> за исключением того, что унаследованное значение <kbd> начало </kbd> или <kbd> конец </kbd> интерпретируется относительно значения <kbd>, направление </kbd> (или исходный блок, если нет родителя) и приводит к вычисленному значению <kbd> слева </kbd> или <kbd> правый </kbd>.</td> </tr> <tr> <td> <kbd> наследовать </kbd> </td> <td> Наследует значение свойства от родительского элемента. </td> </tr> </table> <p> <b> Синтаксис </b> </p><pre> <code> выравнивание текста: начало; выравнивание текста: конец; выравнивание текста: слева; выравнивание текста: вправо; выравнивание текста: центр; выравнивание текста: выравнивание; выравнивание текста: выравнивание-все; выравнивание текста: соответствие родительского; выравнивание текста: наследование; </code> </pre><h5><span class="ez-toc-section" id="52_text-align-all-2"> 5.2. Выравнивание текста по умолчанию: свойство text-align-all </span></h5> <p> Свойство <kbd> text-align-all </kbd> - сокращенный вариант свойств <kbd> text-align </kbd> определяет выравнивание всех строк содержимого в контейнере блока, за исключением последних строк, переопределенных значений <kbd> text-align-last </kbd>.Принимает значения <kbd> start </kbd>, <kbd> end </kbd>, <kbd> left </kbd>, <kbd> right </kbd>, <kbd> center </kbd>, <kbd> justify </kbd> и <kbd> match-parent </kbd>. </p> <p> Свойство наследуется. </p> <p> <b> Синтаксис </b> </p><pre> <code> выравнивание текста все: начало; выравнивание текста все: конец; выравнивание текста все: слева; выравнивание текста все: право; выравнивание текста все: центр; выравнивание текста все: выравнивание; текст-выравнивание-все: совпадение-родитель; выравнивание текста все: наследование; </code> </pre><h5><span class="ez-toc-section" id="53_text-align-last-2"> 5.3. Выравнивание последней строки: свойство text-align-last </span></h5> <p> Свойство <kbd> text-align-last </kbd> приведенное, как выравнивается последняя строка блока или принудительным механизмом строки. </p> <p> Если задано значение <kbd> auto </kbd>, содержимое в текущей строке выравнивается по <kbd> text-align-all </kbd>, если только для <kbd> text-align-all </kbd> не настроено <kbd> justify </kbd> - в этом случае оно выравнивается по началу блока. Все остальные интерпретируются как описано для <kbd> выравнивание текста </kbd>.</p> <p> Принимает значения <kbd> auto </kbd>, <kbd> start </kbd>, <kbd> end </kbd>, <kbd> left </kbd>, <kbd> right </kbd>, <kbd> center </kbd>, <kbd> justify </kbd> и <kbd> match-parent </kbd>. </p> <p> Свойство наследуется. </p> <p> <b> Синтаксис </b> </p><pre> <code> выравнивание текста последний: авто; выравнивание текста последний: начало; выравнивание текста последний: конец; выравнивание текста последний: слева; выравнивание текста последний: право; выравнивание текста последний: центр; выравнивание текста последний: выравнивание; выравнивание текста последний: соответствие родительского; </code> </pre><h4><span class="ez-toc-section" id="6-2"> 6.Промежутки </span></h4> <p> CSS позволяет контролировать расстояние между словами и типографскими символами с помощью свойств <kbd> интервал между словами </kbd> и <kbd> интервал между буквами </kbd>. </p> <h5><span class="ez-toc-section" id="61_word-spacing-2"> 6.1. Промежутки между словами: свойство word-spacing </span></h5> <p> Свойство <kbd> word-spacing </kbd> интервал между словами. <br/> Устанавливает интервалы между словами. Можно использовать положительные и отрицательные значения. При отрицательном значении слова могут накладываться друг на друга.</p> <p> На значение <kbd> word-spacing </kbd> влияет значение свойства <kbd> text-align </kbd> в случае выравнивания текста по ширине. </p> <p> Свойство наследуется. </p> <table> <tr> <th colspan="2"> межсловный интервал </th> </tr> <tr> <td> Значения: </td> <td/> </tr> <tr> <td> <kbd> нормальный </kbd> </td> <td> Дополнительный интервал не применяемого. Вычисляет в <kbd> 0 </kbd>. Значение по умолчанию. </td> </tr> <tr> <td> длина </td> <td> Задает дополнительный интервал в дополнение к внутреннему интервалу между словами, определенному шрифтом.Значения могут быть отрицательными, но могут быть ограничения, зависящие от реализации. </td> </tr> <tr> <td> <kbd> начальный </kbd> </td> <td> Устанавливает значение свойства в значение по умолчанию. </td> </tr> <tr> <td> <kbd> наследовать </kbd> </td> <td> Наследует значение свойства от родительского элемента. </td> </tr> </table> <p> <b> Синтаксис </b> </p><pre> <code> межсловный интервал: нормальный; межсловный интервал: 1px; межсловный интервал: 0,2em; межсловный интервал: 1бэр; межсловный интервал: наследовать; межсловный интервал: начальный; </code> </pre><h5><span class="ez-toc-section" id="62_letter-spacing-2"> 6.2. Трекинг: свойство letter-spacing </span></h5> <p> Свойство <kbd> межбуквенный интервал </kbd>: дополнительный интервал, или трекинг, между соответствующими типографскими символами. Межбуквенный интервал является дополнением кернингу и <kbd> межсловный интервал </kbd>. В зависимости от выполнения правил выравнивания пользовательские агенты могут увеличивать или уменьшать расстояние между типографскими символьными единицами для выравнивания текста. </p> <p> Свойство наследуется. </p> <table> <tr> <th colspan="2"> межбуквенный интервал </th> </tr> <tr> <td> Значения: </td> <td/> </tr> <tr> <td> <kbd> нормальный </kbd> </td> <td> Дополнительный интервал не применяемого.Вычисляет в <kbd> 0 </kbd>. Значение по умолчанию. </td> </tr> <tr> <td> длина </td> <td> Определяет дополнительный интервал между типографскими символами. Значения могут быть отрицательными, но могут быть ограничения, зависящие от реализации. </td> </tr> <tr> <td> <kbd> начальный </kbd> </td> <td> Устанавливает значение свойства в значение по умолчанию. </td> </tr> <tr> <td> <kbd> наследовать </kbd> </td> <td> Наследует значение свойства от родительского элемента. </td> </tr> </table> <p> <b> Синтаксис </b> </p><pre> <code> межбуквенный интервал: нормальный; межбуквенный интервал: 0.1em; межбуквенный интервал: 2 пикселя; межбуквенный интервал: наследовать; межбуквенный интервал: начальный; </code> </pre><h4><span class="ez-toc-section" id="7_text-indent-2"> 7. Отступ первой строки: свойство text-indent </span></h4> <p> Свойство <kbd> text-indent </kbd> задает отступ, применяемый к строкам встроенного содержимого в блоке. Отступается как поле, примененное к начальному краю линейного блока. <br/> Если в первой строке блочного элемента присутствует изображение, то оно сдвинется вместе с остальным текстом. </p> <p> Свойство наследуется.</p> <table> <tr> <th colspan="2"> текст-отступ </th> </tr> <tr> <td> Значение: </td> <td/> </tr> <tr> <td> длина / <kbd>% </kbd> </td> <td> Размер отступа в виде абсолютной длины. Процентное значение вычисляется от собственной логической ширины блока-контейнера. Значение по умолчанию <kbd> 0 </kbd>. </td> </tr> <tr> <td> <kbd> на каждую строку </kbd> </td> <td> Отступы первой линии после принудительного разрыва строки.</td> </tr> <tr> <td> <kbd> подвес </kbd> </td> <td> Обратное преобразование. Все строки, кроме первой, будут с отступом. </td> </tr> <tr> <td> <kbd> начальный </kbd> </td> <td> Устанавливает значение свойства в значение по умолчанию. </td> </tr> <tr> <td> <kbd> наследовать </kbd> </td> <td> Наследует значение свойства от родительского элемента. </td> </tr> </table> <p> <b> Синтаксис </b> </p><pre> <code> отступ текста: 5 мм; текстовый отступ: 20 пикселей; отступ текста: 5%; текстовый отступ: 2em на каждую строку; отступ текста: 2em висит; текст-отступ: наследовать; текст-отступ: начальный; </code> </pre><p> <em> По материалам </em> CSS Text Module Level 3 </p> . <h2><span class="ez-toc-section" id="_CSS_WebReference"> преобразование текста | CSS | WebReference </span></h2> <p> Управляет преобразованием элемента текста в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменён. </p> <h3><span class="ez-toc-section" id="i-39"> Краткая информация </span></h3> <table> <tr> <th> Значение по умолчанию </th> <td> нет </td> </tr> <tr> <th> Наследуется </th> <td> Да </td> </tr> <tr> <th> Применяется </th> <td> Ко всем элементам </td> </tr> <tr> <tr> <th> Анимируется </th> <td> Нет </td> </tr> </table> </p> </th> <td> Нет </td> </tr> </table> </p>5 -трансформация: капитализировать | строчные | прописные | нет </code> </pre> <h3><span class="ez-toc-section" id="i-40"> Обозначения </span></h3> <table> <tbody> <tr> <th/> <th> Описание </th> <th> Пример </th> </tr> <tr> <td> <тип> </td> <td> Указывает тип значения.</td> <td> <размер> </td> </tr> <tr> <td> A && B </td> <td> Значения должны выводиться в указанном порядке. </td> <td> <размер> && <цвет> </td> </tr> <tr> <td> A | B </td> <td> Указывает, что надо выбрать только одно значение из предложенных (A или B). </td> <td> нормальный | small-caps </td> </tr> <tr> <td> A || B </td> <td> Каждое Сообщение заведомо самостоятельно или с другими в произвольном порядке. </td> <td> ширина || count </td> </tr> <tr> <td> [] </td> <td> Группирует значения.</td> <td> [урожай || крест] </td> </tr> <tr> <td> * </td> <td> Повторять ноль или больше раз. </td> <td> [, <время>] * </td> </tr> <tr> <td> + </td> <td> Повторять один или больше раз. </td> <td> <число> + </td> </tr> <tr> <td>? </td> <td> Указанный тип, слово или группа не является обязательным. </td> <td> вставка? </td> </tr> <tr> <td> {A, B} </td> <td> Повторять не менее A, но не более B раз. </td> <td> <радиус> {1,4} </td> </tr> <tr> <td> # </td> <td> Повторять один или больше раз через запятую.</td> <td> <время> # </td> </tr> </tbody> </table> <h3><span class="ez-toc-section" id="i-41"> Значения </span></h3> <dl> <dt> заглавные буквы </dt> <dd> Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют. </dd> <dt> нижний регистр </dt> <dd> Все символы текста становятся строчными (нижний регистр). </dd> <dt> прописные </dt> <dd> Все символы текста становятся прописными (верхний регистр). </dd> <dt> нет </dt> <dd> Не меняет регистр символов. </dd> </dl> <h3><span class="ez-toc-section" id="i-42"> Песочница </span></h3> <p> Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, обед ещё и не думал начинаться.И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки. </p> <h3><span class="ez-toc-section" id="i-43"> Пример </span></h3> <! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> преобразование текста </title> <стиль> h2 { текст-преобразование: прописные; / * Заглавные буквы * / } п { текст-преобразование: заглавные буквы; / * Каждое слово начинается с заглавной буквы * / } </style> </head> <body> <h2><span class="ez-toc-section" id="i-44"> Культурный памятник Средневековья </span></h2> <p> Амазонская низменность неумеренно берёт небольшой провоз кошек и собак, а Хайош-Байа славится красными винами.</p> </body> </html> <p> Результат данного примера на рис. 1. </p> <p> </p> <p> Рис. 1. Применение свойства text-transform </p> <h3><span class="ez-toc-section" id="i-45"> Объектная модель </span></h3> <p> <i> Объект </i> .style.textTransform </p> <h3><span class="ez-toc-section" id="i-46"> Спецификация </span></h3> <p> Каждая спецификация проходит несколько стадий одобрения. </p> <ul> <li> Рекомендация (Рекомендация) - спецификация W3C и одобана как стандарт. </li> <li> Кандидат в рекомендации (Возможная рекомендация) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.</li> <li> Предлагаемая рекомендация (Предлагаемая рекомендация) - на этом этапе представлен на рассмотрении Консультативного совета W3C для окончательного утверждения. </li> <li> Рабочий проект (Рабочий проект) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом. </li> <li> Черновик редакции (Редакторский черновик) - черновая версия стандарта после внесения правок редакторами проекта. </li> <li> Проект (Черновик спецификации) - первая черновая версия стандарта.</li> </ul> <h3><span class="ez-toc-section" id="i-47"> Браузеры </span></h3> <p> В таблице браузеров используются следующие обозначения. </p> <ul> <li> - свойство полностью предоставленным браузером со всеми допустимыми значениями; </li> <li> - свойство браузером не воспринимается и игнорируется; </li> <li> - при работе возможно появление различных ошибок, либо свойство имеется лишь частично, например, не все допустимые значения имеют свойство не ко всем элементам, которые указаны в спецификации. </li> </ul> <p> Число указывает версию, начиная с свойства, имеющего свойство.</p> <h3><span class="ez-toc-section" id="i-48"> Автор и редакторы </span></h3> <p> <i/> Автор: Влад Мержевич </p> <p> <i/> Последнее изменение: 02.03.2020 </p> <p> <i/> Редакторы: Влад Мержевич </p>.<h2><span class="ez-toc-section" id="_text-transform_CSS-2"> Свойство text-transform | Справочник CSS </span></h2> <b> basicweb.ru </b> <ul> <li> HTML <ul> <li> Учебник HTML </li> <li> Справочник тегов </li> <li> Атрибуты событий </li> <li> Глобальные атрибуты </li> <li> Коды языков </li> <li> Мнемоники </li> <li> Цвета </li> <li> Тесты знаний </li> </ul> </li> <li> CSS <ul> <li> Учебник CSS </li> <li> Справочник свойств </li> <li> Селекторы </li> <li> Обязательства </li> <li> Правила </li> <li> Flexbox генератор </li> <li> Сетевой генератор </li> <li> Учебник МЕНЬШЕ </li> </ul> </li> <li> JavaScript <ul> <li> Интерфейсы веб API </li> <li> Объект Массив </li> <li> Дата размещения </li> <li> Объект Функция </li> <li> Объект Global </li> <li> Объект JSON </li> <li> Объект Math </li> <li> Номер объекта </li> <li> Объект Объект </li> <li> Объект RegExp </li> <li> Обещание объекта </li> <li> Строка объекта </li> </ul> </li> <li> jQuery <ul> <li> Селекторы </li> <li> События </li> <li> Методы ДОМ </li> <li> Перераз </li> <li> Утилиты </li> <li> Эффекты </li> <li> AJAX </li> <li> Объект Обратные звонки </li> <li> Объект отложен </li> </ul> </li> </ul> <h4><span class="ez-toc-section" id="HTML"> HTML </span></h4> <ul> <li> HTML учебник </li> <li> Справочник тегов </li> <li> Атрибуты событий </li> <li> Глобальные атрибуты </li> <li> Мнемоники </li> <li> Коды языков </li> <li> HTML цвета </li> <li> Тесты знаний </li> </ul> <h4><span class="ez-toc-section" id="CSS-3"> CSS </span></h4> <ul> <li> Учебник CSS </li> <li> Справочник свойств </li> <li> CSS селекторы </li> <li> CSS функции </li> <li> Правила CSS </li> <li> Flexbox генератор </li> <li> Сетевой генератор </li> <li> МЕНЬШЕ учебник </li> </ul> <h4><span class="ez-toc-section" id="JavaScript"> JavaScript </span></h4> <ul> <li> Интерфейсы веб API </li> <li> Объект Массив </li> <li> Дата размещения </li> <li> Объект Функция </li> <li> Объект Global </li> <li> Объект JSON </li> <li> Объект Math <sup title="В процессе наполнения"> β </sup> </li> <li> Номер объекта </li> <li> Объект Объект </li> <li> Обещание объекта </li> <li> Объект RegExp </li> <li> Строка объекта </li> </ul> <h4><span class="ez-toc-section" id="jQuery"> jQuery </span></h4> <ul> <li> jQuery селекторы </li> <li> jQuery события </li> <li> jQuery методы DOM </li> <li> jQuery перемещение </li> <li> jQuery утилиты </li> <li> jQuery эффекты </li> <li> jQuery AJAX </li> <li> Обратные вызовы объекта jQuery </li> <li> jQuery объект отложен </li> </ul> <p> <h5><span class="ez-toc-section" id="CSS-4"> CSS свойства </span></h5> </p> <ul> <li> align-content </li> <li> align-items </li> <li> выровнять себя </li> <li> все </li> <li> анимация </li> <li> задержка анимации </li> <li> анимация-направление </li> <li> продолжительность анимации </li> <li> режим заливки анимации </li> <li> количество итераций анимации </li> <li> имя-анимации </li> <li> состояние воспроизведения анимации </li> <li> функция синхронизации анимации </li> <li> задняя поверхность-видимость </li> <li> фон </li> <li> фон-приставка </li> <li> фоновый режим наложения </li> <li> фон-клип </li> <li> цвет фона </li> <li> фоновое изображение </li> <li> фон происхождения </li> <li> фон-позиция </li> <li> фон-повтор </li> <li> размер фона </li> <li> граница </li> <li> нижняя граница </li> <li> цвет нижней границы </li> <li> граница-нижний-левый-радиус </li> <li> граница-нижний-правый-радиус </li> <li> с окантовкой снизу </li> <li> ширина-нижняя граница </li> <li> пограничный обвал </li> <li> цвет рамки </li> <li> изображение границы </li> <li> граница-изображение-исход </li> <li> повтор изображения границы </li> <li> фрагмент изображения границы </li> <li> источник изображения границы </li> <li> ширина-границы-изображения </li> <li> граница слева </li> <li> левая рамка, цвет </li> <li> с рамкой слева </li> <li> ширина рамки слева </li> <li> граница-радиус </li> <li> граница правая </li> <li> цвет границы справа </li> <li> с окантовкой справа </li> <li> ширина рамки справа </li> <li> интервал границы </li> <li> с бордюром </li> <li> кайма </li> <li> цвет верхней границы </li> <li> граница-верх-левый-радиус </li> <li> граница-верх-правый-радиус </li> <li> с бордюром </li> <li> ширина по верху границы </li> <li> ширина границы </li> <li> низ </li> <li> тень коробки </li> <li> размер коробки </li> <li> обрыв после </li> <li> перед перерывом </li> <li> взлом </li> <li> со стороны подписи </li> <li> прозрачный </li> <li> зажим </li> <li> цвет </li> <li> количество столбцов </li> <li> столбец-заполнитель </li> <li> колонна-зазор </li> <li> столбец-линейка </li> <li> столбец-правило-цвет </li> <li> стиль столбца-правила </li> <li> ширина-правило столбца </li> <li> колонна-пролет </li> <li> ширина столбца </li> <li> столбцов </li> <li> содержание </li> <li> счетчик </li> <li> сброс счетчика </li> <li> курсор </li> <li> направление </li> <li> дисплей </li> <li> пустых ячеек </li> <li> фильтр </li> <li> гибкий </li> <li> гибкая основа </li> <li> гибкое направление </li> <li> гибкий поток </li> <li> гибкий рост </li> <li> термоусадочная </li> <li> гибкая пленка </li> <li> поплавок </li> <li> шрифт </li> <li> @ font-face </li> <li> семейство шрифтов </li> <li> размер шрифта </li> <li> стиль шрифта </li> <li> вариант шрифта </li> <li> font-weight </li> <li> сетка </li> <li> сетка </li> <li> сетка-автоматические столбцы </li> <li> сетка-автоматический поток </li> <li> сетка автоматических рядов </li> <li> сетка-столб </li> <li> конец столбца сетки </li> <li> сетка-столбец-зазор </li> <li> начало столбца сетки </li> <li> сетка-зазор </li> <li> сетка-рядка </li> <li> сетка-ряд-начало </li> <li> сетка-междурядье </li> <li> конец строки сетки </li> <li> сетка-шаблон </li> <li> сетка-шаблон-области </li> <li> сетка-шаблон-столбцы </li> <li> сетка-шаблон-ряды </li> <li> justify-content </li> <li> justify-items </li> <li> оправдать себя </li> <li> высота </li> <li> @keyframes </li> <li> осталось </li> <li> межбуквенный интервал </li> <li> высота строки </li> <li> в виде списка </li> <li> изображение в стиле списка </li> <li> позиция в стиле списка </li> <li> тип списка </li> <li> маржа </li> <li> нижнее поле </li> <li> левое поле </li> <li> поле справа </li> <li> верхняя маржа </li> <li> макс. Высота </li> <li> макс. Ширина </li> <li> @media </li> <li> мин-высота </li> <li> мин. Ширина </li> <li> непрозрачность </li> <li> заказать </li> <li> детей-сирот </li> <li> наброски </li> <li> контурный цвет </li> <li> контур-офсет </li> <li> наброски </li> <li> ширина контура </li> <li> перелив </li> <li> перелив-обертка </li> <li> переполнение-x </li> <li> переполнение </li> <li> набивка </li> <li> обивка нижняя </li> <li> отступ слева </li> <li> обивка правая </li> <li> утеплитель </li> <li> разрыв страницы после </li> <li> разрыв страницы до </li> <li> разрыв страницы внутри </li> <li> перспектива </li> <li> перспективное происхождение </li> <li> место-содержание </li> <li> единиц места </li> <li> самообслуживание </li> <li> позиция </li> <li> цитат </li> <li> изменить размер </li> <li> правый </li> <li> размер табулятора </li> <li> стол-сервиз </li> <li> выравнивание текста </li> <li> выравнивание текста последнее </li> <li> </li> </ul>.<div class='yarpp-related yarpp-related-none'> <p>No related posts.</p> </div> </div> </article> </div> <div class="author_box"> <div class="row clearfix"> <div class="col-md-3 col-sm-3 col-xs-12"> <div class="author_thumb"> <img alt='' src="//pcvector.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='https://secure.gravatar.com/avatar/?s=300&d=mm&r=g' srcset="" data-srcset='https://secure.gravatar.com/avatar/?s=600&d=mm&r=g 2x' class='lazy lazy-hidden avatar avatar-300 photo avatar-default' height='300' width='300' fetchpriority='high' decoding='async'/><noscript><img alt='' src='https://secure.gravatar.com/avatar/?s=300&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/?s=600&d=mm&r=g 2x' class='avatar avatar-300 photo avatar-default' height='300' width='300' fetchpriority='high' decoding='async'/></noscript> </div> </div> <div class="col-md-9 col-sm-9 col-xs-12"> <div class="author_details"> <div class="author_name"> <h3></h3> </div> <div class="author_desc"> </div> </div> </div> </div> </div> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://pcvector.ru/raznoe/boke-fon-zelenyj-zelenyj-fon-s-effektom-boke.html" rel="prev">Пред.</a></div><div class="nav-next"><a href="https://pcvector.ru/raznoe/shary-vozdushnye-kartinki-narisovannye-shariki-vozdushnye-risunki-foto-vozdushnye-shary-narisovannye.html" rel="next">След.</a></div></div> </nav> <section class="cm_related_post_container"> <div class="section_inner"> <div class="row clearfix"> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="card"> <div class="post_thumb imghover"> </div> <div class="card_content"> <div class="entry_cats"> <ul class="post-categories"> <li><a href="https://pcvector.ru/category/raznoe" rel="category tag">Разное</a></li></ul> </div> <div class="post_title"> <h2><a href="https://pcvector.ru/raznoe/kak-chasto-mozhno-delat-klizmu-grudnichku-rekomendatsii-pediatrov.html">Как часто можно делать клизму грудничку: рекомендации педиатров</a></h2> </div> <div class="meta"> <ul class="post_meta"> <li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author/alexxlab">alexxlab</a> </li> <li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/raznoe/kak-chasto-mozhno-delat-klizmu-grudnichku-rekomendatsii-pediatrov.html" rel="bookmark"><time class="entry-date published" datetime="2024-11-22T11:43:50+03:00">22.11.2024</time></a> </li> <li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/raznoe/kak-chasto-mozhno-delat-klizmu-grudnichku-rekomendatsii-pediatrov.html">0</a> </li> </ul> </div> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="card"> <div class="post_thumb imghover"> </div> <div class="card_content"> <div class="entry_cats"> <ul class="post-categories"> <li><a href="https://pcvector.ru/category/raznoe" rel="category tag">Разное</a></li></ul> </div> <div class="post_title"> <h2><a href="https://pcvector.ru/raznoe/pochemu-novorozhdennyj-ne-spit-nochyu-11-glavnyh-prichin-i-sposoby-resheniya-problemy.html">Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы</a></h2> </div> <div class="meta"> <ul class="post_meta"> <li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author/alexxlab">alexxlab</a> </li> <li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/raznoe/pochemu-novorozhdennyj-ne-spit-nochyu-11-glavnyh-prichin-i-sposoby-resheniya-problemy.html" rel="bookmark"><time class="entry-date published" datetime="2024-11-19T12:43:50+03:00">19.11.2024</time></a> </li> <li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/raznoe/pochemu-novorozhdennyj-ne-spit-nochyu-11-glavnyh-prichin-i-sposoby-resheniya-problemy.html">0</a> </li> </ul> </div> </div> </div> </div> <div class="row clearfix visible-sm visible-md visible-lg"></div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="card"> <div class="post_thumb imghover"> </div> <div class="card_content"> <div class="entry_cats"> <ul class="post-categories"> <li><a href="https://pcvector.ru/category/raznoe" rel="category tag">Разное</a></li></ul> </div> <div class="post_title"> <h2><a href="https://pcvector.ru/raznoe/kak-uspokoit-plachushhego-rebenka-10-effektivnyh-sposobov.html">Как успокоить плачущего ребенка: 10 эффективных способов</a></h2> </div> <div class="meta"> <ul class="post_meta"> <li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author/alexxlab">alexxlab</a> </li> <li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/raznoe/kak-uspokoit-plachushhego-rebenka-10-effektivnyh-sposobov.html" rel="bookmark"><time class="entry-date published" datetime="2024-11-16T23:43:50+03:00">16.11.2024</time></a> </li> <li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/raznoe/kak-uspokoit-plachushhego-rebenka-10-effektivnyh-sposobov.html">0</a> </li> </ul> </div> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="card"> <div class="post_thumb imghover"> </div> <div class="card_content"> <div class="entry_cats"> <ul class="post-categories"> <li><a href="https://pcvector.ru/category/raznoe" rel="category tag">Разное</a></li></ul> </div> <div class="post_title"> <h2><a href="https://pcvector.ru/raznoe/chto-nuzhno-novorozhdennomu-na-pervoe-vremya-polnyj-spisok-neobhodimyh-veshhej.html">Что нужно новорожденному на первое время: полный список необходимых вещей</a></h2> </div> <div class="meta"> <ul class="post_meta"> <li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author/alexxlab">alexxlab</a> </li> <li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/raznoe/chto-nuzhno-novorozhdennomu-na-pervoe-vremya-polnyj-spisok-neobhodimyh-veshhej.html" rel="bookmark"><time class="entry-date published" datetime="2024-11-14T16:43:50+03:00">14.11.2024</time></a> </li> <li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/raznoe/chto-nuzhno-novorozhdennomu-na-pervoe-vremya-polnyj-spisok-neobhodimyh-veshhej.html">0</a> </li> </ul> </div> </div> </div> </div> <div class="row clearfix visible-sm visible-md visible-lg"></div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="card"> <div class="post_thumb imghover"> </div> <div class="card_content"> <div class="entry_cats"> <ul class="post-categories"> <li><a href="https://pcvector.ru/category/raznoe" rel="category tag">Разное</a></li></ul> </div> <div class="post_title"> <h2><a href="https://pcvector.ru/raznoe/pelenki-dlya-novorozhdennyh-vidy-razmery-i-sposoby-ispolzovaniya.html">Пеленки для новорожденных: виды, размеры и способы использования</a></h2> </div> <div class="meta"> <ul class="post_meta"> <li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author/alexxlab">alexxlab</a> </li> <li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/raznoe/pelenki-dlya-novorozhdennyh-vidy-razmery-i-sposoby-ispolzovaniya.html" rel="bookmark"><time class="entry-date published" datetime="2024-11-13T20:43:50+03:00">13.11.2024</time></a> </li> <li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/raznoe/pelenki-dlya-novorozhdennyh-vidy-razmery-i-sposoby-ispolzovaniya.html">0</a> </li> </ul> </div> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="card"> <div class="post_thumb imghover"> </div> <div class="card_content"> <div class="entry_cats"> <ul class="post-categories"> <li><a href="https://pcvector.ru/category/raznoe" rel="category tag">Разное</a></li></ul> </div> <div class="post_title"> <h2><a href="https://pcvector.ru/raznoe/detskaya-krovatka-dlya-novorozhdennogo-kak-pravilno-vybrat.html">Детская кроватка для новорожденного: как правильно выбрать</a></h2> </div> <div class="meta"> <ul class="post_meta"> <li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author/alexxlab">alexxlab</a> </li> <li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/raznoe/detskaya-krovatka-dlya-novorozhdennogo-kak-pravilno-vybrat.html" rel="bookmark"><time class="entry-date published" datetime="2024-11-10T08:43:50+03:00">10.11.2024</time></a> </li> <li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/raznoe/detskaya-krovatka-dlya-novorozhdennogo-kak-pravilno-vybrat.html">0</a> </li> </ul> </div> </div> </div> </div> </div> </div> </section> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/bukvy-strochnye-css-text-transform-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://pcvector.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>
Имя *
Email *
Сайт

Значение	Описание
none	Текст отображается как есть (регистр букв не изменяется). Это значение по умолчанию.
capitalize	Преобразует первые символы каждого слова в верхний регистр.
uppercase	Преобразует все символы в верхний регистр.
lowercase	Преобразует все символы в нижний регистр.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Значение по умолчанию:	none
Применяется:	ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется:	нет
Наследуется:	да
Версия:	CSS1
Синтаксис JavaScript:	object.style.textTransform=»uppercase»

Значение	Описание
none	Текст отображается без изменений.
capitalize	Переделывает первую букву каждого слова в прописную.
uppercase	Переделывает все символы в прописные.
lowercase	Переделывает все символы в строчные.
inherit	Указывает, что значение наследуется от родительского элемента.

Internet Explorer		Хром	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

преобразование текста
Значения:
`нет`	Значение по умолчанию, означает отсутствие эффектов.
`капитализировать`	Изменяет написание первой буквы каждого слова в стиле ее прописной.
`прописные`	Вывод все слова в элементенте прописными буквами.
`строчная`	Вывод все слова в элементе строчными буквами.
`начальный`	Устанавливает значение свойства в значение по умолчанию.
`наследовать`	Наследует значение свойства от родительского элемента.

белое пространство
Значения:
`нормальный`	Значение по умолчанию. Между словами вставляется только по одному пробелу, дополнительные пробелы отбрасываются. Текст переносится только в случае необходимости.
`nowrap`	Запрещает переносы строк, за исключением применения `–` .
`до`	Пробелы в тексте не игнорируются, браузер отображает дополнительные пробелы и переносы строк.
`предварительная упаковка`	Сохраняет пробелы в тексте, делая разрывы строк там, где это необходимо.
`предварительная линия`	Удаляет лишние пробелы, за исключением случаев .
`перерывов`	Поведение идентично `pre-wrap` , за исключением того, что: любая последовательность неудаляемых пробелов всегда занимает место, в том числе в конце строки; возможность переноса строки после каждого неудачного пробела, в том числе между пробелами.
`начальный`	Устанавливает значение свойства в значение по умолчанию.
`наследовать`	Наследует значение свойства от родительского элемента.