Лабораторная «Использование сss 1. откройте text»,
Проектирование и разработка интерфейсов пользователя

Использование СSS 1. Откройте text.htm, полученный в результате предыдущей работы. 2. Создайте в той же папке стилевой файл mystyle.css, подключите его к веб-странице и определите стили оформления, перечисленные в следующих пунктах. Для получения дополнительной справочной информации по CSS используйте Интернет, например, сайт css.manual.ru. 3. Задайте свои цвета фона и текста. Текст должен хорошо читаться на выбранном фоне. 4. Определите цвет заголовков (H1, H2), отличающийся от цвета основного текста. Заголовки H2 должны также выделяться фоном, причем фон должен быть темный, а буквы – светлые. Можно добавить внутренний отступ (padding) в 5 пикселей. 5. Определите класс formula, применимый как к абзацам (P), так и к отдельным словам (SPAN), и задайте для него выравнивание по центру; жирный шрифт; курсив. Используя этот класс, выделите абзацы с формулами. 6. Определите класс definition, применимый только к абзацам (P), и задайте для него: рамку толщиной в 1 пиксель; внутренний отступ в 10 пикселей. Используя этот класс, выделите два абзаца с определениями. 7. Скопируйте на свой компьютер каталог CSS. Откройте файл cats.htm. Все последующие задания нужно выполнять с помощью CSS. 8. Установите для тела страницы бледно-розовый фон (цвет #FFEEEE) и шрифт Georgia, а если его нет – любой шрифт с засечками (serif). 9. Для заголовков H1 и H2 определите шрифт Arial, если его нет – Helvetica, а если нет их обоих, то любой рубленый шрифт (sans-serif). 10. Для заголовка H1 задайте фоновый рисунок cat.png из подкаталога images (без повторения). 11. Для заголовков H2 определите темно-красный цвет (#800000). 12. Создайте класс оформления latin для выделения слов и выражений на латинском языке: курсив, тёмно-красный цвет. Выделите в тексте все латинские слова с помощью этого стиля. 13. Установите для всех абзацев отступ (красную строку) 30 пикселей. 14. Создайте новый стиль оформления абзацев – author: курсивный шрифт, без абзацного отступа. Выделите этим стилем имена и фамилии авторов цитат. 15. Создайте стиль оформления абзацев с цитатами с именем quote: а) фон – светло-жёлтый (#FEFEE2); б) абзацного отступа нет; в) ширина 50% от ширины окна браузера; г) внешние отступы: сверху – 0, справа и слева по 30 пикселей, снизу – 10 пикселей; д) рамка шириной 1 пиксель, точечная (dotted), черного цвета; е) внутренние отступы 10 пикселей. 16. Найдите в Интернете информацию про авторов цитат и сделайте их имена ссылками на соответствующие страницы. 17. Установите для ссылок, которые находятся внутри абзаца стиля author, красный цвет при наведении мыши.