Работа со шрифтом css часть 2. Задать размер шрифту. Жирность шрифта. Как написать код стилей css в укороченном виде.

4) Свойство в CSS FONT-SIZE с его помощью мы можем задавать размер нашему шрифту на сайте. Это свойство почти всегда применяется в тексте, а задавать размер шрифту мы будем в пикселях. Лучший вариант усвоения урока это когда смотрим пример и итог в браузере и сравниваем между собой ну и конечно не забываем практиковаться сами и желательно записывать код самим, а не копировать со страницы.

Пример содержание файла style.css для свойства FONT-SIZE.


h1 {                                                                    
font-family: verdana, geneva, arial, sans-serif;
font-size: 18px;                                           
}                                                                
h2 {                                                                    
font-family: verdana, geneva, arial, sans-serif;
font-size: 24px;                                           
}                                                                


На скриншоте вы видите что заголовок первого уровня как мы и указали с помощью CSS в файле style.css стал меньше размерами чем заголовок второго уровня.

Размер шрифта CSS

5) Свойство FONT-WEIGHT в CSS с ним мы придаём насыщенность шрифту. С этим свойством мы можем применить следующие значения normal - обычный и значение bold - определяет жирность шрифта текста. Посмотрите пример применения таблицы стилей CSS.

Пример содержание файла style.css для свойства FONT-WEIGHT.


p {                                                                    
font-family: verdana, geneva, arial, sans-serif;
font-weight: bold;                                        
}                                                                


Вот в браузере мы видим что шрифт текста стал жирным как мы и указали с помощью значения bold. Так же здесь мы не применили значение normal так как шрифт всё равно бы остался обычным.

насыщенность шрифта CSS

6) Свойство FONT в CSS это свойство нам поможет записывать код стилей в более лёгкой форме, тем самым мы сможем экономить своё время. Посмотрите в первом примере, мы приводим код в обычном виде, который мы изучали, а во втором примере мы уже показываем код стилей в укороченном виде. Вам же выбирать, как применять стиль css к вашему сайту в файла style.css по вашему желанию.

Вот пример обычного содержание файла style.css для шрифта.


p {                                                                    
font-family: verdana, geneva, arial, sans-serif;
font-weight: bold;                                        
font-size: 18px;                                           
}                                                                


Пример содержание файла style.css для свойства FONT.


p {font :bold 18px verdana,sans-serif;}


В браузере мы видим результат обеих примеров хоть они и написаны разными способами.

Свойство FONT CSS

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

Следующий урок изучаем цвет и фон в CSS.
Вернуться к первой части по работе шрифтом CSS.



Рейтинг@Mail.ru   Яндекс.Метрика