Лабораторні роботи з КМІ / Лабораторна робота № 11

ЛАБОРАТОРНАЯ РОБОТА № 11

Работа с текстом в CSS

1. Теоретические сведения

1.1. Выбор гарнитуры шрифта

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

• Arial;

• Arial Black;

• Courier New;

• Comic Sans MS;

• Tahoma;

• Times New Roman;

• Verdana.

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

Для задания гарнитуры шрифта в CSS используется свойство font-family. При этом названия шрифтов, состоящие из нескольких слов, рекомендуется заключать в кавычки, хотя это и не обязательно.

1.2. Размер шрифта

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

Реальные единицы измерения (сантиметры, миллиметры, дюймы, пункты и пики) не очень хорошо подходят для Web-страниц. Таким образом, для задания размеров шрифта остается три возможности: рх, em и ключевые слова.

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

Если в таблице стилей есть правило:

P {font-size:12px;}

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

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

В этом случае для задания размеров шрифта незаменима единица em. Поскольку она вычисляется относительно базового размера, с ее помощью легко можно сохранить желаемые пропорции в тексте. Чаще всего посетители просматривают Web-страницы с отключенным масштабированием текста в окне браузера. В браузерах Opera и Mozilla при этом размер шрифта устанавливается равным 100%, а в браузере Internet Explorer он будет "средний".

Еще один доступный вариант задания размера текста в CSS – использование ключевых слов: xx-small, x-small, medium, large, x-large, xx-large. Для получения каждого следующего размера используется множитель 1,2.

Ключевых слов всего семь, столько же и размеров было в HTML, только обозначались они цифрами от 1 до 7. Однако использование ключевых слов для задания размера шрифта сопряжено с некоторыми трудностями, т.к. в CSS эта шкала симметрична и в качестве значения по умолчанию используется значение medium, тогда как в HTML эта шкала несимметрична и значением по умолчанию является значение size="3". Из-за такого несоответствия получаем разные размеры шрифта в браузерах Internet Explorer, Opera и Mozilla.

Разночтения и неодинаковое отображение в различных браузерах размеров шрифта, заданных при помощи ключевых слов, вызывают некоторые трудности в их использовании. Но все-таки их можно преодолеть, написав для разных браузеров отдельные таблицы стилей и подключая нужную с помощью средств JavaScript. Тогда в этих таблицах стилей размеры шрифта должны будут отличаться на один пункт. Так, в таблице для Internet Explorer и Opera будет написано правило:

Р{font-size: small}

А для браузера Mozilla следует написать так:

Р{font-size: medium}

1.3. Оформление текста

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

При этом внешний вид текста можно еще улучшить. В первую очередь, можно изменить выравнивание абзацев, например, по ширине, тогда текст будет смотреться аккуратнее и колонка текста будет ровнее. Делается это заданием свойства text-align:justify, при этом незначительно увеличатся расстояния между словами в строке, чтобы выровнять общую длину строк.

Р{font-family: Arial, sans-serif; text-align: justify;}

He всегда хорошо смотрится наличие абзацных отступов между абзацами. При помощи CSS это можно сделать довольно легко. Если в CSS-правило дописать свойство, отвечающее за размеры полей, то можно регулировать абзацные отступы. Для удаления отступов можно использовать margin:0. Теперь правило примет вид:

Р{font-family:Arial, sans-serif; text-align:justify; margin:0}

После этого абзацы будут следовать друг за другом, без отступов, с выравниванием по ширине.

Аналогичным образом можно уменьшить отступ после заголовка, чтобы он ближе примкнул к основному тексту. Для заголовка достаточно отрегулировать только нижнее поле элемента Н3, дописав в правило свойство margin-bottom:0.2em:

Н3{font:1.4em Arial, sans-serif; margin-bottom:0.2em;}

Изменение расстояния между буквами может пригодиться при оформлении таблицы с данными, которая по ширине не помещается на экране. Тогда, чтобы избежать появления горизонтальной полосы прокрутки, можно уменьшить расстояние между буквами внутри таблицы, и она станет более компактной, и, возможно, горизонтальной полосы прокрутки не потребуется. Для этого создается новый CSS-класс TABLE.narrow для новой узкой таблицы:

TABLE.narrow{letter-spacing:-0.05em;}

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

2. Ход работы

1. Продолжаем форматировать html-документ с помощью CSS.

2. Выбрать типы и размер шрифтов для разных объектов (заголовки, абзацы, таблицы). Использовать различные виды единиц для задания размеров шрифта.

3. Применить свойство «Выравнивание текста», дополнив файл "style.css" и прописать в нем наборы правил для абзацев и заголовков и таблиц.

4. Убрать абзацные отступы в одном из документов.

5. Изменить стандартные расстояния между буквами в таблице.

3. Задание для самостоятельного выполнения

1. Применить на одной из страниц свойство text-decoration.

2. Применить на странице свойство text-indent. С помощью этого свойства можно задать красную строку.

4. Применить на одной из страниц свойство text-transform. Это свойство позволяет изменять вид букв в предложении: маленькие или большие.

5. Добавить в таблицу стилей новый стиль CSS для форматирования списков с помощью атрибутов list-style-type и list-style-image.

4. Содержание отчета

1. Выполнить все пункты задания.

2. Представить коды выполненных операций.

3. Представить скрины первоначального (без форматирования) HTML-документа.

4. Представить скрины конечного HTML-документа.

4. При сдаче работы иметь исходные файлы.

5. Задания и вопросы для аттестации

1. Назовите стандартные способы форматирования текстового документа CSS?

2. Назовите специальные (для украшения текста и улучшения его восприятия) способы форматирования текстового документа CSS?

3. Какие способы форматирования текста можно применить в таблице для более компактного размещения информации?