Свойство FONT-WEIGHT

Это свойство определяет насыщенность шрифта, т.е. с его помощью можно сделать шрифт жирным. Основные значения: normal - обычный и bold - жирный. Некоторые браузеры поддерживают числовые значения: 100, 200,300,400,500,600,700,800,900. Для справки: 400 равносильно normal, а 700 - bold. Но я не советую вам пользоваться числами!

P {font-family: arial, verdana, sans-serif;}
DIV {
font-family: arial, verdana, sans-serif;
font-weight: bold;
}

• Создать пример

 

Свойство FONT-SIZE

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

Давайте прикольнемся над заголовками:

h1 {
font-family: arial, verdana, sans-serif;
font-size: 18px;
}
h2 {
font-family: arial, verdana, sans-serif;
font-size: 36px;
color: red;
}

• Создать пример

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

Сокращенная запись. Свойство FONT

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

При этом нужно записывать значения всех свойств через пробел, в такой последовательности:

font-style_ font-variant_font-weight_font-size_font-family

Ну вот например:

P {
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}

А теперь то же самое в краткой форме:

P{ font: italic normal bold 30px arial,sans-serif; }

Еще раз обратите внимание, на то, что все значения указаны в нужной последовательности, и ЧЕРЕЗ ПРОБЕЛ. Если какое-либо свойство не указать, ему присвоится значение по умолчанию.

НУ что, теперь попрактикуйтесь, и можно приступать к следующему уроку.

Урок 5: Текст в CSS

В этом уроке мы рассмотрим основные свойства CSS отвечающие за форматирование текста.

• text-align
• text-decoration
• text-indent
• text-transform
• letter-spacing
• word-spacing

Свойство TEXT-ALIGN

Свойство выравнивания текста, аналогичное атрибуту ALIGN используемому в html. Может принимать четыре значения:

left - выравнивание по левому краю(значение по умолчанию);
right - выравнивание по правому краю;
center - выравнивание по центру;
justify - выравнивание по ширине(по правому и левому краям одновременно).

Тут все очень просто, ну вот например:

h1 { text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}
p {text-align:justify;}

• Создать пример