Вот уже несколько уроков мы вовсю изощряемся с форматированием текста посредством 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 был для вас полезен. Если это так:
- Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
- Подписывайтесь на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.
На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!
CSS позволяет производить гибкую настройку текста, который представлен с помощью языка HMTL. Сегодня мы рассмотрим действие свойства «text-transform», дающего возможность менять регистр шрифта. Данная опция поддерживается всеми современными браузерами и входит в спецификацию всех версий CSS.
Назначение
Свойство «text-transform» может принимать три основных значения и два добавочных. К примеру, можно назначить верхний регистр ко всему выделенному тексту. Либо можно дать команду противоположному предыдущему свойству, где все символы становятся строчными. Производить назначение можно с помощью любого удобного для вас метода. Например, с использованием встроенных стилей. Или вы можете создать
Отдельный файл с описанием всех свойств. Какой использовать способ присвоения, решать только вам. «Text-transform» может принимать следующие значения:
- Uppercase. Делает все выделенные символы заглавными. В CSS uppercase встречается часто, так как это значение помогает решить многие сложные задачи, связанные с текстом.
- Lowercase. Данное свойство полностью противоположно команде uppercase.
- Capitalize. Меняет регистр первой буквы на верхний. Остальные символы не будут изменяться.
- None. Позволяет отменить все назначенные значения (необходимо для предопределения свойства). Как правило, данное значение устанавливается по умолчанию.
- Inherit. Наследует все свойства у родительского элемента. Следует заметить, что IE не поддерживает этой свойство.
Применение
С использованием CSS верхний регистр (или подобные эффекты) устанавливается с помощью одной простой команды. Поэтому нет необходимости изменять или переписывать весь текст. Если речь идет об одностраничном сайте, то данное свойство, возможно, и не пригодится. Но когда под вашим управлением находится огромный портал, где нужно исправить регистр букв в определенных фрагментах, то «text-transform» становится единственным эффективным средством. Например, нужно исправить шрифт в заголовочных тегах «h2». Для этого нужно добавить запись: «h2 { text-transform: uppercase; }», и тогда все заголовки второго уровня будут иметь верхний регистр.
Особенности
Некоторые, возможно, считают, что ручная обработка текста и изменение шрифта с помощью свойства «text-transform» не имеет никаких различий. Но это не так. Если вы поменяете вручную на прописные (верхний регистр), то при копировании этой информации с вашего сайта символы так и останутся без изменений. Если использовать язык CSS, то все происходит по-другому. Свойство «text-transform» лишь зрительно для пользователей меняет шрифт. Но в действительности символы остаются неизменными. Это происходит со всеми значениями данного свойства. Скопированная информация (текст) будет иметь первоначальный регистр, какой используется в исходном коде страницы. В этом и заключается единственное различие между ручной обработкой и использованием CSS-команд.
Неважно, какой вы хотите использовать - нижний или верхний регистр, главное, не забывать предназначение. Например, если изменения нужны вам только с декоративной целью, то можете спокойно применять свойство «text-transform». Ну а если вы знаете, что ваши пользователи наверняка будут копировать выложенную вами информацию, то лучше всего вручную изменять регистр всего текста. Ведь иногда читатели не замечают такой подмены шрифта. Это особенно критично, когда речь идет о важных документах и подобной информации.
Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз. В зависимости от положительного или отрицательного значения смещения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два элемента для создания индекса: (от англ. superscript) - верхний индекс и (от англ. subscript) - нижний индекс. Текст, помещённый в один из этих контейнеров, обозначается меньшим размером, чем базовый текст, и смещается относительно него вверх или вниз. В примере 1 приведено совместное использование указанных элементов и стилей для изменения вида текста.
Пример 1. Создание верхнего и нижнего индекса
Характеристическое уравнение поверхности второй степени
λ3 - I1λ2 + I2λ - I3 = 0
В примере одновременно встречается как нижний, так и верхний индекс. Для изменения начертания шрифта индекса применяются стили, которые задают единое оформление (рис. 1).
Рис. 1. Вид индексов после применения стилей
Можно вообще отказаться от использования и в пользу стилей. Аналогом этих элементов служит свойство vertical-align , заставляющее текст смещаться по вертикали на заданное расстояние. В частности, в примере 2 в качестве значения применяется 0.8em для верхнего индекса и -0.5em для нижнего. Em - это относительная единица, равная размеру текущего шрифта. Например, 0.5em говорит о том, что текст надо сдвинуть на половину размера шрифта.
Пример 2. Использование стилей для управления индексами
Многочлен степени n
f(x) = a0 + a1 x + ... + an-1 xn-1 + an xn
В примере сама формула выводится увеличенным размером, символы верхнего индекса устанавливаются красным цветом, а нижние - синим (рис. 2).
HTML Теги и - Подстрочный и Надстрочный Текст
Определение и Использование
Тег определяет подстрочный текст. Подстрочный текст имеет высоту в два раза меньше и появляется под базовой линией. Подстрочный текст может использоваться при написании химических формул, например H 2 O.
Тег определяет надстрочный текст. Надстрочный текст имеет высоту в два раза меньше и появляется над базовой линией. Надстрочный текст может использоваться при написании сносок, например WWW .
Поддержка Браузерами
Теги и поддерживаются всеми основными браузерами.
Различия Между HTML и XHTML
Стандартные Атрибуты
Столбец DTD указывает, в каком типе документа HTML 4.01/XHTML 1.0 DTD атрибут разрешен. S=Strict, T=Transitional и F=Frameset.
Теги и поддерживают следующие стандартные атрибуты:
| Атрибут | Значение | Описание | DTD |
|---|---|---|---|
| class | имя_класса | Указывает имя класса для элемента | STF |
| dir | rtl ltr |
Указывает направление текста для содержимого в элементе | STF |
| id | идентификатор | Указывает уникальный идентификатор для элемента | STF |
| lang | код_языка | Указывает код языка для содержимого элемента | STF |
| style | определение_стиля | Указывает встроенный стиль для элемента | STF |
| title | текст | Указывает дополнительную информацию об элементе | STF |
| xml:lang | код_языка | Определяет код языка для содержимого элемента в XHTML документах | STF |
Дополнительная информация о Стандартных Атрибутах .
Атрибуты Событий
Теги и поддерживают следующие атрибуты событий:
| Атрибут | Значение | Описание | DTD |
|---|---|---|---|
| onclick | скрипт | Скрипт, запускаемый при клике мышью | STF |
| ondblclick | скрипт | Скрипт, запускаемый при двойном щелчке мышью | STF |
| onmousedown | скрипт | Скрипт, запускаемый при нажатии кнопки мыши | STF |
| onmousemove | скрипт | Скрипт, запускаемый при перемещении указателя мыши | STF |
| onmouseout | скрипт | Скрипт, запускаемый, когда указатель мыши уходит за пределы элемента | STF |
| onmouseover | скрипт | Скрипт, запускаемый, когда указатель мыши перемещается над элементом | STF |
| onmouseup | скрипт | Скрипт, запускаемый при отпускании кнопки мыши | STF |
| onkeydown | скрипт | Скрипт, запускаемый при нажатии клавиши | STF |
| onkeypress | скрипт | Скрипт, запускаемый, когда клавиша нажата, а затем отпущена | STF |
| onkeyup | скрипт | Скрипт, запускаемый, когда клавиша отпущена | STF |
Дополнительная информация об
Загрузка...
