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

Fortunato 04.03.2020 ОПБД, Студентам 383 Просмотры

Цель:

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

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

Создайте html-файл lab8.htm, содержащий блочний элемент DIV.
Создайте css-файл и подключите его к html-документу так:
Создайте класс k1, в котором определите размер блока 200х200
пикселей, фон (светло-зеленый) и рамку (сплошную, темно-зеленую, шириной
в 3 пикселя).
Подключите класс k1 к блоку в html-документе (<div class=»k1:>…</div>). Обратите внимание на то, как изменится блок.
Добавьте еще пять таких же блоков размером 200х200 пикселей. Блоки располагаются друг под другом. Да?
Для того что бы блоки располагались друг за другом необходимо добавиться в класс k1 объявление . Обновите и посмотрите изменения при изменение размеров окна.
Теперь блоки «липнут» друг к другу, между ними нет расстояния, что бы добавить наружный отступ слева добавляем объявление .
Сохраните, просмотрите изменения.
Создайте в отдельном файле горизонтальный светофор из трех блоков.
Ширину блоков сделайте динамичной, что бы они изменялась в зависимости
от ширины окна, но все блоки должны иметь одну ширину. Задайте каждому
блоку свой цвет. Отступы для body уберите с помощью css.
Задайте первому блоку объявление display:none, а второму visibility: hidden; В чем отличия этих двух объявлений?
Создайте файл, а в нем три блока. В первом блоке сделайте рамку,
шириной с разным типом линии с разных сторон блока. Во втором блоке
задайте фоновое изображение (background-image). В третьем блоке, задайте
фон… Добавляйте строчки по одной и смотрите изменения в браузере после каждой строки.
Расположите блоки одни над одним. Для этого установите каждому блоку
объявление position: absolute; и порядок расположения блоков сверху
вниз: объявление z-index: 5; (у тех блоков что ниже, значение индекса
должно быть меньше, например 10, 20 и 30). Что бы блоки начинались не в
одной точке, им необходимо задать свойства left и top.
Создадим скругленные углы… Создаем четыре вложеных друг в друга блока.
опишем для внешнего блока класс ugol и назначим этот класс блоку

опишем класс для правого верхнего угла

и самостоятельно для левого нижнего и правого нижнего углов.
Создать новый html файл в который поместить изображение ягоды.
В css-файл подключенный к html-файлу запишите стиль для изменения
прозрачности любого изображения при наведении на него курсора мыши.

данный код будет работать только в браузере Mozilla. Для Internet Explorer строчки должны быть следующими:
Используя только блоки, создайте поле для игры в крестики-нолики.
Используя блоки, их вложенность, фон, выравнивание, свойство float,
шрифт Georgia создайте вот такую вот шапку. Углы вырежьте
самостоятельно.