Задание 2.
Сочетая в одном правиле оба типа группировки (селекторов и объявлений) определите стиль документа посредством одного выражения, напишите HTML-файл (example_2.html), к которому применяется данная запись таблицы стилей, сформируете аналогичный HTML-результат.
h1 {color: gray;}
h2 {color: gray;}
h3 {color: gray;}
h4 {color: gray;}
h5 {color: gray;}
h6 {color: gray;}
h1 {background: white;}
h2 {background: white;}
h3 {background: white;}
h4 {background: white;}
h5 {background: white;}
h6 {background: white;}
Задание 3.
Выполните две свои альтернативные группировки селекторов, чтобы все группы правил оставались эквивалентными, напишите HTML-файл (example_3.html), к которому применяется данная запись таблицы стилей, сформируете аналогичный HTML-результат.
/* группа 1 */
h1 {color: silver; background: white;}
h2 {color: silver; background: gray;}
h3 {color: white; background: gray;}
h4 {color: silver; background: white;}
b {color: gray; background: white;}
/* группа 2 */
/* группа 3 */
Задание 4.
Определите селектор собственного класса. Для этого введите имя класса с предваряющей его точкой (.). Затем откройте определение с помощью фигурной скобки ({). Имя класса может быть любым, но оно должно содержать только буквы и цифры. Напишите шесть любых определений данного класса (в файле example_4.html) и убедитесь, что они разделены точкой с запятой. Завершите правило закрывающейся фигурной скобкой.
Задание 5.
Сопоставьте множественному селектору класса: p.class1.class2 {background: red;} соответствующий HTML-код в файле
example_5.html.
Задание 6.
С помощью CSS определите стиль и вид текста, представленного
на рис. 6, напишите HTML-файл (example_6.html), к которому применяется данная запись таблицы стилей, сформируете аналогичный HTML-результат.
Рис.6. Результат ссылки на таблицу стилей
Задание 7.
Необходимо чтобы все элементы, атрибут class которых имеет значение bold, были выделены полужирным шрифтом, элементы, атрибут class которых имеет значение Italic, были выделены курсивом, а элементы абзаца, имеющие значение silver, получили серебряный фон.
Контрольные вопросы
1. Для чего используются каскадные таблицы стилей?
2. Какими способами таблицы стилей связываются с элементами документа?
3. Каковы основные отличия импортирования от связывания?
4. Каким образом сделать так, чтобы изменялся цвет ссылок только внутри тэга <b>?
Материалы для лабораторной работы взяты со страниц
http://asu.ugatu.ac.ru/library/161/___laboratornaja_rabota_1.pdf
http://www.studfiles.ru/preview/1439240/
Лабораторная работа №4
Фреймы
Цель работы:
Изучение методов разделения окна на фреймы
Длительность 2 часа
Создание и использование фреймов
Окно броузера может быть разделено на несколько фреймов, т.е прямоугольных областей ограеиченных рамками. Каждый фрейм показывает свой документ, как правило, это обычный HTML-документ. Например, можно создать два окна и в одно из них загрузить домашнюю страничку компании IBM, а в другое — домашнюю страничку компании Microsoft.
Для того, чтобы создать фреймы, используются два тега <frameset> и <frame>. Страница, разбитая на два фрейма, может быть описана при помощи HTML следующим образом:
<html>
<frameset rows="50%,50%">
<frame src = "page1.htm" name="frame1">
<frame src = "page2.htm" name="frame2">
</frameset>
</html>
В ярлыке <frameset> указано свойство rows, a rows — это разделение в ряды. Это свойство указывает на то, что два фрейма расположены рядами, друг над другом. Верхний фрейм загружается страницей page1.htlm, а нижний фрейм загружается страницей page2.htlm.
Тег <FRAMESET>
Тег <FRAMESET> - заменяет тег <BODY> и используется для разделения экрана. Имеет закрывающий тег.
Атрибуты
COLS. Делит экран по вертикали. Принимает значения в пикселях, в процентах или просто *. Значение * говорит о том, что конкретный столбец будет занимать всю остальную часть экрана
ROWS. Делит экран по горизонтали. Принимает значения в пикселях, в процентах или просто *. Значение * говорит о том, что конкретная строка будет занимать всю остальную часть экрана
FRAMEBORDER. Определяет наличие рамок, т.е. границ фреймов. Принимает значения "yes" или "no".
BORDER. Определяет ширину рамки в пикселях. В частности при BORDER=0 рамка отсутствует.
BORDERCOLOR. Определяет цвет рамок. По умолчанию (если используется стандартная цветовая схема системы Windows) границы фреймов имеют тусклый, серый оттенок. Но при желании можно выбрать любой другой цвет. При определении цвета можно выбрать как его название, так и числовой эквивалент в системе RGB. Например, BLUE или #0000FF.
В отдельном теге <FRAMESET> имеет смысл использовать только один из атрибутов – COLS или ROWS. Это означает, что фреймовая структура будет состоять или только из столбцов, или только из строк. Чтобы создать строки внутри столбцов или столбцы внутри строк, вам потребуется вложенные контейнеры <FRAMESET>…</FRAMESET>
Тег <FRAME>
Тег <FRAME>, помещенный в контейнер <FRAMESET>…</FRAMESET>, определяет, что именно должно отображаться в конкретном фрейме. Не имеет закрывающего тега.
Атрибуты
SRC. Определяет URL, связанный с конкретным фреймом.
MARGINWIDTH. Определяет расстояние между содержимым фрейма и его границами справа и слева.
MARGINHEIGHT. Определяет расстояние между содержимым фрейма и его границами сверху и снизу.
SCROLLING. Определяет присутствие в окне фрейма полосы прокрутки. Может принимать значения "yes", "no" и "auto"(по умолчанию).
NORESIZE. Определяет границы фрейма как "жестко закрепленные" и не позволяет пользователю изменить размеры окна фрейма. Причем фиксируются размеры всех фреймов, имеющих с закрепленным общую границу.
FRAMEBORDER, BORDER, BORDERCOLOR. Эти атрибуты связаны с рамками и аналогичны таким же в теге <FRAMESET>.
NAME. Определяет имя окна фрейма. Единственный атрибут, не влияющий на внешний вид фрейма. Позволяет контролировать процесс загрузки фреймов. Если окно фрейма имеет уникальное имя, то к нему можно непосредственно обратиться из других фреймов. Присваивая имена окнам фреймов, надо помнить об одном ограничении: имя не должно начинаться с символа подчеркивания "_", иначе оно будет игнорироваться. Так как с этого символа начинаются некоторые служебные имена.