Rambler's Top100

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

Для форматирования и выравнивания текстав в css применяются следующие свойства:

text-align - выравнивает текст, имеет 4 значения:
left - по левому краю
right - по правому краю
center - по центру
justify - выравнивает и по левому и по правому краю

Прописывается в файле css это так: h1{ text-align:center;} или h2{ text-align:right;}

text-indent - создаёт отступ первой строки параграфа

В файле css так: p {text-indent: 30px;}

text-decoration - создаёт подчёркнутый, зачеркнутый текст, имеет 4 значения
underline - текст подчёркивается
line-through - текст перечёркивается
overline - текст подчёркивается сверху
none - это значение по умолчанию, можно не писать

h3 {text-decoration:overline;}     будет так:  Подчёркнутый текст сверху
h2 {text-decoration:underline;}   будет так:  Подчёркнутый текст снизу
p{text-decoration:line-through;}  будет так:  Перечёркнутый текст

word-spacing - изменяет растояние между словами
В файле css прописывается так: p{ word-spacing :15px; } будет так:

Предложение с изменённым растоянием между словами

letter-spacing - изменяет расстояние между буквами
text-transform - видоизменяет текст - заглавные переводит в маленькие, а маленькие в заглавные, имеет 4 значения
uppercase - из всех букв делает заглавные
lowercase - из всех букв делает маленькие
capitalize - Первую букву каждого слова переводит в верхний регистр
none - по умолчанию

Добавим в файл CSS для тегов <h1> свойство text-align:center; а для тегов <p> свойства text-align: justify;

h1 {
font-family: arial, sans-serif, verdana;
font-size: 25px;
font-style: italic;
text-align:center;
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;
text-align: justify;
color: black;
}

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

Теперь заголовок располагается по центру, а текст выравнен и по левому и по правому краю, и смотрится гораздо красивее Здесь смотрите пример

Для того чтобы абзацы текста начинались с небольшими отступами ( с красной строки) для тега <p>, применим свойство text-indent

p {
font-family: arial, sans-serif, verdana;
font-size: 14px;
text-align: justify;
text-indent: 30px;

color: black;
}

Что получилось Здесь смотрите пример. Материал легче запомнится и освоится, если не просто читать, а применять на практике, создайте тестовые страницы и пробуйте применить разные свойства шрифта и текста

Следующая тема "ССылки в CSS", для перехода нажмите кнопку 5

 

 

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