Лабораторная работа №6

Свойства блочных объектов. Введение в каскадные таблицы стилей.

Цель:

  • Изучить возможности CSS по работе с блочными объектами;
  • Изучить основные свойства блоков;

Практическая часть

  1. Создайте html-файл lab6.htm, содержащий блочний элемент DIV.
    Блочный объект div
  2. Создайте css-файл и подключите его к html-документу так:
  3. Создайте класс k1, в котором определите размер блока 200х200
    пикселей, фон (светло-зеленый) и рамку (сплошную, темно-зеленую, шириной
    в 3 пикселя).
    Класс k1
  4. Подключите класс k1 к блоку в html-документе (<div class=»k1:>…</div>). Обратите внимание на то, как изменится блок.
  5. Добавьте еще пять таких же блоков размером 200х200 пикселей. Блоки располагаются друг под другом. Да?
  6. Для того что бы блоки располагались друг за другом необходимо добавиться в класс k1 объявление float:left;. Обновите и посмотрите изменения при изменение размеров окна.
  7. Теперь блоки «липнут» друг к другу, между ними нет расстояния, что бы добавить наружный отступ слева добавляем объявление margin-left: 15px;.
    Сохраните, просмотрите изменения.
  8. Создайте в отдельном файле горизонтальный светофор из трех блоков.
    Ширину блоков сделайте динамичной, что бы они изменялась в зависимости
    от ширины окна, но все блоки должны иметь одну ширину. Задайте каждому
    блоку свой цвет. Отступы для body уберите с помощью css.
    Светофор. Три блока
  9. Задайте первому блоку объявление display:none, а второму visibility: hidden; В чем отличия этих двух объявлений?
  10. Создайте файл, а в нем три блока. В первом блоке сделайте рамку,
    шириной с разным типом линии с разных сторон блока. Во втором блоке
    задайте фоновое изображение (background-image). В третьем блоке, задайте
    фон… Добавляйте строчки по одной и смотрите изменения в браузере после Три блока. z-indexкаждой строки.
    Класс block
  11. Расположите блоки одни над одним. Для этого установите каждому блоку
    объявление position: absolute; и порядок расположения блоков сверху
    вниз: объявление z-index: 5; (у тех блоков что ниже, значение индекса
    должно быть меньше, например 10, 20 и 30). Что бы блоки начинались не в
    одной точке, им необходимо задать свойства left и top.
  12. Создадим скругленные углы… Создаем четыре вложеных друг в друга блока. Четыре друг в друга вложенных блока
    опишем для внешнего блока класс ugol и назначим этот класс блоку
    Класс ugol
    опишем класс для правого верхнего угла
    Стиль для правого верхнего угла .ugil div{...}
    и самостоятельно для левого нижнего и правого нижнего углов.
  13. Создать новый html файл в который поместить изображение ягоды.
  14. В css-файл подключенный к html-файлу запишите стиль для изменения
    прозрачности любого изображения при наведении на него курсора мыши.
    Прозрачность FireFox
    данный код будет работать только в браузере Mozilla. Для Internet Explorer строчки должны быть следующими:
    Прозрачность Internet Explorer
  15. Используя только блоки, создайте поле для игры в крестики-нолики.
  16. Используя блоки, их вложенность, фон, выравнивание, свойство float,
    шрифт Georgia создайте вот такую вот шапку. Углы вырежьте
    самостоятельно.
    Скругление углов. Самостоятельная работа

Материалы к лабораторной работе №6

Справочник по CSS.

Яндекс.Метрика