Практическое использование CSS: регистр символов |
|
|
Часто так бывает - учим что-то только тогда, когда возникает необходимость
применения его на практике. В итоге мы хорошо усваиваем только ту часть,
которую сразу же применяем. Остальное забывается, а зачастую и не изучается.
Так в стороне осталось множество интересных возможностей CSS. Начиная с этой
статьи, мы будем делать акцент именно на не очень распространенных, но
оттого не менее полезных примемах применения CSS.
Достаточно редкий прием использования CSS - воздействие на регистр отображаемых
символов. Для тех, кто не в курсе, регистр символов характеризует их заглавное
свойство. Говоря проще, символы в верхнем регистре - это ЗАГЛАВНЫЕ, т.е. большие
символы, а символы в нижнем регистре - это строчные, т.е. маленькие буквы.
Уверен, читатель не раз видел на просторах Сети сайты, у которых та или иная
часть, например заголовок статьи, был написан заглавными символами. Если открыть
просмотреть содержание соответствующего html документа - там, как правило, тоже
будут заглавные буквы.
Очень немногие знают о таком интересном свойстве в CCS, как text-transform. С
его помощью и можно осуществлять манипуляции с отображаемым текстом, без
непосредственного вмешательства в сами символы текста. Свойство text-transform
может принимать 5 разных значений: inherit, capitalize, uppercase, lowercase и
none. Подробней о них:
capitalize - первая буква текста с таким значением свойства CSS
text-transform всегда будет строчной;
uppercase - это свойство заставит браузер отображать текст только
заглавными буквами;
lowercase - как многие уже догадались, полная противоположность
предыдущему случаю - весь текст отображается только строчными буквами;
inherit - указывает, что должно использоваться значение родительского
элемента;
none - вывод текста таким, какой он есть, для text-transform это
значение по умолчанию;
И наглядный пример:
<p>ЭТО просто ТеСт</p>
<p style="text-transform:capitalize">ЭТО просто ТеСт</p>
<p style="text-transform:uppercase">ЭТО просто ТеСт</p>
<p style="text-transform:lowercase">ЭТО просто ТеСт</p>
<p style="text-transform:inherit">ЭТО просто ТеСт</p>
<p style="text-transform:none">ЭТО просто ТеСт</p>
Вот так это будет выглядеть:
ЭТО просто ТеСт
ЭТО просто ТеСт
ЭТО просто ТеСт
ЭТО просто ТеСт
ЭТО просто ТеСт
ЭТО просто ТеСт
У некоторых читателей сейчас, наверное, возникнет вопрос: "Ну и на кой... все
это нужно? Не проще сразу написать таким шрифтом, каким нужно отображать???".
Хм... отчасти справедливо. А теперь попробуйте представить ситуацию: вам
поручили в доработку и администрирование огромный посещаемый портал, с огромным
количеством страничек, которые, как правило, генерируются по шаблону и выводятся
нормальными символами. И вот, как это бывает, заказчику что-то стукнуло в голову
/ встал не с той ноги / увидел такое у конкурентов / свой вариант / ... И
сказал, что хочет, чтобы все заголовки выводились только большими, заглавными
символами. Ваши действия: запаниковать и уволиться / нанять сотню людей и начать
вручную перепечатывать заголовки / написать скрипт, который переворошит всю базу
данных (заодно пару раз перегрузив сервер и грохнув саму базу :)) и изменить
регистр символов / ... / использовать в нужном месте шаблона CSS свойство
text-transform и решить задачу за пару минут. А когда на следующий день заказчик
попросит вернуть обратно, вам не захочется искать веревку с мылом, ведь
достаточно будет лишь изменить одно свойство в шаблоне генератора. Примеров
можно приводить еще много. Одним словом - штука полезная, не забывайте про это
свойство.
На этот раз все, до скорых встреч.
Автор: Владислав Путяк
Источник: www.ru-coding.com
|
