Left, right, top, bottom
Для позиционированного элемента определяет расстояние от левого, правого, верхнего и нижнего краев родительского элемента, не включая отступ, поле и ширину рамки, до краев дочернего элемента. Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется относительно окна браузера (рисунок 2.3).
Рисунок 2.3 – Значение свойства left относительно окна браузера
В случае значения relative, положение определяется относительно исходного положения элемента (рисунок 2.4).
Рисунок 2.4 – Значение свойства left относительно исходного положения
Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов происходит относительно родительского элемента.
Рисунок 2.5 – Значение свойства left относительно родителя
Синтаксис:
left: значение | проценты | auto | inherit
Значения:
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства left может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от ширины родительского элемента.
auto – Не изменяет положение элемента.
inherit – Наследует значение родителя.
clear
Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.
Синтаксис:
clear: none | left | right | both | inherit
Значения:
none – Отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.
both – Отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
left – Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
right – Отменяет обтекание с правой стороны элемента.
inherit – Устанавливает значение родителя.
Содержание работы
В соответствии с вашими вариантами оформите сайт, сделанный в лабораторной работе 1.
Создайте два файла CSS с различным оформлением, которые отвечают следующим требованиям:
В каскадных таблицах стилей должны присутствовать все типы описанных селекторов.
В описании правил должны быть использованы все 10 типов селекторов.
Каждая таблица стилей должна содержать не менее 50 блоков свойств.