Автор работы: Пользователь скрыл имя, 27 Декабря 2011 в 22:18, лабораторная работа
Цель работы: изучить основы управления шрифтом и текстом с помощью таблиц стилей CSS, освоить практические навыки по использованию свойств шрифта и текста на web-странице.
Лабораторная работа №6
Управление
шрифтом и текстом
с помощью таблиц стилей
CSS
Цель
работы: изучить основы управления шрифтом
и текстом с помощью таблиц стилей CSS, освоить
практические навыки по использованию
свойств шрифта и текста на web-странице.
I.
Управление шрифтом
Оформление – один из самых мощных способов донести идеи создателя сайта до посетителя. Правильно оформленный текст позволяет читателю наиболее быстро разобраться в содержании сайта.
Шрифт – неотъемлемая часть любого документа. Такие эффекты как курсив или полужирное начертание, позволяют дизайнерам выделить важные места в документе и обратить на них внимание посетителя.
На web-страницах с помощью CSS можно просто менять тип шрифта или придавать ему курсив или полужирное начертание, как в случае с HTML-тегами. Таблицы стилей позволяют задавать общий тип шрифта, устанавливать различную толщину букв, тип курсива и размер шрифта, используя стандартные обозначения, заимствованные из области книгопечатания.
Семейство
шрифтов (font family) – это набор шрифтов с
похожими характеристиками. В web существует
пять основных типов шрифта (таблица 1).
Таблица 1
Типы шрифта
| Тип шрифта | Пример | Характеристика шрифта |
| serif | Times New Roman | На концах линий, составляющих буквы, есть маленькие черточки (засечки). Такое написание позволяет выделять отдельные буквы. Этот тип подходит для текста предназначенного для распечатки. На экране буквы будут не ясными, если размер шрифта маленький. |
| sans-serif | Arial | Буквы данного шрифта не имеют засечек. И хотя символы sans-serif менее отчетливы, они больше подходят для текстов, отображаемых на экране и набранных шрифтом меньшего размера. |
| monospace | Courier New | Все символы этого типа шрифта одинаковы по ширине. Например буква «i» занимает столько же места сколько и буква «m» по ширине. Этот шрифт подходит для текстов, в которых важна каждая буква, например для программных кодов. |
| cursive | Monotype Corsiva | Имитирует письмо от руки, его лучше использовать для украшения текста или смысловых выделений. |
| fantasy | Webdings
(Webdings) |
Лучше использовать в качестве украшений |
Определение типа шрифта
1. Введите название свойства и поставьте двоеточие:
font family:
2. Укажите название шрифта, который будете использовать:
Georgia
3. Можно написать несколько типов шрифтов через запятую:
, “Times New Roman”, palatino
4. После последней запятой укажите семейство шрифтов, к которому относиться используемый шрифт:
,
serif;
Из всех перечисленных в списке шрифтов браузер выбирает первый. Если этот тип шрифта ему недоступен, браузер просматривает список далее до тех пор, пока не найдет шрифт, имеющийся на компьютере пользователя. Если не находит подходящего шрифта, используется шрифт, установленный в браузере посетителя по умолчанию. Если вы определите семейство шрифта, браузер найдет максимально похожий шрифт.
Названия
шрифтов, состоящие из нескольких слов,
нужно заключать в кавычки, например:
“Times New Roman”
Пример
1
<html>
<head>
<style type="text/css">
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
}
h3 {
font-family: "Courier New", Courier, Monaco, monospace;
}
.copy {
font-family: Arial, Helvetica, Geneva, sans-serif;
}
</style>
</head>
<body>
<br>
<h1> Введение </h1>
<p>Электронная коммерция …...</p>
<h3> Инструментарий Microsoft и электронная коммерция </h3>
<p class="copy"> Быстрое развитие коммуникационных технологий....
</p>
</body>
</html>
Рис.1.
Определение типов шрифта
Определение размера шрифта
Обычно
шрифт устанавливается с
Основные проблемы, возникающие при использовании тега <font>, заключаются в следующем:
CSS
решает обе эти проблемы. Не добавляя дополнительных
тегов, можно управлять видом текста, заключенного
в тег, внося изменения лишь в одну строку
документа.
В
HTML есть семь различных размеров шрифта,
но все они связаны с размером, установленным
по умолчанию посетителем страницы. С
помощью CSS можно изменять размер текста
на экране несколькими способами, включая
традиционное изменение размера в точках,
проценты, абсолютный размер и даже размер,
зависящий от окружающего текста.
Алгоритм:
1. Введите font-size и поставьте двоеточие:
font-size:
2. Укажите размер шрифта одним из следующих способов:
-
в единицах длинны –
-
используя абсолютное
- smaller и larger описывает размер по отношению к размеру родительского элемента;
-
в процентах, определяющих размер
шрифта пропорционально размеру шрифта
родительского элемента (например 75%).
Пиксели и пункты:
Аббревиатура pt обозначает пункт. Это один из способов указания размеров шрифта. Обычно используется шрифт 12pt, который удобен для большинства читателей. Лучше измерять шрифт в пикселях (px).Пиксели не всегда надежны, но результат их использования более точен.
Между
пикселями и пунктами не существует
однозначного соответствия, но можно
считать, что 12px примерно совпадает
с 12pt.
Пример
2
<html>
<head>
<style type="text/css">
.copy {
font-size: 12px;
}
blockquote {
font-size: 2em;
}
h3 {
font-size: large;
}
</style>
</head>
<body>
<br>
<h3> Введение </h3>
<p
class="copy">Электронная
независимо от того, ориентируетесь
ли вы на конечного покупателя
или работаете с деловыми
<blockquote> Инструментарий <br> Microsoft <br> и электронная коммерция <br>
</blockquote>
</body>
</html>
Рис.2. Установление
размера шрифта
Курсив
Часто путают два типа стилей – курсив (italic) и наклонный (oblique). Курсивом называется более декоративный тип шрифта с наклоном вправо. Наклонный шрифт представляет собой обычный шрифт, без каких-либо стилизованных украшений, с небольшим наклоном (рис.3).
Рис.3. Курсивное
и наклонное начертание
С
помощью элемента font-style можно выделить
текст курсивом, сделать шрифт наклонным
или оставить его начертание обычным (normal).
Пример
3
<html>
<head>
<style type="text/css">
.booktitle {
font-family: "Times New Roman", Times, serif;
font-style: italic;
}
blockquote {
font-family: Arial, Helvetica, serif;
font-style: italic;
}
</style>
</head>
<body>
<br>
<h1 class="booktitle"> Введение </h1>
<p><i>Электронная коммерция- </i> является одним …...</p>
<blockquote>
<p>Инструментарий </p>
<p>Microsoft </p>
<p>и электронная коммерция </p>
</blockquote>
</body>
</html>
Рис.4. Использование
курсива в тексте
В
примере 3 класс booktitle и все абзацы
в <blockquote> выделены курсивом. Заголовок
использует шрифт serif, поэтому мы
видим курсивный шрифт, блокнот использует
шрифт sans-serif, который является наклонным,
даже если вы его задаете как курсив.
Толщина шрифта
В
стандартном HTML шрифт может быть либо
полужирным, либо обычным. CSS позволяет
установить несколько уровней «жирности»
шрифта, используя способность многих
шрифтов иметь разную толщину.
Пример
4
<html>
<head>
<style type="text/css">
.bolder {
font-weight: bolder;
}
p i {
font-weight: normal;
}
</style>
Информация о работе Управление шрифтом и текстом с помощью таблиц стилей CSS