3. Определение стиля
Стиль - это набор параметров
форматирования, который применяется к
элементам веб-страницы. Для текста
можно указать:
Гарнитуру - название шрифта
Начертание - нормальное, жирное, курсив,
подчеркнутое
Кегль – размер шрифта
Цвет шрифта… 2
…верхний индекс E=MC или нижний индекс Н О и
другие… 2
4. Стили для блочных элементов
Блочный элемент –
это, например, абзац, таблица.
Для них может быть указаны отступы
между границей элемента и внешними
объектами
Это значение “margin” лучше margin
указывать в пикселях
5. Преимущества стилей
Позволяют разделить содержимое (контент)
и его оформление (размеры и тип
шрифта, цвета, фоновые рисунки и т.д.)
Страницы получают единое оформление -
это создает преемственность между
страницами и улучшают его восприятие в
целом
6. Преимущества стилей (продолжение)
Централизованное хранение.
Стили, как правило, хранятся в одном или
нескольких специальных файлах *.CSS -
ссылка на них указывается во всех документах
сайта.
Расширенные возможности.
В отличие от HTML стили имеют гораздо
больше возможностей по оформлению
элементов WEB-страниц. Рамки, цвета,
фоновые картинки – все теперь задаѐтся в
CSS файле
7. Преимущества стилей (продолжение2)
Быстрая работа.
При хранении стилей в отдельном
файле, он кэшируется (т.е.
сохраняется на диске у посетителя) и,
при повторном обращении к нему,
извлекается из кеша браузера.
Уменьшается размер кода и
снижается время загрузки страниц
8. Способы добавления стилей на
веб-страницу
Самый распространенный способ - таблица связанных стилей.
В этом случае стилей располагается в отдельном файле, как
правило, с расширением css, а для связывания документа с этим
файлом применяется тег <LINK>. Данный тег помещается в
контейнер <HEAD>, как показано в примере
Подключение таблицы связанных стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> Относительная ссылка
<link rel="stylesheet" type="text/css" href="mysite.css">
<link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css">
</head>
Абсолютная ссылка
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html>
10. Dreamweaver и стили
Вся работа по созданию стилей мы
будем вести с помощью панели
(палитры) CSS Style (Shift-F11)
11. В заключение…
CSS – очень удобная, мощная и
гибкая технология форматирования
HTML – страниц
Сегодня практически ни один сайт не
обходится без ее использования
(включая сайты построенные на CMS)