Внешний (ссылка на таблицу стилей)

Практическая работа№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-стили различными способами.