Внешний (ссылка на таблицу стилей)
Практическая работа№12-13
Каскадные таблицы стилей (CSS)
Применение CSS к HTML-документу
Цель работы: Научиться структурировать и форматировать Web-страницы.
CSS - это язык стилей, определяющий отображение HTML-документов. HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого. Он работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами. CSS, на сегодняшний день, поддерживается всеми браузерами.
Преимущества применения CSS:
- управление отображением множества документов с помощью одной таблицы стилей;
- более точный контроль над внешним видом страниц;
- различные представления для разных носителей информации (экран, печать, и т.д.);
- сложная и проработанная техника дизайна.
Есть три способа применить правила CSS к HTML-документу:
1.Встраивание или In-line (атрибут style)
Можно применять CSS к HTML с помощью HTML-атрибута style. Рассмотрим пример создания фона красного цвета.
<html> <head> <title>Страница с CSS</title> </head> <body style="background-color: #FF0000;"> <p>Это страница с красным фоном </p> </body></html>
Внутренний (тэг style)
Второй способ вставки CSS-кодов - HTML-тэг <style>. Пример,
<html> <head> <title> Страница с CSS </title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p> Это страница с красным фоном </p> </body></html>
Внешний (ссылка на таблицу стилей)
Это рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей. В данном пособии будет использоваться именно этот метод во всех примерах.
Внешняя таблица стилей это просто текстовый файл с расширением .css. Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.
Например, таблица стилей называется style.css и находится в папке style. Это можно проиллюстрировать так:
Чтобы создать ссылку из HTML-документа (default.htm) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода:
Обратите внимание, что путь к таблице стилей указан атрибутом href.
Эту строку кода нужно вставлять в разделе head HTML, то есть между тэгами <head> и </head>. Например, так:
<html> <head> <title> Страница с CSS </title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> ...Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.
Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов.
Пример применения CSS
Откройте Блокнот и создайте два файла - HTML-файл с именем default.html и CSS-файл - style.css следующего содержания:
| default.html | style.css |
| <html> <head> <title> Страница с CSS </title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Моя первая таблица стилей</h1> </body></html> | body { background-color: #FF0000;} |
Разместите эти файлы в одной папке. Не забудьте сохранить файлы с правильными расширениями (".css" и ".html").
Контрольные вопросы:
1. Для чего применяют CSS?
2. Как применить правила CSS к HTML - документу?
3. Какой способ наиболее часто применяется и почему?
4. Как создать CSS - документ?
Задание для самоконтроля:
Создайте три документа и примените к ним CSS-стили различными способами.