Начинающим Web - разработчикам сайтов

Форматирование текста

При заполнении Web-страниц с форматированием текста в html приходится сталкиваться больше, чем с другими элементами и если бы не стили , это занятие носило долгий и монотонный характер. Каскадные листы стилей с их последней спецификацией CSS 2.0 могут задать тексту любые параметры форматирования. Хотя существует много учебников на эту тему, но можно подойти более просто к этой теме. Итак...

Так с помощью свойства family языка HTML можно указать гарнитуру шрифта. В значениях ставится название шрифта или лучше их перечень в порядке приоритетности. Можно в значениях применять классификации шрифтов: serif (с засечками), sans-serif (без засечек), monospase (моноширинный), cursive (наклонный), fantasy (произвольный).

Font-size - устанавливает размер шрифта в html. В значениях можно указать как числовые значения в единицах измерения, так и воспользоваться ключевыми словами:

• Medium - в его значении устанавливается размер шрифта по умолчанию.
• small - на 20% меньше, чем medium ;
• x-small - на 20% меньше, чем small ;
• xx-small - на 20% меньше, чем x-small ;
• large - на 20% больше, чем medium ;
• x-large - на 20% больше, чем large ;
• xx- large - на 20% больше, чем x-large .

По начертанию шрифт будет меняться в HTML с помощью свойства font-style и его значений: normal (по умолчанию), italic (курсив), oblique (наклонный). По толщине шрифт регулирует свойство font-weight с значениями normal (по умолчанию) и bold (полужирное). Высоту строчных букв формирует - font-size-adjust , а при значении small-casp в другом свойстве font-variant шрифт будет прописным, а размер иметь как строчный.

Интервалы между символами определяются свойством letter-spacing , которые измеряются в (em) . Интервал между слов показывает - word-spacing . С помощью text-transform происходит изменение регистра посредством значений: capitalize (первые буквы всех слов будут заглавные), lowercase (придаёт символам строчный вид), uppercase (формирует прописные символы).

При выравнивании текста на странице, посредством html и css применяется свойство text - align со значениями left (по левому краю), right (по правому), center (по центру), justufy (по ширине страницы). По вертикали же выравнивание текста может происходить только в таблице с указанием vertical- align при значениях top (по верху), bottom (по низу), middle (по середине).

При указании расстояния между строк Вам понадобится использовать свойство line-height , значения которого могут измерятся в любых доступных единицах, а также в процентах. При назначениях отступа для начала абзаца находит применение уже text-indent , с такими же значениями.

Форматирование пробелов происходит при участии свойства white-space и трёх его значений: normal (символы нескольких пробелов преобразуются в один), pre (не будут преобразованы в один), nowrap (текст будет перенесён специальными тэгами).

Text-decoration создает дополнительные атрибуты к тексту в виде подчеркивания (underline), перечеркивания (line-through) и надчеркивания (overline).

При помощи CSS можно форматировать и списки , независимо от их разновидностей. В значениях свойства list-style-type можно указывать следующее:

• disk, circle, square - маркер в виде закрашенного круга, окружности и закрашенного квадрата соответственно для того или иного списка.
• lower-roman и upper-roman - нумерация списка римскими цифрами малыми и большими размерами соответственно для прменяемого списка.
• lower-alpha и upper-alpha - нумерация строчными и прописными латинскими буквами.
• decimal - нумерация списка, посредством CSS, арабскими цифрами.
• none - нет нумерации и маркеров для списков.

Свойство list- style -image позволяет небольшое изображение использовать в качестве маркера. Для этого задается нужно задать его адрес и имя. Пример: list-style-image: url(адрес/имя файла)

Отступ от краев регулируется свойством list- style -position посредством значений inside (увеличить) и outside (уменьшить).

Если Вы достаточно усвоили все детали учебника по форматированию текста, то запустите на своём "компе" любой HTML-редактор. Найдите там CSS и приступайте от учебы к практическим занятиям.