php, java
статьи, книги
рефераты, ГДЗ

Бесплатные ключи и сброс
пробной версии для Касперского

Все для cs 1.6

Самые лучшие сеты моделей и избранные подборки девушек

Воскресенье, 09 Авг 2020, 17:39:05

Приветствую Вас Гость | RSS
Главная | Каталог статей | Регистрация | Вход
Меню сайта

ФИЗИКА!!! NEW!!!

Русский!!! NEW!!!

Категории раздела
Дизайну, графика и баннеры [17]
Советы, примеры, уроки, заметки по дизайну, графике и баннерам
PHP - примеры скриптов [21]
PHP - примеры скриптов
Программирование и заработок [114]
Программирование на самых популярных языках, заметки о заработке, оболочки
Статьи по поисковой оптимизации [9]
Статьи по поисковой оптимизации
php и базы данных [14]
Хитрости при программировании php, заметки по базам данных
Заработок в Интернете [7]
Материалы по заработку в интернет

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Главная » Статьи » Статьи по Web дизайну » Программирование и заработок

Оформление текста с помощью CSS
 

Оформление текста — задача на первый взгляд простая, но только на первый взгляд. На деле необходимо учесть множество параметров: гарнитура, размер, цвет шрифта, длина строки, высота строки (интерлиньяж), выравнивание, отступы и поля (свободное пространство). Все эти параметры свойственны и верстке бумажных изданий, однако в Сети есть своя специфика — вы не можете ни в чем быть уверены, необходимо гибко подбирать параметры для максимального количества посетителей.

Итак, сверстаем текст, который удобно читать.

Текст оформлен средствами каскадных таблиц стилей (CSS). В раздел <head> XHTML-документа помещен следующий код:

<style type="text/css">
p {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 150%;
color: #000;
}

p.serif {
font-family: Georgia, "Times New Roman", Times, serif;
}

h1 {
font: bold 1.2em Verdana, Tahoma, Arial, Helvetica, sans-serif;
letter-spacing: 0.2em;
text-transform: uppercase;
}
</style>

Определимся с основным текстом, каждый абзац которого определяется в XHTML тегами <p></p>. Выбрана следующая последовательность шрифтов: Verdana, если этот шрифт отсутствует у посетителя, тогда Tahoma, далее Arial, Helvetica и, в крайнем случае, любой рубленый шрифт. Размер шрифта задан в относительных единицах (em) и составляет 80% от настроек браузера по умолчанию.

Межстрочный интервал — 150%. По умолчанию в браузерах используется высота строки 120%, однако, это не оптимальное для удобочитаемости значение. В конце концов, экономить бумагу нет необходимости, а размер экрана по вертикали ничем не ограничен и стоит задать больший интерлиньяж — 150% в самый раз.

Последним для тега <p> в нашем CSS-коде определен цвет шрифта — шрифт основного текста должен быть черным. Красный шрифт оставим для идеологических и дизайнерских изысков. Удобочитаемый текст должен быть черного цвета на белом или светлом фоне. Мы используем рубленые шрифты, т. к. они лучше смотрятся на мониторе. Однако для приверженцев шрифтов с засечками создан класс "serif". На картинке он снизу (<p class="serif">).

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

Заголовок верстаем жирным рубленым шрифтом размером 120% от заданного по умолчанию. Расстояние между буквами (разрядка) заголовка — 20% от размера шрифта. Все буквы заглавные. Это должно положительно сказаться на заметности заголовка, который — в силу своих обязанностей — должен привлекать внимание.

Категория: Программирование и заработок | Добавил: ceg (16 Авг 2007) | Автор: linuxcenter.ru
Просмотров: 216 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Имя *:
Email *:
Код *:
Форма входа

Реклама

Поиск

Друзья сайта
  • Играете в Counter-Strike??? ВАМ СЮДА!!!

  • Copyright CEG © 2020