Главная
Скачать (Download)
Dreamweaver CS6
Dreamweaver CS5
Dreamweaver CS4
Dreamweaver 8
Dreamweaver MX 2004
Dreamweaver 4
Уроки (Tutorials)
Видеоуроки new!!!

Fireworks
ЧаВо
Документация
Статьи
Программы и скрипты
Бесплатные шаблоны
Каталог сайтов
Форум
Карта сайта
Контакты

Вы можете сделать очень выгодную покупку подписчиков в группу вконтакте

Документация - Главная
- Macromedia Dreamweaver
- CSS
- Раскрутка
- PHP
- SQL
- Дизайн [1 2]
- Java
- Разное

главная > статьи >

Практическое использование 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

    главная > статьи >

    Реклама