Теперь же мы разберем, как работать со шрифтами и текстами в CSS.

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

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

#all-page {
background-color: #8799d7;
width: 915px;
margin: 0 auto;
padding: 0;
}

Присвоение свойств CSS тексту по признаку тега осуществляется немного по-другому. Обратите внимание на первое правило в вашем файле style.css:

body, html {
margin: 0px;
padding: 0px;
background-color: #e2e8e3;
}

Как видите, вместо селектора типа «#имя_блока» в правиле стоят обозначения body, html. При этом данное правило работает для содержимого, заключенного в теги и . Я надеюсь, это понятно. Так вот, таким же образом присваиваются правила CSS по признаку тега и текстам, в частности, ссылкам и заголовкам. Но про это мы поговорим на втором уроке, а сейчас продолжим про блоки.

Как задать тип шрифта в CSS

По умолчанию, если не указан тип шрифта, браузер отображает текстовое содержимое блока шрифтом Times New Roman. Однако мы можем изменить такой ход событий и назначить тип шрифта самостоятельно.

Давайте сейчас назначим тип шрифта для блока content-area допишите выделенное свойство:

#content-area {
background-color: #F06766;
height: 100%;
margin-left: 210px;
padding: 10px;
font-family: Verdana;
}

Сохраните файл style.css и просмотрите в браузере ваш index.html как видите, тип шрифта в данном блоке изменился на заданный нами. Как видите, это очень просто.

Учтите одну особенность: если название типа шрифта состоит из одного слова, то пишется без кавычек. Если оно состоит из двух и более слов, то необходимо записывать его в одинарных кавычках (можно и в двойных):

#content-area {
background-color: #F06766;
height: 100%;
margin-left: 210px;
padding: 10px;
font-family: 'Arial Black';
}

Можно организовать поддержку нескольких типов шрифтов для этого нужно задать их в CSS, перечисляя через запятую:

#content-area {
background-color: #F06766;
height: 100%;
margin-left: 210px;
padding: 10px;
font-family: 'Arial Black', Arial, Verdana;
}

С этим понятно. Идем дальше.

Как задать размер шрифта в CSS

Чтобы задать размер шрифта в CSS, нам нужно вписать в правило свойство font-size с нужным значением:

#content-area {
background-color: #F06766;
height: 100%;
margin-left: 210px;
padding: 10px;
font-family: Verdana;
font-size: 12px;
}

Сохраняемся и просматриваем нашу страничку в браузере размер шрифта сменился на 12 пикселей. Как сделать жирный шрифт в CSS
Это тоже очень просто. Допишем свойство font-weight со значением bold:

#content-area {
background-color: #F06766;
height: 100%;
margin-left: 210px;
padding: 10px;
font-family: Verdana;
font-size: 12px;
font-weight: bold;
}

Как видите, после добавления этого свойства в CSS шрифт меняется на жирный. Для получения курсива нужно сменить значение с bold на italic или bold italic попробуйте сделать это самостоятельно. Как изменить цвет текста в CSS
Чтобы изменить цвет текста в CSS, допишем свойство color, присвоив ему значение white:

#content-area {
background-color: #F06766;
height: 100%;
margin-left: 210px;
padding: 10px;
font-family: Verdana;
font-size: 12px;
font-weight: bold;
color: white;
}

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

Пример

(Visited 527 times, 1 visits today)