Для удобства, я разбил свойства стилей на несколько групп - для изменения текста, изменения графики, а это статья о свойствах CSS для позиционирования элементов на веб-странице. Создавая страницу, часто приходится сталкиваться с определением положения элемента, относительно другого или границ сайта в целом. Все элементы можно расположить на сайте, согласно эскизу, но для этого нужно знать специальные свойства, которые будут описаны ниже...
Свойство Display
display - свойство для выбора способа показа элемента на странице, имеет несколько значений, наиболее популярные это:
- block - элемент определяется как блочный
- inline - элемент будет показан, как встроенный
- inline-block - внутренняя часть элемента, как блочная, а сам элемент встроенный
- inline-table - определяет объект, как таблицу, но при этом может обтекаться текстом
- inline-item - элемент как блочный, но с отметкой списка
- none - объект будет визуально удален, и свободное пространство заполнится
display: block
overflow - выбор способа показа содержания блочного элемента, в случае выхода его за обозначенную область:
- visible - содержание будет показано за пределами установленных размеров
- hidden - всё что не поместилось в границы будет скрыто
- scroll - добавление полос прокрутки
- auto - полосы прокрутки появляются по необходимости
overflow: hidden;
float - определение стороны, по которой будет выравниваться элемент, но при этом элементы, стоящие ниже, будут обтекать его с других сторон. Можно определить выравнивание по левому (left) или по правому (right) краям... По-умолчанию float отключено или можно записать none.
float: right;
Свойство margin
margin - универсальное свойство для задания отступа от каждого края элемента, указывая разные количества значений:
- 1 значение - значение отступа для каждого края одинаково
- 2 значения - 1-е значение означает отступ вверху и внизу, а 2-е означает отступ справа и слева
- 3 значения - 1-е значение это отступ по верху, 2-е это отступ слева/справа, а 3-е отступ снизу
- 4 значения - соответственно отступы от верха, правого края, низа и левого края
margin: 10px 5px 20px 8px;
Для задания отступа от какой-либо стороны отдельно, можно применять свойства - margin-top, margin-right, margin-bottom и margin-left, в которых записывается одно значение указывающее величину отступа сверху, справа, снизу и слева соответственно. Принимаются значения в px, pt, % и др, а также можно установить значение auto, которое устанавливает автоматический отступ от заданного края..
Свойство padding
padding - универсальное, схожее по назначению с предыдущим, свойство, которое устанавливает вокруг элемента незримые поля. Также как и в свойстве margin, здесь можно указывать от 1 до 4 значений, которые обозначают ширину поля заданных сторон. Аналогично существуют свойства для задания поля определенной стороны (padding-top, padding-right, padding-bottom и padding-left).
padding-left: 25px;
Свойство position
position - установив это свойство, можно задать как элемент будет позиционироваться на странице с помощью значений:
- absolute - в этом случае элемент будет показан на странице в определенной точке на сайте
- fixed - это значение также привязывает элемент к определенной точке, но при прокрутке элемент не сдвигается
- relative - положение элемента зависит от других объектов на странице
- static - отсчет от предыдущих элементов, но на их расположение объект не влияет
- inherit - значение наследуется от родительского элемента
position: relative;
top, bottom, right, left - свойства, определяющие положение объекта относительно родительского элемента. Значение расстояния при необходимости может быть отрицательным... Это свойство не влияет на объект со значением - position: static;
left: 30pt;
visability - для возможности скрытия элемента со всеми его свойствами, при этом место на странице останется, как будто элемент находится на том месте. Существуют значения:
- visable - элемент отображается как обычно (по-умолчанию)
- hidden - обеспечивает скрытие элемента
- collapse - для добавления в ячейки таблицы, чтобы перестроить её
visability: hidden;
Свойства ширины и высоты
width - для установки ширины, как правило блочного элемента. Значение можно указывать в абсолютных и относительных единицах. Можно указать максимальное и минимальное значения, применяя свойства max-width и min-width соответственно.
max-width: 80%;
height - свойство для установки высоты объекта, также можно использовать максимальные и минимальные свойства - max-height и min-height.
z-index - свойство, которое определяет положение одного элемента, относительно другого при положении нахлеста. Применяется только к объектам со значениями свойства position - absolute, fixed и relative. Значение можно указывать с плюсом и минусом, чем больше значение, тем выше объект относительно остальных.
z-index: 100;
Установив значение auto, элементы будут показаны так, как расположены они в коде.
