Внешняя стилевая спецификация
Внешний стиль – наиболее абстрактный и мощный метод. Используется для определения стиля отдельно в другом документе. Обычно с помощью этого метода определяют стиль всего сайта.
Внешняя стилевая спецификация является обычным текстовым файлом, содержащим описание оформления для HTML-элементов и классов и имеющим расширение css.
Например, создаем файл “style.css”, где определены следующие стили:
body {background-color:”#ffff00”; color:”#000000”;}
h1 {font-size:”24pt”; text-align:”center”;}
p {font-size:”12pt”; font-family:”arial”;}
HTML-документ, использующий такую стилевую спецификацию, должен иметь на нее ссылку. Такая ссылка реализуется при помощи элемента <link>, который располагается в элементе <head>:
<link rel=”stylesheet” href="style.css" type=”text/css”>
Файлы стилевых спецификаций могут располагаться где угодно, но лучше размещать их в специально созданном для этого каталоге.
Задание 2
При изучении раздела «Форматирование текста в HTML-документах» Вы создали несколько страниц сайта MyHouse.ru. В том числе у Вас должны быть созданы web-страницы:
proekt_townhouse.html,
proekt_D-152-1D.html,
proekt_H-173-1P.html,
proekt_R-189-1P.html.
У всех заголовков страниц и аннотаций удалите из HTML-кода страниц все атрибуты, связанные с форматированием текста (параметры абзаца и параметры шрифта);
Создайте текстовый файл style.css, в котором опишите стилевые спецификации заголовка, текстовых абзацев, шрифта.
Для фона документа задайте цвет слоновой кости FFFFF0;
Для заголовка с названием страницы: имя шрифта «Tahoma», цвет шрифта 000080, размер шрифта – 18pt, выравнивание текста – по левому краю;
Для заголовков «Аннотация», «Материалы», «Цена за проект», «Планы», «Фасады»: имя шрифта «Tahoma», цвет шрифта «navy», размер шрифта – 14pt; выравнивание – по ширине.
Для аннотаций: имя шрифта «Arial», цвет шрифта «black», размер шрифта – 10pt; выравнивание – по левому краю.
Создайте папку CSS и сохраните в ней файл style.css;
Свяжите файл с описанием стилевых спецификаций style.css со всеми четырьмя страницами.
Формат записи:
<link rel="stylesheet" href="style.css" type="text/css">.
Внедренные стилевые таблицы
Вторым вариантом использования стилевых спецификаций является их внедрение в документ. Для этого в заголовок документа (в теге<head>) нужно поместить теги <style> и </style>, а внутри этой пары тегов ввести стилевые правила.
Например:
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<style>
h1 {color: “blue”, font-size:”18p”t; text-align:”center”}
p {color:”#0000FF”; font-size:”13pt”}
</style>
</head>
Задание 3
Откройте файл справочника «Sprav_CSS.doc». Найдите раздел «Свойства списков» и раздел. Ознакомьтесь со стилевыми свойствами списков.
Для страниц проектов оформите список «Материалы», используя внедренные стилевые таблицы. Для этого:
В HTML-код каждого файла добавьте тег <style> и </style>, в котором опишите стилевые спецификации списка:цвет шрифта 008000, имя шрифта «Tahoma», размер шрифта – 10pt, начертание – полужирное, в качестве маркера используйте изображение spisok_1.GIF, который находится в папке library/images, выравнивание текста – по левому краю.
Сохраните файл.
Проверьте работоспособность внедренной стилевой таблицы. Результат на рис. 1.
Рис. 1. Использование изображения в качестве маркера списка