text-transform

Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от 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 раз.
#	Повторять один или больше раз через запятую.	#

Значения

Песочница

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

Пример

Культурный памятник Средневековья

Амазонская низменность неумеренно берёт небольшой провоз кошек и собак, а Хайош-Байа славится красными винами.

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

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

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

Объект.style.textTransform

Спецификация

Спецификация	Статус
CSS Text Level 4	Редакторский черновик
CSS Text Level 3	Рабочий проект
CSS Level 2 (Revision 1)	Рекомендация
CSS Level 1	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Рецепты

Источник

Заглавные HTML буквы и CSS расстояние между буквами

Глава содержит примеры форматирования букв из области Гипертекстовой разметки.

В меню слева вы найдете современные и очень подробные уроки по HTML.

Они позволят вам создать свой сайт с чистого листа , а пока смотрим немного ниже.

Основное содержание этой главы

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

Эпоха информационного общества

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

HTML буквы: большие и заглавные

Пример форматирования букв:

Пример произвольного текста, написанного большими буквами

Пример произвольного текста, написанного заглавными буквами

Пример произвольного текста, написанного большими буквами

Пример произвольного текста, написанного заглавными буквами

Описание атрибутов и значений:

Теги – определяют большие буквы (эти теги не поддерживаются в HTML 5).

CSS код style=»text-transform:uppercase» – определяет заглавные буквы.

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

Подробности ищите в самоучителе по HTML и CSS

HTML буквы и CSS расстояние между ними

Пример форматирования букв:

Произвольный HTML текст и CSS расстояние между буквами в 2 пикселя

Описание атрибутов и значений:

CSS код style=»letter-spacing:2px» – определяет CSS расстояние между буквами.

Подобные примеры форматирования ищите в меню слева. Спасибо за ваше внимание.

Автор проекта — Вася Митин | Дата публикации: Июль 2011 | Обновление: Ноябрь 2018

HTML и CSS коды Заглавные HTML буквы и CSS расстояние

Источник

text-transform

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

Синтаксис

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

Значения

HTML5 CSS2.1 IE Cr Op Sa Fx

       Lorem ipsum dolor sit amet
 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.

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

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

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

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

Браузеры

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

Источник

text-transform¶

Свойство text-transform управляет преобразованием текста элемента в заглавные или прописные символы.

Когда значение отлично от none , регистр исходного текста будет изменён.

Демо¶

letter-spacing
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness
text-decoration-skip
text-decoration-skip-ink
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-indent
text-rendering
text-shadow
text-underline-position
text-transform
white-space
word-spacing

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14

/* Keyword values */ text-transform: none; text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: full-width; text-transform: full-size-kana; /* Global values */ text-transform: inherit; text-transform: initial; text-transform: revert; text-transform: revert-layer; text-transform: unset;

Значения¶

capitalize Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют. lowercase Все символы текста становятся строчными (нижний регистр). uppercase Все символы текста становятся прописными (верхний регистр). none Не меняет регистр символов. full-width Это ключевое слово, которое заставляет писать символы — в основном идеограммы и латинские буквы — внутри квадрата, что позволяет выравнивать их в обычных восточноазиатских шрифтах (например, китайском или японском). full-size-kana Обычно используемое для текста аннотаций , это ключевое слово преобразует все мелкие символы кана в эквивалентные полноразмерные символы кана, чтобы компенсировать проблемы с читаемостью при небольших размерах шрифта, обычно используемых в ruby.

Применяется ко всем элементам

Спецификации¶

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

 html> head> meta charset="utf-8" /> title>text-transformtitle> style> h1  text-transform: uppercase; /* Заглавные буквы */ > p  text-transform: capitalize; /* Каждое слово начинается с заглавной буквы */ > style> head> body> h1>Культурный памятник Средневековьяh1> p> Амазонская низменность неумеренно берёт небольшой провоз кошек и собак, а Хайош-Байа славится красными винами. p> body> html>

Источник

Свойство CSS text-transform

Свойство CSS text-transform отвечает за написание строчных или заглавных букв (верхний и нижний регистр) в html.

Синтаксис CSS text-transform

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

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

Примеры перевода в верхний и нижний регистр в HTML

Пример 1. Каждое слово с большой буквы в HTML

html> head> style> .primer1< text-transform: capitalize; font-size: 14px; > /style> /head> body> div class css">primer1">Каждое слово начинается с большой буквы/div> /body> /html>

Вот как это выглядит на странице:

Пример 2. Все слова в нижнем регистре в HTML

html> head> style> .primer2< text-transform: lowercase; font-size: 14px; > /style> /head> body> div class css">primer2">ВСЕ слова БУДУТ в нижним Регистре/div> /body> /html>

Вот как это выглядит на странице:

Пример 3. Все слова в верхнем регистре в HTML

html> head> style> .primer3< text-transform: uppercase; font-size: 14px; > /style> /head> body> div class css">primer3">Верхний регистр для ВСЕХ слов/div> /body> /html>

Вот как это выглядит на странице:

Для обращения к text-transform из JavaScript нужно писать следующую конструкцию:

[window.]document.getElementById("elementID").style.textTransform value">VALUE"

Источник