Урок #2.Стилизация шрифта


В этом уроке мы рассмотрим возможности CSS для стилизации шрифта. Рассмотрим эти возможности на примерах. Итак, приступим…

Вес шрифта – свойство font-weight

С помощью свойства font-weight можно задать жирность шрифта.
Пример:

p{
font-weight: bold;
}

В данном примере в свойстве font-weight указано значение bold. Это говорит о том, что текст будет отображаться жирным шрифтом. Рассмотрим другие возможные значения для этого свойства:

- normal-обычный шрифт;
- значения от 100 до 900;
- lighter
- bolder

Стиль шрифта –свойство font-style

С помощью свойства font-style можно задать стиль шрифта. Вот его возможные значения: normal,italic,oblique. Как Вы уже наверное догадались, если использовать значение normal, то стиль будет нормальным, то есть без изменений.
Если использовать значение italic, то текст будет отображаться курсивом. Значение oblique используется для создания наклонного шрифта.
В следующем примере все абзацы будут отображаться курсивом:


p{
  font-style: italic
}

Вариант шрифта – свойство font-variant

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

Вот пример использования значения small-caps:

p{
  font-variant: small-caps;
}

Семейство шрифта - свойство font-family

С помощью свойства font-family можно указать список шрифтов.
Вот пример:

p{
  font-family: "Times New Roman", Times, serif
}

Размер шрифта –свойство font-size

С помощью свойства font-size можно задать размер шрифта. В качестве единиц измерения можно использовать абсолютные единицы (px и pt) и относительные (% и em).
Ниже приведен пример веб-страницы (полный исходный код) с использование CSS-стилей для оформления шрифта.

Вот исходный код:

<html>

<head>
<style >
h1{
  font-style:italic;
}

p{
  font-size:20px;
}

</style>
  <title>Это моя первая веб-страница</title>
</head>

<body>
     <h1>Мой первый сайт</h1>
     <p>Добро пожаловать на мой первый сайт</p>
</body>

</html>

В данном примере установлены правила для тегов <h1> и <p>. Строка «Это моя первая веб-страница» отображается курсивом. Для абзацев установлен шрифт размером 20 пикселов.


<<<<Назад   Содержание   Далее>>>