... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Оформление текста при помощи CSS. (стр.7)

 

 


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

Увеличение или сокращение высоты строки в большом объеме текста также не позволит ярко выделить текст из общей массы. В общем случае оптимальной считается высота строки, равная 120% от размера символов. Иначе говоря, если шрифт имеет размер 12 пунктов, то высота строки в этом случае будет рдвна 14,4 пункта. При слишком маленькой высоте, строчки очень близко располагаются друг к другу, что затрудняет чтение. Слишком большая высота снижает скорость чтения из-за непривычно больших расстояний между строками, и взгляду приходится "проходить" большее расстояние, чтобы перейти на новую строку. Оптимальной высотой строки является диапазон от 110% до 140%, и, безусловно, этот показатель зависит от гарнитуры шрифта.

Приведем пример трех классов абзацев, .р1, .р2 и .рЗ , для каждого из которых зададим соответствующий стиль.

Р.р1{line-height:100%}
Р.р2{line-height:120%}
Р.р3{line-height:150%}

В браузере три оформленных этими стилями абзаца будут выглядеть так:

Текст этого параграфа будет уплотнен. Высота строки 100% размера шрифта. Строчки при этом располагаются непривычно близко друг к другу.

Для этого параграфа использовалась стандартная высота строки - 120%. Такой текст читать удобнее, чем в предыдущем параграфе.

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


В общем случае менять высоту строки не рекомендуется. Но в тех случаях, когда нужно увеличить плотность текста на странице,, все же можно уменьшить высоту строки, но не стоит ее делать меньше 100%. Например, вы хотите сделать длинный список компактнее. Уменьшать высоту строки можно для списков, оглавлений или карт сайта, в которых главным фактором является не удобство чтения, а быстрый поиск нужного пункта. И если эти пункты будут ближе расположены друг к другу, то нужный пункт можно найти быстрее, реже пользуясь полосой прокрутки.

С увеличением высоты строки ситуация следующая. Любой Web-дизайнер всегда стремится расположить на одной странице как можно больше информации. Одно из правил создания Web-страниц заключается в том, чтобы на начальной странице размещалась вся важная, ключевая информация: навигационное меню сайта, главные новости и тому подобная информация. Таким образом, когда пользователь впервые попадает на сайт, он должен, не пользуясь полосой прокрутки, на первой же странице увидеть достаточно информации, чтобы определить для себя полезность или бесполезность этого ресурса. А наша задача - сделать свой ресурс непременно полезным, нужным и удобным. Увеличение высоты строки напрямую скажется на том, какое количество текста будет размещаться на первой странице.

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

P.selected{background:#FFFFCC; border:1px solid #660000; margin:0.5em 0; padding:0.5em}

<P class="selected">Попробуем выделить этот абзац в основной массе текста. Применим для этого несколько способов, тогда в конкретной ситуации вы сможете выбрать подходящий для вас.</Р<

Вот что получилось (Выделение текста с помощью рамки и заливки):

Первый параграф полностью набирается курсивом, чтобы выделить основную мысль текста и обратить на себя дополнительное внимание.

Основной текст новостной статьи. Оформляется обычным начертанием. Выделение внутри создается курсивом, чтобы не поменять оптическую насыщенность строки и раньше времени не привлечь к себе внимание.

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

Еще один параграф статьи, в нем выделение будет создано при помощи полужирного начертания, оно будет сразу бросаться в глаза!


Этот способ, пожалуй, самый радикальный. Такое выделение не часто встретишь в обычной книге, но на Web-странице мы имеем более широкие возможности выделения. Я уж не говорю о традиционных выделениях начертанием и цветом. Ведь мы можем элементарно изменить цвет текста нужного абзаца, и тогда он тоже будет выделен в общей массе. Способов много, а какой из них применить - зависит от конкретного случая и вашего вкуса. Главная рекомендация — для конкретного сайта выберите один способ выделения и придерживайтесь его, чтобы ваш сайт не "пестрил" разнообразием, а выглядел строго и стильно. Главное - не просто знать все возможности CSS, а уметь применять их правильно и именно там, где это уместно.

 

Страница: - 1 - | - 2 - | - 3 - | - 4 - | - 5 - | - 6 - | - 7 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены