Лабораторная работа№8 Cascading Style Sheets/Каскадные таблицы стилей. Цвет и фон
Цель работы: получить навыки задания цвета и фона элементов с помощью каскадных таблиц стилей.
Задачи:
научиться применять правила CSS к Html-документу;
научиться использовать различные способы для задания цвета и фона.
Порядок выполнения работы
Раздел 1. Способы применения правила css к Html-документу
Инструкции на CSS необходимо записывать следующим образом:
Например, зададим красный цвет фона web-страницы:
body {background-color: #FF0000;}
Есть три способа применить правила CSS к HTML-документу. Последовательно рассмотрим каждый из них.
Метод 1: Инлайн/In-line (атрибут style)
Можно применять CSS к HTML с помощью HTML-атрибута style.
Задание 8.1
Наберите в блокноте следующий текст:
<html>
<head>
<title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html>
Сохраните документ как пример8_1.html.
Метод 2: Внутренний (тэг style)
Второй способ вставки CSS-кодов - HTML-тэг <style>.
Задание 8.2.
Наберите в блокноте следующий текст:
<html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
Сохраните документ как пример8_2.html.
Метод 3: Внешний (ссылка на таблицу стилей)
Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей. В данном учебнике мы будем использовать именно этот метод во всех примерах.
Внешняя таблица стилей это просто текстовый файл с расширением .css. Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.
Чтобы создать ссылку из HTML-документа (default.htm) на таблицу стилей (style.css ) следует в заголовке документа указать следующую строку код HTML-кода:
<link rel="stylesheet" type="text/css" href="fail.css" />
Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла. Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов.
Это поможет сэкономить время и силы. Если вы, например, хотите изменить цвет фона web-сайта из 100 страниц, таблица стилей избавит вас от необходимости вручную изменять все сто HTML-документов. Используя CSS, эти изменения можно сделать за несколько секунд, просто изменив один код в центральной таблице стилей.
Задание 8.3
Откройте блокнот и создайте два файла - HTML-файл и CSS-файл - такого содержания:
default.htm:
<html>
<head>
<title>Мой документ</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Моя первая таблица стилей</h1>
</body>
</html>
style.css:
body {
background-color: #FF0000;
}
Разместите эти файлы в одной папке. Не забудьте сохранить файлы с правильными расширениями (".css" и ".htm")