Основы web-технологий

Применение каскадных таблиц стилей (CSS)

2-е издание, исправленное

Храмцов П.Б.
Брик С.А.
Русак А.М.
Сурин А.И.

Национальный Открытый Университет “ИНТУИТ”
2016

2

УДК 004.738.52:004.4
ББК 16
О75
Основы web-технологий / Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И. - M.: Национальный
Открытый Университет “ИНТУИТ”, 2016 (Основы информационных технологий)
ISBN 978-5-94774-648-8

Курс посвящен изучению способов гипертекстовой разметки с применением каскадных таблиц
стилей (Cascade Style Sheets).
Дано описание синтаксиса CSS, варианты размещения описания CSS в теле документа и за его
пределами, подробно разобраны атрибуты CSS для блочных и строчных элементов разметки,
разобраны методы позиционирования элементов разметки при помощи CSS. Изложение материала
опирается на множество примеров.

(c) ООО “ИНТУИТ.РУ”, 2007-2016
(c) Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И., 2007-2016

3

Назначение и применение CSS

Основные понятия CSS, их назначение, определение и использование при
форматировании HTML-документа.

Назначение CSS

Дизайн Web-узлов — это точное размещение компонентов HTML-страниц
относительно друг друга в рабочей области окна браузера.

Недостатки такого определения Web-дизайна очевидны. В нем не учтены ни цвет, ни
форма, ни другие свойства компонентов HTML-страниц. Главное в этом определении
— показать ограниченность возможностей HTML-разметки. Позиционирование
компонентов на странице является одним из самых слабых мест в HTML.

К компонентам страницы относятся: блоки текста, графика и встроенные приложения.
Размер и границы каждого из этих компонентов в рамках HTML-разметки задаются с
разной степенью точности. Размер графики и приложений можно задать с точностью
до пикселя. Размеры текстовых блоков в HTML задать нельзя: они вычисляются
браузером исходя из относительного размера шрифта по умолчанию.

Автор страницы не может заранее определить настройки браузера пользователя, что
существенно ограничивает число вариантов представления информации на странице.

Нельзя сказать, что разработчики браузеров не пытались изменить данную ситуацию. В
ранних версиях браузеров CERN для платформы NEXT и в браузерах WWWC автор
страницы имел возможность переопределять настройки браузера по умолчанию через
HTML-разметку. Но этот подход не получил продолжения в коммерческих продуктах.

Другой способ управления настройками браузера — программирование на JavaScript.
Бурное развитие этого языка позволяет говорить о возможности полного контроля над
процессом отображения HTML-страниц. Недостаток JavaScript — отказ от
декларативного характера разметки и относительно большой объем кода для
переопределения свойств элементов разметки.

Спецификация CSS (Cascading Style Sheets) позволяет остаться в рамках
декларативного характера разметки страницы и полностью контролировать форму
представления элементов HTML-разметки.

Каскадные таблицы стилей призваны разрешить противоречие между точностью
определения размеров картинок и приложений, с одной стороны, и точностью
определения размеров блоков текста и его начертания — с другой.

Таблицы стилей также позволяют определить цвет и начертание текстового фрагмента,
изменять эти параметры внутри текстового блока, выполнять выравнивание текстового
блока относительно других блоков и компонентов страницы.

Наличие подобных возможностей позволяет говорить о CSS как о средстве разделения

4

логической структуры документа и формы его представления. Логическая структура
документа определяется элементами HTML-разметки, в то время как форма
представления каждого из этих элементов задается CSS-описателем элемента.

CSS позволяет полностью переопределить форму представления элемента разметки
по умолчанию. Например, <I>…</I> определяет отображение текста курсивом:

<I>Отобразим текст курсивом</I>

А теперь переопределим стиль отображения для элемента разметки I (ссылка: открыть
- http://old.intuit.ru/department/internet/css/1/example1.htm):

<I STYLE="text-decoration:underline;
   font-style:normal;">
Отобразим текст курсивом 
</I>

Рис. 1.1. 

Этот пример показывает, что привычный стиль отображения элементов может быть
полностью изменен при помощи CSS. В данной технологии HTML-разметка носит
чисто декларативный характер.

Практическое значение CSS для Web-инжиниринга (совокупности технологий
разработки и сопровождения Web-узлов) заключается в том, что процесс создания узла
можно формализовать и представить в виде последовательности действий:

необходимо определиться с номенклатурой страниц, т.е. все страницы
проектируемого Web-узла разбить на типы, например домашняя страница,
навигационные страницы, информационные страницы, коммуникационные
страницы и т.п. У каждого узла этот перечень может быть свой;
для каждого типа страниц требуется разработать определенную логическую
структуру (стандартный набор компонентов страницы);
следует создать навигационную карту узла и форму ее реализации на страницах;
для каждого стандартного компонента страницы нужно разработать стиль его
отображения (CSS-описатель);
теперь остается только рисовать картинки, создавать анимацию, писать
программы, вручную вводить текст и графику или генерировать содержимое
страниц автоматически при обращении к ним.

5

Объяснив таким образом роль и назначение CSS среди многообразия Web-технологий,
мы переходим непосредственно к обсуждению применения каскадных таблиц стилей.

Способы применения CSS

Под способами применения CSS мы в данном разделе понимаем форму
декларирования стиля на HTML-странице и форму связывания описания стиля
отображения элемента разметки с самим элементом. Речь идет о том, где и в какой
форме автор страницы (или дизайнер) описывает стиль, и как и в какой форме на него
ссылается.

Итак, различают четыре способа применения стилей:

переопределение стиля в элементе разметки ;
размещение описания стиля в заголовке документа в элементе STYLE ;
размещение ссылки на внешнее описание через элемент LINK ;
импорт описания стиля в документ.

Переопределение стиля

<H1 STYLE="font-weight:normal;
font-style:italic;
font-size:10pt;">
Заголовок первого уровня
</H1>

Атрибут style можно применить внутри любого элемента разметки. Например, мы
можем через style определить ширину и выравнивание элемента hr (горизонтальное
отчеркивание):

<HR STYLE="width:100px;">

Очевидно, что не все параметры стиля можно установить для конкретного элемента
разметки. О типах элементов и соответствующих параметрах стилей мы поговорим в
разделе “Понятия блочного и строкового элементов“.

Здесь же нужно отметить следующее: стили разработаны в первую очередь для
управления отображением текста. Не следует увлекаться стилями при управлении
отображением нетекстовых элементов HTML-разметки.

Элемент STYLE

Применение элемента STYLE — это основной способ внедрения каскадных таблиц
стилей в ткань HTML-документа. Помимо управления отображением элементов
разметки, элемент STYLE позволяет описывать стилевые свойства элементов, которые

6