Rambler's Top100

ТЕКСТ И ШРИФТЫ В CSS

Из курса по теме ОСНОВЫ HTML вы уже знаете, что заголовки текста заключаются в теги <h></h> со значением от 1 до 6 - <h1> <h2> <h3> <h4> <h5> <h6>, а абзацы текста заключаются в теги <p> </p>

Текст может быть отображаться разным шрифтом, цветом, размером, стилем, разным расположением и так далее. Для шрифта в CSS есть следующие стили:

Пропишем в файле CSS для тегов <h1> и <p> следующие свойства стиля:

h1 {
font-family: arial, sans-serif, verdana;
font-size: 25px;
font-style: italic;
color: #8B0000;
}

h2 {
font-family: arial, sans-serif, verdana;
font-size: 20px;
font-style: italic;
font-variant: small-caps;
color: #8B0000;
background-color :coral ;
}

p {
font-family: arial, sans-serif, verdana;
font-size: 14px;
font-style: normal;
color: black;
}

p.fon {
font-family: arial, sans-serif, verdana;
font-size: 14px;
font-weight: bold;
color: black;
background-color: #FFE1A6 ;
}

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

В результате у нас получился заголовок первого уровня, заключённый в теги <h1> коричневого цвета, шрифт размером 25 пикселей, стиль шрифта italic, для заголовка второго уровня, в тегах <h2>, применили свойство background-color и вариант написания шрифта - "small-caps".

Текст, заключённый в теги <p> размером 14 пикселей, черного цвета, стиль нормальный, а для одного абзаца применили свойство font-weight - жирный текст, что получилось смотрите пример

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

 

 

Rambler's Top100 Яндекс цитирования