... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Свойства CSS. Шрифт (стр.1).

 

 

Цвет и фон ||  Шрифт ||  Изменение размера шрифта ||  Текст и его свойства ||  Интервалы


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

Для задания параметров шрифтов в HTML используется элемент FONT. С его помощью можно задавать гарнитуру шрифта (атрибут face), размер (size) и цвет (color). Управление начертанием шрифта осуществляется с помощью других элементов, например I и B. В CSS все то же самое реализуется при помощи свойств.

Свойство FONT-FAMILY

Это свойство задает гарнитуру шрифта. Как вы уже знаете, все шрифты (гарнитура — синоним понятия "шрифт") делятся на несколько групп, или семейств.
  • Serif - шрифты с засечками, такие как Times New Roman. Подобным шрифтом набран основной текст этой книги.
  • Sans-serif - шрифты рубленые, без засечек, например Arial, Verdana или Tahoma. Подобным шрифтом в этой книге набраны заголовки.
  • Monospace - моноширинные шрифты (с одинаковым расстоянием между символами, наподобие печатной машинки), такие как Courier New. Такой шрифт использован в этой книге для набора HTML-кода.
  • Cursive - шрифты курсивные, такие как Calisto MT.
  • Fantasy - декоративные шрифты, буквы которых могут имитировать, например, рукописный текст.

В качестве значения свойства font-family указывается название гарнитуры или семейства шрифтов. Рассмотрим пример задания гарнитуры шрифта для текста в абзацах:

P { font-family: Arial, sans-serif }

В этом случае текст внутри абзацев будет написан гарнитурой Arial, а в том случае, если такого шрифта на компьютере посетителя Web-страницы не окажется, то вместо гарнитуры Arial будет использоваться любой шрифт семейства sans-serif Таким образом, даже при отсутствии нужного шрифта он будет заменен наиболее близким ему по виду, и внешний вид страницы будет не очень сильно отличаться от задуманного автором.

В HTML для этой цели используется атрибут face элемента FONT, причем между тегами <FONT> </FONT> необходимо помещать каждый фрагмент текста, гарнитуру шрифта которого вы захотите изменить. В CSS все гораздо проще - достаточно написать соответствующее правило для нужного селектора. Для сравнения приводим способ задания используемого шрифта при помощи CSS и только на HTML.



Задание гарнитуры шрифта в HTML и CSS
HTML CSS
<P><font face="Arial, sans-serif">Текст абзаца будет написан шрифтом Arial</P> P { font-family: Arial, sans-serif }
<P>Текст любых абзацев будет написан шрифтом Arial</P>

Свойство FONT-STYLE

Свойство задает стиль шрифта. Допускаются значения:
  • normal - обычный;
  • oblique - наклонный;
  • italic - курсивный.
Возникает справедливый вопрос: чем отличается шрифт "курсивный" от "наклонного"? Суть в том, что значение italic использует встроенное в шрифт курсивное начертание. Как правило, набор символов шрифта включает набор букв нормального начертания (normal), полужирного (bold) и курсивного (italic). Иногда в шрифт включается набор комбинаций полужирного курсива (bold italic), возможны и другие варианты начертания. Если в шрифт не включены наборы bold и italic, то полужирное начертание имитируется утолщением букв, а курсив имитируется простым наклоном букв шрифта, что и соответствует значению oblique. По умолчанию для свойства используется значение normal.

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

P { font-family: Arial, sans-serif }
P.first { font-style: italic }
<P class="first">Текст первого абзаца, а также всех тех, для которых будет указан атрибут class="first", будет набран шрифтом с курсивным начертанием. </Р> <Р>Текст последующих абзацев будет написан обычным шрифтом.</Р>

При помощи свойства font-style можно изменить начертание шрифта в элементах HTML, отображающихся в браузере курсивом, - это элементы I и ЕМ. Сделать это можно так:

ЕМ { font-style: normal; color: green }

При этом слова, помещенные между тегами <ЕМ> и </ЕМ>, вместо курсива будут выделяться зеленым цветом.

Свойство FONT-VARIANT

С помощью этого свойства можно указать вариант написания букв из двух возможных: обычный (normal) или малые прописные буквы (small-caps). Малые прописные буквы отличаются от обычных прописных слегка уменьшенным размером, т.е. они представляют собой нечто среднее между строчными и прописными буквами. Малые прописные буквы можно использовать, например, для вывода текстов заголовков.

H1, Н2, НЗ, Н4, Н5, Н6 { font-variant: small-caps }

Для записи этого правила мы использовали группировку селекторов, указав их через запятую, поэтому все заголовки в документе будут выводиться малыми прописными буквами. По умолчанию весь текст пишется обычными буквами - font-variant: normal.

 

Страница: - 1 - | - 2 - | - 3 - | - 4 -

 

Цвет и фон ||  Шрифт ||  Изменение размера шрифта ||  Текст и его свойства ||  Интервалы

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены