Техника Web-дизайна для студента
Лей") программа напоминает о наличии типовых стилей, к которым можно обратиться, щелкнув по гиперссылке. Применение стиля форматирования или отказ от его применения
Для применения стиля к целому абзацу курсор должен быть установлен в любом месте абзаца. Если требуется применить стиль к определенной части абзаца или одновременно к нескольким абзацам, то они предварительно должны быть выделены. Имя стиля выбирается из списка стилей Style (Стиль) на панели свойств Properties (Свойства) или из списка стилей в меню Text | CSS Styles (Текст | CSS стили). Стили можно применять не только к тексту, но и к другим объектам, например рисункам. Для отказа от применения стиля нужно выбрать команду None (Не применять) списка стилей одним из вышеприведенных способов.
Пример создания текстового блока
Приступим к созданию нового HTML-документа.
□ Одним из способов (см. раздел 7.8.1) откроем диалоговое окно New CSS Style (Создать CSS стиль). В диалоговом окне установим переключатель Selector Туре (Выбор типа) в положение Class (can apply to any tag) (Класс (может применяться к
любой метке)), переключатель DeFinE In (Определить в) в положение This Document Only (Только этот документ). В строку Name (Имя) впишем имя стиля, например, "style 1".
О После нажатия ОК, откроется диалоговое окно CSS Style definition for. style! (Определение стиля для. style!). Воспользуемся категорией Туре (Текст), выбрав в списке Size (Размер) значение 14, а в списке Weight (Толщина) — 600. В категории Background (Фон) раскроем палитру Background Color (Цвет фона) и выберем желтый цвет. Перейдем в категорию Box (Прямоугольный контейнер). В полях Width (Ширина) и Height (Высота) установим ширину (300 рх) и высоту (70 рх) блока, а в группе параметров Padding (Отступ) зададим отступы между границами блока и его содержимым на 10 рх, поместив это значение в строку Тор (флажок Same for All (Одинаковые для всех) должен быть установлен). Перейдем в категорию Border (Рамка). В группе параметров Style (Стиль рамки) выберем из списка значение solid, в группе Width (Толщина рамки) — medium и в группе Color (Цвет) укажем в палитре синий цвет. В категории Positioning (Позиционирование) и в списке Туре (Тип) выберем значение absolute, в списке Overflow (Переполнение) — auto. В группе параметров Placement (Размещение) установим Left (Слева) — 20, Тор (Сверху) — 20. Нажав кнопку ОК, в визуальном режиме получим заготовку блока, готовую для заполнения.
О В качестве метки контейнера блока используется метка абзаца <р>. После щелчка мышью внутри блока и появления мигающего Курсора введем СЛедуЮЩИЙ текст: Этот текст
Оформлен в виде отдельного блока, размеры которого 300 х 70 рх. К блоку применено абсолютное позиционирование, он имеет фоновую заливку, рамку и полосу прокрутки. Все это осуществлено С ПОМОЩЬЮ CSS. Применим К тексту форматирование по ширине, нажав для этого кнопку Justify (По ширине) на панели свойств Properties (Свойства).
Текст полученного документа представлен в листинге 7.15.
Листинг 7.15. Создание текстового блока с использованием свойств CSS
<html>
<head>
<title>TeKCTOBblfi 6nOK</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
.stylel {
Font-size: 14px; font-weight: 600; background-color: #FFFF00; padding: 10px; height: 70px; width: ЗООрх;
Border: medium solid #0000FF;
Position: absolute;
Left: 20px;
Top: 20px;
Overflow: auto;
}
—>
</style>
</head>
<body>
<p class="stylel">3TOT текст... </p>
</body>
</html>
|
Рис. 7.23. Вид текстового блока в окне браузера |
Для просмотра документа в браузере нажмем <F12>. На рис. 7.23 показан вид блока в окне браузера.
В текстовый блок, созданный путем применения стилей к метке абзаца <р>, можно поместить и рисунок, сохранив все параметры блока.
□ В визуальном режиме установим курсор перед текстом и дадим команду меню Insert | Image (Вставка | Рисунок). В открывшемся диалоговом окне выберем имя файла рисунка. Если, начиная работу над документом, мы указали, к какому сайту он относится, то после нажатия ОК нам будет предложено скопировать файл рисунка в папку сайта, с чем нужно согласиться.
О Вставленный рисунок выделен, следовательно, панель свойств Properties (Свойства) содержит свойства рисунка. Панель следует раскрыть до полного размера, щелкнув по треугольной стрелке в правом нижнем углу. В списке Align (Выравнивание) выберем left, в поле Н Space (Отступ по горизонтали) введем значение 4.
