Лабораторная работа №3. Применение каскадных таблиц стилей css

1. Изменить с помощью каскадных таблиц стилей html-документ, созданный в лабораторной работе №2. Все элементы форматирования должны быть созданы средствами CSS. Использовать три способа определения каскадных таблиц стилей: связанные (связанные), внедренные (внутренние), встроенные (внешние). Продемонстрировать действие приоритетов при применении различных способов определения CSS. Например, определить различный цвет шрифта, во всех трех видах таблиц и посмотреть, какое из трех правил будет действовать.

2. Создайте три варианта стилевого оформления (и соответственно три варианта стилевых таблиц) ориентированных на различные группы пользователей: для Ваших друзей (так, как нравится Вам), строгий деловой стиль (для потенциальных работодателей), стиль рекламы (навязчиво-яркий).

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

4. Поменяйте цвет фона на странице или в блоке (свойство background-color).

5. Измените стандартные стили отображения основного контента и заголовков, в соответствии с выбранным дизайном. Цвет шрифта ‑ свойство color, свойство font дает возможность задать сразу шесть свойств шрифта: font-family, font-size, font-style, font-variant, font-weight, и line-heigh.

6. Используя свойство letter-spacing, выведите разреженный текст, это акцентирует внимание на тексте.

7. Свойство text-indent устанавливает величину отступа первой строки блока текста, используя это свойство, регулируйте характеристики красной строки абзаца.

8. Свойство text-transform управляет регистром вывода символов текста. Для усиления значимости выведите фразу текста прописными буквами.

9. Свойство word-spacing устанавливает величину пробельного символа или расстояние между словами в тексте. Используйте это свойство для изменения расстояний между словами.

10. Используя свойство list-style-image, поставьте в качестве маркера списка рисунок (найти в Интернете).

11. Регулируйте отступы от картинок, размещенных на странице.

12. Для оформления ссылок используйте псевдоклассы гипертекстовых ссылок (:link, :visited, :hover, :active).

13. При оформлении страниц используйте отступы между границей блока и границей элемента, в который помещен блок (свойство margin), отступы от границы блока до его содержимого (свойство padding). Обрамите любой из блочных тегов границей (свойства border, border-color, border-width и border-style).

14. Измените табличный дизайн страниц на контейнерный. При разбиении странички на зоны пользуйтесь не таблицей, а тегами <div>. Примеры контейнерного дизайна см. Романчик В.С. «Web – программирование Средства разработки клиентских приложений», ср. 94-95.