Позиционирование и форматирование
День первый. Позиционирование.
Позицию селектора относительно окна браузера либо родительского селектора можно задать помощи четырех свойств
- top – указывает на расстояние селектора от верха
- right– указывает на расстояние селектора от правой стороны
- bottom – указывает на расстояние селектора от низа
- left – указывает на расстояние селектора от левой стороны
Четыре свойства задающие координаты
Можно задавать значения в любых измерениях допустимых CSS.
Может принимать отрицательные значения.
position – задает стиль позиционирования селектора относительно самого себя, либо окна браузера или родительского селектора.
- stat – селекторы позиционируются как обычно
- relative – селектор начинает позиционироваться относительно самого себя. Участвует в построение сайта
Пример позиционирования
- absolute – при абсолютном позиционировании селектор начинает позиционироваться относительно окна браузера, либо селектора, при условии что он имеет позиционирование отличное от static. Не учувствует в построение сайта.
Пример позиционирования
- fixed – при этом позиционировании селектор фиксируется по указанным координатами остается все время на месте, независимо прокрутки экрана. Также не участвует в построении сайта.
Значения свойства position:
Любому селектору, у которого стоит позиционирование отличное от static, можно задавать координаты.
z-index – отвечает за накладывание селекторов друг на друга. Работает с селекторами, которые имеют позиционирование отличное от static.
Я живой
Я живой
clip – указывает, какую часть селектора следует отображать. Работает только с абсолютно позиционированными селекторами. В качестве значений можно использовать любые числовые значение принятые в CSS.
- auto – обычное отображение
- rect(1–з, 2–з, 3–з, 4–з)
- 1 – отвечает за отступ сверху да верхней стороны
- 2 – отвечает за отступ слева для правой стороны
- 3 – отвечает за отступ сверху для нижней стороны
- 4 – отвечает за отступ слева для левой стороны
Атрибуты свойства clip
Расшифровка значений:
Сердце человека перемещает кровь по организму, всасывая ее из венозных стволов и нагнетая в артерии. Это полый мышечный орган в виде конуса и полость его разделяют на два предсердия и два желудочка.
Левые предсердие и желудочек совместно образуют «артериальное сердце», поскольку работают с артериальной крови, то есть это нагнетающий отдел.
Правый желудочек и предсердие, это «венозное сердце», названное по типу перекачиваемой крови. В медицине сокращение сердца имеет название систола, а расслабление — диастола.
display – устанавливает, как селектор должен отображаться
- block– устанавливает блочный вид селектора. Селектор начинает, растягивается на всю ширину родителя. (p, h1-h6, div )
- inline – устанавливается встроенный вид селектора. Селектор не растягивается не всю ширину, и резервирует только-то места, которое необходимо для отображения его содержимого.(a, b, I, span)
- list-item – устанавливает блочный вид и добавляет маркер, как у списков. (li)
- none – делает селектор невидимым, и он перестает участвовать в построение сайта.
- inline-block – встроенный блок (img)
- table – селектор становится блочного вида и отображаться как таблица (table)
Атрибуты свойства display (первые четыре атрибута поддерживается всеми браузерами)
Примеры использованиям свойства display
Этот селектор должен быть блочным.
НО!!!Текст не переноситься.display:inline – Это мы прописали тегу p
Этот селектор должен быть встроенным. НО!!! Текст переноситься.
display:block – Это мы прописали тегу span
Этот селектор должен быть встроенным.НО!!! Текст переноситься, и добавляется маркер.
display:list-item – Это мы прописали тегу span
НО!!! Селектор не невидим.
display:none – Это мы прописали тегу span
К этому селектору нельзя применить высоту. НО!!! Он имеет встроенный блочный вид и высоту в 50 пикселей.
display:inline-blockЭто мы прописали тегу a
overflow – отвечает за отображение содержимого блочного селектора, когда оно в него не влезает
- visible – отображает все
- hidden– скрывает все, что больше блок
- scroll – добавляет скроль ко всем сторонам
- auto – добавляет скроль по необходимости
Значения свойства overflow:
Повседневная практика показывает, что реализация намеченных плановых заданий позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. Не следует, однако забывать, что рамки и место обучения кадров способствует подготовки и реализации систем массового участия. Таким образом реализация намеченных плановых заданий позволяет оценить значение направлений прогрессивного развития. Разнообразный и богатый опыт реализация намеченных плановых заданий в значительной степени обуславливает создание новых предложений.
visibility – устанавливает отображение и скрытие селектора
- visible – селектор отображается
- hidden – делает селектор скрытым, селектор продолжает участвовать в сетки сайта
- collapse – если применять в таблицах, действует подобно display:none. Иначе работает как hidden
Значения свойства visibility:
vertical-align – выравнивает селектор внутри текста или родителя, таблицы.
- baseline – отображение по базовой линии.
- bottom, top – выравнивает селектор относительно самого нижнего/верхнего.
- middle – выравнивает селектор чуть ниже середины
- sub, super – делает текст подстрочным/надстрочный. Шрифт остается такой же.
- text-bottom, text-top – выравнивание селектора относительно самого нижнего/верхнего
- оценты, числа – положительные значения поднимает селектора вверх, отрицательно – опускает его
Значения свойства vertical-align:
Эти буквы скачут!
cursor – устанавливает вид указателя мыши.
- auto – устанавливает курсора по умолчанию
- pointer – устанавливает курсор виде руки.
- url(“адрес”) – указывает путь к своему курсору
- набор стандартных значений – системные режимы курсора.
Значения свойства cursor:
- width – ширена блоков
- height – высота блоков
- min-width – минимальная ширена блоков
- min-height – минимальная высота блоков
- max-width – максимальная ширена блоков
- max-height – максимальная высота блоков
Это свойства работают с ie7 и то не для всех блоков