Интернет-технологии
Лабораторная работа
Таблицы стилей (CSS)
1. Что такое таблицы стилей
СSS (Cascading Style Sheets - Каскадные Таблицы Стилей) - это спецификация, определяющая набор свойств для описания внешнего вида HTML документов.
Примеры содержатся в каталоге «examples».
Пример 1:
<FONT face=Arial color=red ><P>Текст</P></FONT>
Аналогичного результата можно достигнуть с помощью следующего стилевого правила:
P {color:red; font-family:Arial;} /* Комментарий */
Таблица стилей состоит из стилевых правил. Каждое стилевое правило состоит из двух основных частей: селектора ('Р') и определения ('color:red; font-family:Arial;'). Определение записывается в фигурных скобках {} и содержит одно или несколько свойств, которые разделяются точкой с запятой ‘;’. Свойство состоит из двух частей: имени свойства (или просто свойства) ('color') и значения ('red'), которые разделяются двоеточием.
Селектор предназначен для связи стилевого правила с элементом HTML-документа.
Возможно использование комментариев как в языке Си (/* ... */). Комментарии можно использовать внутри определения, например (P {color:red; /* font-family:Arial; */ }), можно комментировать стилевое правило целиком.
2. Способы включения стилей в документ HTML
Можно выделить три способа включения стилей в документ.
Встроенные стили (in-line стили, встроенные в определенный элемент). Внутренние стили (встроенные в определенный документ). Внешние стили (которые могут использоваться в нескольких документах).Встроенные стили
Использование встроенных стилей принципиально ничем не отличается от использования атрибутов элементов HTML. Встроенный стиль задается для конкретного элемента с помощью атрибута STYLE.
Пример 2.1 (2_1.html):
<P style="color:red; font-family:Arial;">Текст</P>
При таком задании стилей в атрибуте STYLE указывается только определение правила без селектора.
Встроенные стили, как правило, используются в том случае, когда необходимо задать определенному элементу стиль, существующий в спецификации CSS но не реализованный в HTML.
Внутренние стили
Внутренние стили задают вид элементов для одного документа. В этом случае используется элемент ‘STYLE’, который размещается в секции HEAD.
Пример 2.2:
(стилевое правило применяется ко всем параграфам в данном документе):
<HEAD>
<STYLE type="text/css">
P {color:red; font-family:Arial;}
</STYLE>
</HEAD>
<BODY>
<P>Текст 1
<P>Текст 2
</BODY>
Синтаксис элемента STYLE (style. txt):
<STYLE type="text/css" media=тип устройства>
стилевые правила
</STYLE>
Оба атрибута являются необязательными, но рекомендуется использовать атрибут “type” со значением "text/css".
тип устройства :=
screen (экран компьютера) |
print (принтер) |
projection (проектор) |
handheld (карманное устройство) |
all (все устройства) и т. д.
Реально используются только screen и print. Таким образом, возможно использование различных стилей для просмотра и печати документа.
Элемент ‘STYLE’ может встречаться несколько раз в документе.
Внешние стили
Внешние стили используются для придания нескольким документам единого стиля. Внешняя таблица стилей хранится в отдельном файле, как правило, с расширением. CSS Данный подход используется наиболее часто и позволяет создать сайт, выдержанный в едином стиле.
Пример:
Файл style. css :
P {color:red; font-family:Arial;}
Документ 2_3.html:
<HEAD>
<LINK href="style. css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P>Текст 1
<P>Текст 2
</BODY>
С помощью элемента LINK осуществляется привязка к внешней таблице стилей. Элемент LINK может встречаться несколько раз.
Синтаксис элемента LINK (link. txt):
<LINK rel="stylesheet" type="text/css" href=URI таблицы стилей media=тип устройства>
Атрибут media является необязательным.
3. Классы
Для гибкости работы со стилями в HTML существует атрибут 'CLASS'.
Пример CSS:
P. gray_p {color: gray;}
...
Пример HTML:
<P class=gray_p>Серый текст</P>
Стилевое правило будет применяться ко всем элементам P, у которых определен атрибут class=gray_p.
В качестве разделителя имени элемента и имени класса в стилевом правиле используется точка.
Можно определить класс для различных типов элементов. При этом в селекторе опускается имя элемента.
Пример CSS:
.green {color:green;}
...
Пример HTML:
<P class=green>Текст</P>
<H3 class=green>Заголовок</H3>
4. Использование стилей
4.1. Шкала измерения числовых величин
Используется для длин, отступов, размеров шрифта и других числовых величин.
Абсолютные значения:
- in: inches (дюймы) — 1in = 2.54cm. cm: centimeters (сантиметры). mm: millimeters (миллиметры). pt: points (пункты) — 1 pt = 1/72nd of 1in. pc: picas (пики) — 1pc = 12pt. px: pixel units (точки, пикселы) — 1px = 0.75pt.
Примеры:
p { font-size: 0.5in }
p { font-size: 14pt }
p { font-size: 20px }
Относительные значения:
- em: значение свойства 'font-size' текущего шрифта. ex: ширина буквы 'x' текущего шрифта.
Примеры:
h1 { font-size: 1.2em } – размер шрифта для заголовка 1 уровня должен быть на 20% больше, чем стандартный размер шрифта для заголовка 1 уровня.
h1 { font-size: 1.2ex } – размер шрифта для заголовка 1 уровня должен быть на 20% больше, чем ширина буквы 'x' текущего шрифта
4.2. Границы и отступы
Рис. 1. Расположение внешних отступов (margin), границ (border) и внутренних отступов (padding).
Пример задания внешних отступов:
p {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; }
Для объединения значений свойств может быть использовано свойство margin:
margin: верхнее правое нижнее левое (обход сверху по часовой стрелке).
p { margin: 1em 2em 3em 2em } /* аналогично предыдущему примеру */
p { margin: 2em } /* все границы 2em */
p { margin: 1em 2em } /* верхняя и нижняя = 1em, правая и левая = 2em */
Внутренние отступы задаются аналогично, вместо «margin» используется «padding».
Ширина границы задается с помощью свойств 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'.
Каждое свойство может принимать следующие значения:
- thin (тонкая граница) medium (средняя граница) thick (толстая граница) числовое значение
Свойство 'border-width' позволяет задавать 4 значения: верхнее правое нижнее левое.
Пример:
p { border-width: thin thick medium 20pt }
Цвет границы задается с помощью свойств 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'. Свойство 'border-color' позволяет задавать 4 значения.
Тип границы задается с помощью свойств 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'.
Каждое свойство может принимать следующие значения:
- none – Граница отсутствует. В результате вычисленное значение свойства 'border-width' будет равно нулю. dotted – Граница отображается пунктирной линией. dashed – Граница отображается штрих-пунктирной линией. solid – Граница отображается сплошной линией. double – Граница отображается двумя непрерывными линиями. Сумма значений ширины двух линий и расстояния между ними равна значению свойства 'border-width'. groove – Граница отображается вдавленной линией. ridge – Противоположно значению 'groove': граница отображается выпуклой линией. inset – Весь блок выглядит как бы вдавленным. outset – Противоположно значению 'inset': весь блок выглядит как бы выпуклым.
Свойство 'border-style' позволяет задавать 4 значения.
Свойства 'border-top', 'border-bottom', 'border-right', 'border-left' позволяют задавать параметры границы в виде border-top: толщина тип цвет;
Свойство 'border' позволяет задавать толщину, тип и цвет для всех границ.
Пример:
p { border: thick ridge green; }
Пример использования отступов и границ: borders. html
4.3. Позиционирование
Свойство 'display' отвечает за отображение элемента.
Основные значения:
- block – создание блочного элемента. inline – создание встроенного (строкового) блока. none – не отображается. Часто используется совместно с JavaScript для скрытия элементов.
Пример: display. html
Свойство 'position' отвечает за схему позиционирования элемента.
Основные значения:
- static – Данный блок является обычным блоком, позиционируемым в соответствии с нормальным потоком (нормальным следованием элементов друг за другом). Свойства 'left' и 'top' не применяются. relative – Положение блока рассчитывается в соответствии с нормальным потоком (оно называется нормальным положением). Затем блок смещается относительно своего нормального положения, применяются свойства 'left' и 'top'. Когда для расположения блока B используется модель относительного позиционирования, тогда положение следующего блока рассчитывается так, как будто блок B не был смещен. absolute – Положение блока (возможно и размер) указывается с помощью свойств 'left', 'right', 'top' и 'bottom'. Они указывают величину смещения относительно контейнера блока. Абсолютно позиционируемые блоки изымаются из нормального потока, они не влияют на размещение последующих элементов. fixed – Положение блока рассчитывается в соответствии с моделью абсолютного позиционирования, а затем он фиксируется относительно некоторого объекта.
Свойства 'top', 'right', 'bottom', 'left' задают смещение элемента при позиционировании.
Пример относительного позиционирования: position_static_relative. html
Свойство 'z-index=число' задает порядок перекрывания элементов при абсолютном позиционировании. Элементы с большим значением находятся ближе, чем элементы с меньшим значением.
Пример абсолютного позиционирования: position_absolute. html
Фиксированное позиционирование похоже на абсолютное. Но фиксированные блоки не перемещаются при прокрутке документа, а абсолютные перемещаются. С помощью фиксированного позиционирования можно создавать эффекты, похожие на фреймы.
Пример фиксированного позиционирования: position_fixed. html
4.4. Перемещаемые объекты
Свойство 'float'. Определяет, будет ли блок перемещен влево, вправо или вообще не будет перемещен. Оно может устанавливаться для элементов, порождающих блоки, не являющиеся абсолютно позиционируемыми. Значения:
- left – Элемент порождает структурный блок, перемещаемый влево. Содержимое выводится вдоль правой стороны блока, начиная с самого верха (за счет свойства 'clear'). Свойство 'display' игнорируется, если ему не присвоено значение 'none'. right – Подобно значению 'left' с той лишь разницей, что содержимое выводится вдоль левой стороны блока, начиная с самого верха. none – Блок не перемещается.
Свойство 'clear'. Определяет, какие стороны блока, порожденного элементом, не могут соседствовать с предшествующим перемещаемым блоком. Значения:
- left – Верхнее поле генерируемого блока увеличивается до тех пор, пока верхний сегмент края его границы не окажется ниже нижнего сегмента внешнего края любого левостороннего перемещаемого блока, который был сгенерирован в исходном документе предыдущим элементом. right – Верхнее поле генерируемого блока увеличивается до тех пор, пока верхний сегмент края его границы не окажется ниже нижнего сегмента внешнего края любого правостороннего перемещаемого блока, который был сгенерирован в исходном документе предыдущим элементом. both – Генерируемый блок помещается ниже всех перемещаемых блоков, которые были сгенерированы в исходном документе предыдущими элементами. none – Никаких ограничений на положение блока относительно перемещаемых объектов не накладывается.
Пример: float. html
Примеры блочной верстки в CoffeeCup (File / New From Theme/Layout)
4.5. Работа с курсорами
Пример: cursor. html
4.6. Загрузка стиля из файла
Пример: load. html
5. Версии стандарта
Версия CSS 1 (level 1) утверждена как стандарт в 1996 году.
Версия CSS 2 утверждена как стандарт в 1998 году.
Версия CSS 2.1 утверждена как черновой стандарт в 2009 году. Является актуальной версией.
Версия CSS 3 разрабатывается. Должна состоять из отдельных модулей, каждый модуль является отдельной рекомендацией. Некоторые модули утверждены как черновые стандарты и частично поддерживаются.
6. Дополнительные материалы
Каталог «standard» содержит стандарты CSS 1 (русский перевод), 2 (частичный русский перевод), и 2.1 (английский). В стандарте 2: selector. html – использование селекторов, cascade. html – алгоритм каскадирования.
Каталог «menu_css» – статья с примером реализации меню только с помощью стилей, без сценариев JavaScript.
Каталог «examples_css3» – статья с примером использования некоторых свойств CSS3.
7. Задание
Создайте несколько html документов. Задайте следующие параметры для всех - цвет фона при помощи 3 различных способов определения стилей.- размер шрифта
- цвет шрифта
- семейство шрифта (например, Arial) Проверьте работоспособность.
