Большой архив статей, книг, документации по программированию, вебдизайну, компьютерной графике, сетям, операционным системам и многому другому
 
<Добавить в Избранное>    <Сделать стартовой>    <Реклама на сайте>    <Контакты>
  Главная Документация Программы Обои   Экспорт RSS E-Books
 
 

   Интернет технологии -> CSS -> Практическое использование CSS: регистр символов


Практическое использование CSS: регистр символов

Часто так бывает - учим что-то только тогда, когда возникает необходимость применения его на практике. В итоге мы хорошо усваиваем только ту часть, которую сразу же применяем. Остальное забывается, а зачастую и не изучается. Так в стороне осталось множество интересных возможностей 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

    Ссылки по теме
    CSS Design: Укрощение списков
    Основы CSS
    Таблица свойств CSS
    Введение в CSS
    CSS - Справочник
     

    Компьютерная документация от А до Я - Главная

  •  

     
    Интересное в сети
     
    10 новых программ
    CodeLobster PHP Edition 3.7.2
    WinToFlash 0.7.0008
    Free Video to Flash Converter 4.7.24
    Total Commander v7.55
    aTunes 2.0.1
    Process Explorer v12.04
    Backup42 v3.0
    Predator 2.0.1
    FastStone Image Viewer 4.1
    Process Lasso 3.70.4
    FastStone Image Viewer 4.0
    Xion Audio Player 1.0.125
    Notepad GNU v.2.2.8.7.7
    K-Lite Codec Pack 5.3.0 Full


    Наши сервисы
    Рассылка новостей. Подпишитесь на рассылку сейчас и вы всегда будете в курсе последних событий в мире информационных технологий.
    Новостные информеры. Поставьте наши информеры к себе и у вас на сайте появится дополнительный постоянно обновляемый раздел.
    Добавление статей. Если вы являетесь автором статьи или обзора на тему ИТ присылайте материал нам, мы с удовольствием опубликуем его у себя на сайте.
    Реклама на сайте. Размещая рекламу у нас, вы получите новых посетителей, которые могут стать вашими клиентами.
     
    Это интересно
     

    Copyright © CompDoc.Ru
    При цитировании и перепечатке ссылка на www.compdoc.ru обязательна. Карта сайта.
     
    Rambler's Top100