- •1 Подключение таблиц стилей
- •1.1 Встроенные стили
- •1.2 Глобальные таблицы стилей
- •1.3 Внешние таблицы стилей
- •2 Свойства каскадных таблиц стилей
- •2.1 Свойства шрифтов
- •2.2 Управление фоном и передним планом
- •2.3 Форматирование текста
- •2.4 Свойства блоков с обрамлением
- •2.5 Свойства списков
- •2.6 Позиционирование блоков. Слои
- •2.6.1 Координаты и размеры
- •2.6.2 Управление видимостью
Лабораторная работа №2
Создание WEB-страниц c помощью каскадных таблиц стилей CSS
Цель работы: научиться создавать и форматировать HTML-документы с использованием каскадных таблиц стилей CSS (свойства шрифтов, управление цветом и фоном, форматирование текста, позиционирование блоков, свойства списков, слои).
1 Подключение таблиц стилей
CSS (Cascading Style Sheets) - каскадные таблицы стилей - мощное средство форматирования Web-страниц. С помощью таблиц стилей автор может определить начертание и размер шрифта, цвет фона и переднего плана, фоновое изображение, размеры границ и другие характеристики HTML-элементов. Таблицы стилей не только позволяют управлять отображением стандартных элементов, но и дают возможность определять новые элементы и накладывать ограничения на их характеристики. Правила форматирования имеют иерархическую, или "каскадную", структуру и позволяют сочетать установки браузера, используемые по умолчанию, с непосредственными инструкциями, задаваемыми автором документа и пользователем, работающим с Web-страницей. Изменив содержимое одного файла с листами стилей, можно изменять внешний вид целого набора документов.
CSS - это совокупность параметров, объединенных в правила (rule), при помощи которых форматируется (оформляется и отображается) текст. Каждое из правил может применяться в указанном разработчиком месте к заданным элементам. В правиле задается объект, к которому стиль применяется, а затем следует собственно описание составляющих стиль компонентов: цвет и размер шрифта, выравнивание и т.п.
Где размещать информацию о стилях, решает разработчик. Если стилей немного, и они применяются к большому числу страниц, то имеет смысл вынести стили в отдельный файл. В этом случае стили называются внешними. Для стилей CSS файл имеет расширение *.css. Информация о внешних файлах располагается в документе в элементе <meta> или <link>.
Если каждая страница индивидуальна, то стили располагают в специализированном элементе <style>, который размещается в начале документа в разделе <head>. Такие таблицы иногда называют глобальными, подразумевая, что они относятся ко всему документу.
Когда необходимо отформатировать отдельный элемент, описание стиля можно расположить непосредственно внутри элемента при помощи уже специализированного атрибута style. Такие стили называют встроенными (inline), или внедренными.
Чем ближе описание стиля находится к элементу, тем более высокий приоритет имеет этот стиль при решении вопроса о выборе конечного правила оформления.
1.1 Встроенные стили
Встроенные стили организуются при помощи атрибута style, которым обладают все оформляемые элементы HTML.
Синтаксис записи самого тега HTML при использовании атрибута style сохраняется, например: <div style="...">
Значением атрибута style является строка, в которой содержится описание правила стиля. Описание стиля осуществляется в соответствии с собственным синтаксисом языка CSS путем перечисления параметров и их значений в виде:
style= "свойство_стиля_1: значение_1; свойство_стиля_2: значение_2;" и т.д.
Параметры в CSS называют свойствами. Значение свойств записывается после двоеточия, а друг от друга свойства отделяются точкой с запятой. Например:
style="color: brown; text-align: right;"
Некоторые свойства могут иметь общее групповое название. Например, font-family, font-size, font-style, font-weight имеют общее групповое имя font. В этом случае для сокращения название каждого свойства можно не указывать, а заменить общим групповым именем. Значения, соответствующие разным параметрам, следуют в таком случае подряд, без точки с запятой, разделяемые только пробелом. Например, равносильны будут записи
style="font-family: 'Times New Roman'; font-size; 12pt; font-style: italic; font-weight: 400;"
style="font: 'Times New Roman' 12pt italic 400;"
Сохраняется правило, касающееся вложенных кавычек - они должны быть разными. Если значения в таком правиле указываются через запятую, то они относятся к одному свойству и порядок их задания означает приоритет использования. Если не может быть найдено первое значение, то используется второе и т.д. Прежде всего, это относится к font-family, которое задает гарнитуру (тип) шрифтов.