�ݺ�ߣ

CSS (Cascading Style Sheets)

каскадные таблицы стилей

Сравните…

 «голый» HTML  «одежда» из CSS

Определение стиля
 Стиль - это набор параметров
форматирования, который применяется к
элементам веб-страницы. Для текста
можно указать:
 Гарнитуру - название шрифта
 Начертание - нормальное, жирное, курсив,
подчеркнутое
 Кегль – размер шрифта
 Цвет шрифта… 2
…верхний индекс E=MC или нижний индекс Н О и
другие… 2

Стили для блочных элементов

 Блочный элемент –
это, например, абзац, таблица.
 Для них может быть указаны отступы
между границей элемента и внешними
объектами

Это значение “margin” лучше margin
указывать в пикселях

Преимущества стилей

 Позволяют разделить содержимое (контент)
и его оформление (размеры и тип
шрифта, цвета, фоновые рисунки и т.д.)

 Страницы получают единое оформление -
это создает преемственность между
страницами и улучшают его восприятие в
целом

Преимущества стилей (продолжение)
 Централизованное хранение.
Стили, как правило, хранятся в одном или
нескольких специальных файлах *.CSS -
ссылка на них указывается во всех документах
сайта.
 Расширенные возможности.
В отличие от HTML стили имеют гораздо
больше возможностей по оформлению
элементов WEB-страниц. Рамки, цвета,
фоновые картинки – все теперь задаѐтся в
CSS файле

Преимущества стилей (продолжение2)

 Быстрая работа.
При хранении стилей в отдельном
файле, он кэшируется (т.е.
сохраняется на диске у посетителя) и,
при повторном обращении к нему,
извлекается из кеша браузера.

 Уменьшается размер кода и
снижается время загрузки страниц

Способы добавления стилей на
веб-страницу
 Самый распространенный способ - таблица связанных стилей.
 В этом случае стилей располагается в отдельном файле, как
правило, с расширением 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>

Что собой представляет CSS
 Файл CSS – текстовый файл (как и HTML)

Dreamweaver и стили
 Вся работа по созданию стилей мы
будем вести с помощью панели
(палитры) CSS Style (Shift-F11)

В заключение…

 CSS – очень удобная, мощная и
гибкая технология форматирования
HTML – страниц
 Сегодня практически ни один сайт не
обходится без ее использования
(включая сайты построенные на CMS)

�ݺ�ߣ

17. основы css (cascading style sheets)

Recommended

More Related Content

Viewers also liked (20)

Similar to 17. основы css (cascading style sheets) (20)

More from Sergei Dubrov (15)

17. основы css (cascading style sheets)