Автор работы: Пользователь скрыл имя, 27 Декабря 2011 в 22:18, лабораторная работа
Цель работы: изучить основы управления шрифтом и текстом с помощью таблиц стилей CSS, освоить практические навыки по использованию свойств шрифта и текста на web-странице.
</head>
<body>
<b>Электронная <i>коммерция</i></b>
<p span class="bolder">Является одним из самых … <i>во всех отраслях бизнеса</i>. Она открывает новые возможности …..</p>
<p span class="bolder">Инструментарий <i>Microsoft и электронная коммерция</i> </p>
</body>
</html>
Рис.5.
Определение толщины шрифта
В
примере 4 создается класс bolder,
который делает линии шрифта толще.
Создание Small caps
Small caps полезны для выделения заголовков. С помощью Small caps строчные буквы переводятся в заглавные, размер которых меньше, чем у обычных прописных букв (рис.6).
Рис.6.
Все буквы заглавные, но первая – больше
остальных
Пример
5
<html>
<head>
<style type="text/css">
body {
font-size: 24px;
font-family: "Times New Roman", Times, serif;
}
h2 {
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Электронная коммерция</h2>
<p>Является одним из самых модных течений практически во всех отраслях бизнеса. Она открывает новые возможности в любой сфере,
независимо от того, ориентируетесь
ли вы на конечного покупателя
или работаете с деловыми
</body>
</html>
Рис.7.
Применение small-caps
В
примере 5 тег заголовка второго
уровня отображает текст маленькими
заглавными буквами (small-caps).
Определение нескольких значений шрифта одновременно
Свойства шрифта можно определять независимо, но лучше записать все элементы шрифта в одном определении, используя свойство font.
В
примере 6 определяется заголовок первого
уровня и класс copy, который затем
применяется к абзацам в тексте. С помощью
специального стиля описывается тег заголовка
третьего уровня.
Определение в правиле нескольких атрибутов
1. Введите свойство font: и поставьте двоеточие. Затем укажите следующие значения:
<font-family>
<font-style>
<font-variant>
<font-weight>
<font-size>
<font-height>
<visitor-style>
2. Укажите значение font-weight и нажмите клавишу пробела
bold
3.Укажите значение font-style и нажмите клавишу пробела
italic
4.
Определите значение font-
small-caps
5. Введите значение font-size
26px
6. Введите слэш (/), значение line-height и пробел
/3em
7. Укажите значение font-family
"milion
web", Georgia, "Times New Roman", Times, serif;
Пример
6
<html>
<head>
<style type="text/css">
h1 {
font: bold italic small-caps 2.5em/3em "milion web", Georgia, "Times New Roman", Times, serif;
}
h3 {
font: caption;
}
.copy {
font: 10px/20px Arial, Helvetica, Geneva, sans-serif;
}
</style>
</head>
<body>
<br>
<h1> Введение в книгу </h1>
<h3> Инструментарий Microsoft и электронная коммерция </h3>
<br>
<p class="copy"> Быстрое развитие ....
</p>
</body>
</html>
Рис.8. Определение
нескольких значений шрифта, используя
свойство font
Использование стилей посетителя
Было бы удобно, если бы стили шрифта, которые использует посетитель страницы, совпадали с вашими стилями. Этого можно добиться при работе с Internet Explorer 5/6 и Netscape, определив стиль шрифта с помощью ключевых слов (например font: icon:):
Если
вы не хотите определять какой-либо атрибут,
просто не включайте его в список.
Вместо него браузер воспользуется значением,
установленным по умолчанию.
II. Управление текстом
Кернинг
Одна из особенностей CSS заключается в том, что HTML-стили не имеют функции, которая позволяла бы легко изменять отступ для текста, включая отступ между отдельными буквами (Кернинг), словами и строками текста в абзаце. В отличие от HTML при использовании CSS, можно легко управлять отступами в тексте и изменять их по своему усмотрению.
Кернинг означает отступ между буквами в слове. Увеличение отступа часто позволяет улучшить читабельность текста. С другой стороны, слишком большой отступ может затруднить чтение, так как отдельные слова будет сложно различить на странице.
В
примере 1 увеличивается отступ между
буквами слова «бизнеса».
Пример
1
<html>
<head>
<style type="text/css">
.str {
letter-spacing: 2em;
}
</style>
</head>
<body>
Быстрое
развитие коммуникационных технологий
в настоящее время
Не является исключением и сфера <span class="str">бизнеса</span>. Интернет, как наиболее....
</p>
</body>
</html>
Рис.1.
Увеличение отступа между буквами слова
Определение кернинга
1. Напишите letter-spacing в списке CSS-определений и поставьте двоеточие:
letter-spacing:
2.
Укажите значение свойства
Положительное
значение letter-spacing увеличивает обычное
расстояние между буквами, а отрицательное
– уменьшает. Значение, равное нулю, не
изменяет расстояние между буквами, но
при его использовании исчезает выравнивание
текста.
Интервал между словами
Подобно кернингу, интервалы между словами (word spacing) могут как улучшать, так и ухудшать восприятие текста. Текст, в котором между словами небольшие пробелы, легче читать.
В
примере 2 некоторые слова стоят
слишком близко друг к другу, а другие
разделены большими пробелами.
Пример
2
<html>
<head>
<style type="text/css">
.title {
word-spacing: 8px;
letter-spacing: 4px;
}
p {word-spacing: -8px;}
p.copy {
word-spacing: 4px;
letter-spacing: 1px;
}
</style>
</head>
<body>
text <span class="title"> text </span> text
<p>text.</p>
<p class="copy">text </p>
</body>
</html>
Рис.2.
Установление пробелов между словами
Изменение отступа между строками
line-height – изменяет междустрочный интервал.
Чтобы получить двойной или тройной интервал, надо присвоить свойству line-height значении 2 или 200%, 3 или 300%. Чтобы уменьшить расстояние между строками, можно использовать отрицательные значения. Так же можно указывать интервал в пикселях.
В
примере 3: в тексте, расположенном внутри
класса copy, двойной интервал между
строками, а внутри тега <cite> - интервал
меньше обычного.
Пример
3:
<html>
<head>
<style type="text/css">
.copy {
font-size: 12px;
line-height: 2;
}
p, cite {
font-size: 12px;
line-height: 14px;
}
</style>
</head>
Задания
к лабораторной работе:
Для выполнения
заданий используйте файл «Цветовая
схема» при задании цветов.
Информация о работе Управление шрифтом и текстом с помощью таблиц стилей CSS