Вы здесь

Изменение свойств текста

В CSS существует множество свойств, позволяющих настраивать текст страницы в самых широких пределах: изменять размер и форму шрифта, устанавливать отступы между буквами и словами, задавать стиль текста. Все это предоставляет в руки веб-дизайнера мощный инструмент настройки внешнего вида веб-страницы.

font-family

Свойство font-family позволяет установить шрифт, которым будет отображаться текст веб-страницы, например, Times New Roman, Arial или Verdana.

Определяемые шрифты должны быть установлены на компьютере пользователя, поэтому совершенно не разумно использовать редкие и мало известные шрифты. Существуют несколько отборных "безопасных" шрифтов (наиболее часто используются шрифты arial, verdana, times new roman), но вы можете определять более одного шрифта, разделяя их запятыми. Это делается для того, чтобы в том случае, когда у пользователя не установлен первый шрифт из определенных в свойстве, то браузер будет искать следующий по списку шрифт, затем следующий, и так до тех пор, пока не будет найден установленный у пользователя шрифт, либо будет достигнут конец списка. Такая возможность очень полезна, так как иногда на разных компьютерах может устанавливаться разный набор шрифтов. Таким образом, например, декларация "font-family: arial, helvetica" может использоваться для определения соответствующего шрифта на PC (на котором традиционно устанавливается шрифт arial, но нет шрифта helvetica) и на Apple Mac (на котором традиционно нет шрифта arial, и в этом случае будет использован шрифт helvetica).

Внимание: Если имя шрифта состоит из нескольких слов, то его следует заключать в кавычки, например, font-family: "Times New Roman".

font-size

Свойство font-size задает размер шрифта. Будьте с этим свойством осторожны: не стоит использовать в качестве заголовков параграфы, отображаемые шрифтом большого размера; для этого есть специальные теги <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, которые имеют массу достоинств, даже если в действительности шрифт параграфа будет больше шрифта заголовка (что не должны делать разумные люди).

font-weight

Свойство font-weight определяет толщину или жирность шрифта. На практике обычно используют два его состояния: font-weight: bold и font-weight: normal. Хотя в теории оно также может принимать значения bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 и 1000. Однако, посмотрев на то, как большинство браузеров отказываются понимать эти значения, вы поймете, что гораздо безопаснее иметь дело всего лишь со значениями bold и normal.

font-style

Свойство font-style определяет, будет ли текст отображаться курсивом или нет. Оно может быль либо font-style: italic, либо font-style: normal.

text-decoration

Свойство text-decoration определяет подчеркнутость текста. Оно может быть:

  • text-decoration: overline – помещает горизонтальную линию над текстом.
  • text-decoration: line-through – помещает горизонтальную линию через текст, создавая эффект перечеркивания.
  • text-decoration: underline - помещает горизонтальную линию под текст, создавая эффект подчеркивания. Не стоит использовать, так как обычно пользователи предполагают, что подчеркнутый текст – ссылка.

Как правило, данное свойство используется для оформления ссылок, в частности чтобы убрать подчеркивание при помощи значения text-decoration: none.

text-transform

Свойство text-transform позволяет изменить регистр букв текста.

  • text-transform: capitalize – переводит первые буквы всех слов в верхний регистр.
  • text-transform: uppercase – переводит все буквы в верхний регистр.
  • text-transform: lowercase - переводит все буквы в нижний регистр.
  • text-transform: none – попробуйте сами это значение.

body {
   font-family: arial, helvetica, sans-serif;
   font-size: 0.8em;
}

h1 {
   font-size: 2em;
}

h2 {
   font-size: 1.5em;
}

a {
   text-decoration: none;
}

strong {
   font-style: italic;
   text-transform: uppercase;
}

Разбивка текста

Свойство letter-spacing и свойство word-spacing определяют расстояние между буквами и словами соответственно. Их значением может быть число в любых единицах измерения, либо ключевое слово normal.

Свойство line-height определяет высоту строки элемента, не влияя на размер шрифта. Значением может быть число (которое будет множителем размера шрифта. Например, "2" означает, что высота строки в два раза больше размера шрифта.), либо проценты, либо слово normal.

Свойство text-align выравнивает текст внутри элемента. Принимает значения left (выравнивание по левому краю), right (выравнивание по правому краю), center (выравнивание по центру) или justify (равномерное выравнивание по ширине).

Свойство text-indent создает отступ на заданную величину первой строки параграфа. Подобное форматирование традиционно для полиграфии и редко в цифровых средствах информации.

p {
   letter-spacing: 0.5em;
   word-spacing: 2em;
   line-height: 1.5;
   text-align: center;
}