Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

Стилизация текста сайта с помощью CSS

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

Для начала разберёмся с абзацами и формированием текста в них, предположим у нас есть какой-то текст:

<p style=”text-align: justify;”>Проба текста</p>

text-align задаёт горизонтальное формирование текста в абзаце, основные значения: left, right, center, и justify последнее как правило используется чаще это свойство заполняет и растягивает текст по абзацу делая абзац ровным и заполненным придавая прекрасный визуальный эффект объёмности, ну а первые три значения выравнивают текст: по левому краю, по правому краю и по центру соответственно…

Так же vertical-align: устанавливает вертикальное положение элемента. Может принимать следующие значения: baseline middle sub super text-top text-bottom top bottom, чаще всего применяются 3 основных функции: middle –выравнивание по середине, top – выравнивание по верхнему краю и bottom – выравнивание по нижнему краю.

Едем дальше теперь нам необходимо задать размер шрифта, и это обязательно… Поясню почему: если вы не будете устанавливать размер шрифта то он будет отображаться автоматически в зависимости от настроек браузера просматривающего, а поскольку настройки не у всех одинаковы дизайн вашего сайта может просто поплыть…

Но вернемся к размерам задаются они очень просто:

<p style=”font-size: 12px; text-align: justify;”>Проба текста</p>

Размеры текста можно задавать как в pt- пунктах так и px-пикселях, рекомендую последнее. Теперь пора разобраться с шрифтами нам необходимо задать шрифт который будет отображать наш текст, как и размер это тоже обязательно: font-family: Times New Roman, sans-serif;

Стандартных вариантов шрифтов 6:

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

@font-face { Font-family: “Robson Celtic”; src: url(http://site.ru/fonts/robson.pfr) } H1 { font-family: “Robson Celtic”, serif;}

Тем самым мы прикрепили к нашей таблице стилей шрифт и обозначили заголовок h1 им.

Если вам хотелось бы подробнее об этом узнать, то рекомендую скачать Спецификацию по CSS2 там описаны все детали…

Теперь зададим цвет вашему тексту, делается это очень легко:

<p style= “color: #ff0000;”>Проба текста</p> Цвет так-же может быть задан по названию: Black, White, Red, Yellow… и т.д.

А мы идем дальше, теперь нам необходимо разобраться с основными свойствами шрифтов, первый это font-style: здесь доступны следующие значения Italic – Курсив, oblique - Наклонный. Второй у нас font-weight: соответственно значения normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 они определяют толщину (вес) шрифта, т.е. 100 самый тонкий ну а 900 самый жирный…

Теперь пора разобраться с дополнительными возможностями текста, начнем по порядку:

Text-decoration: тут есть три значения underline – подчеркивание снизу, line-through – зачеркивание, overline – надчеркивание.

text-transform: и тоже три значения capitalize - Первая буква каждого слова преобразуется в заглавную, uppercase - Все буквы преобразуются в заглавные и lowercase - Все буквы преобразуются в строчные.

line-height: 50 % Управляет интервалами между строками текста, значения могут задаваться в пикселях.

word-spacing: 50 % Устанавливает интервалам между словами. Можно использовать отрицательные значения

letter-spacing: 50 pt Устанавливает интервалам между буквами.

Вот и все основные моменты, которые должен знать каждый веб разработчик чтобы сделать сайт с хорошим текстовым оформлением…

Дата публикации:2009-05-07


Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget