Home Статьи по CSS

Достаточно редкий прием использования CSS - воздействие на регистр отображаемых символов. Для тех, кто не в курсе, регистр символов характеризует их заглавное свойство. Говоря проще, символы в верхнем регистре - это ЗАГЛАВНЫЕ, т.е. большие символы, а символы в нижнем регистре - это строчные, т.е. маленькие буквы.

Уверен, читатель не раз видел на просторах Сети сайты, у которых та или иная часть, например заголовок статьи, был написан заглавными символами. Если открыть просмотреть содержание соответствующего html документа - там, как правило, тоже будут заглавные буквы.

Очень немногие знают о таком интересном свойстве в CCS, как text-transform. С его помощью и можно осуществлять манипуляции с отображаемым текстом, без непосредственного вмешательства в сами символы текста. Свойство text-transform может принимать 5 разных значений: inherit, capitalize, uppercase, lowercase и none. Подробней о них:

  • capitalize - первая буква текста с таким значением свойства CSS text-transform всегда будет строчной;
  • uppercase - это свойство заставит браузер отображать текст только заглавными буквами;
  • lowercase - как многие уже догадались, полная противоположность предыдущему случаю - весь текст отображается только строчными буквами;
  • inherit - указывает, что должно использоваться значение родительского элемента;
  • none - вывод текста таким, какой он есть, для text-transform это значение по умолчанию;

Подробнее...

 

Частенько случается ситуация, когда к элементу хотелось бы применить не один, а сразу два (а иногда и три) класса. До недавних пор приходилось выкручиваться примерно так:

.red, .redAndBig {color:darkred}
.big, .redAndBig {font-size:200%; font-weight:bold}

Другими словами, в нашем примере мы ввели класс .redAndBig, который объединяет свойства классов .red и .big. Объединённый класс задаём в HTML таким образом:

<p class="redAndBig">Красный. И большой.</p>

Но спецификация CSS Level 2 позволяет задавать у элемента более одного класса. Для этого достаточно разделить названия классов пробелом:

<p class="red big">Красный. И большой.</p>

Получается наглядно и красиво. Огорчает только тот факт, что эта конструкция работает только в Internet Explorer 5+, Opera 4+ и Netscape Navigator 6+. В более ранных версиях браузеров при таком раскладе к элементу не будет применён ни один стиль…