Свойства CSS. CSS properties. Position (лекция 5)

1.

CSS properties. Position.

2.

body {
margin: 0;
font-family: 'Montserrat', sansserif;
font-size: 15px;
line-height: 1.6;
color: #333;
}
устанавливает
межстрочный
интервал
текста,
отсчет ведется от базовой линии
шрифта.
При
обычных
обстоятельствах расстояние между
строками зависит от вида и размера
шрифта и определяется браузером
автоматически.
Отрицательное
значение межстрочного расстояния
не допускается.
line-height
Любое число больше нуля воспринимается как
множитель от размера шрифта текущего текста.
Например, значение 1.5 устанавливает полуторный
межстрочный интервал. В качестве значений
принимаются также любые единицы длины, принятые
в CSS — пикселы (px), дюймы (in), пункты (pt) и др.
Разрешается использовать процентную запись, в этом
случае за 100% берется высота шрифта.
line-height sets the line
spacing of the text, counting
from the font baseline.
Under normal circumstances,
the distance between the
lines depends on the type
and size of the font and is
determined by the browser
automatically. A negative
value of the line spacing is
not allowed.
Any number greater than zero is perceived as a
multiplier of the font size of the current text. For
example, the value 1.5 sets a one-and-a-half line
spacing. Any units of length accepted in CSS are
also accepted as values — pixels (px), inches (in),
points (pt), etc. It is allowed to use a percentage
entry, in this case the font height is taken as 100%.
line-height | htmlbook.ru

3.

*,
*:before,
*:after {
box-sizing: border-box;
}
box-sizing: определяет как вычисляется общая ширина и высота элемента.
По умолчанию в блоковой модели CSS ширина и высота, которую вы
задаёте элементу применяется только для контента элемента. Если у
элемента есть граница или внутренний отступ, то они добавляются к ширине
и высоте, чтобы получить отображаемый на экране размер. Это значит, что
когда вы выставляете ширину и высоту, вам придётся изменять значение,
при добавлении границ и отступов. Например, если у вас есть четыре блока
с width 25% и у какого-нибудь из них есть граница или внутренний отступ
слева или справа, то по умолчанию они не поместятся на одной строке.
Свойство box-sizing может изменять это
поведение:
content-box даёт стандартное поведение
свойства box-sizing.
border-box говорит браузеру учитывать
любые границы и внутренние отступы в
значениях, которые вы указываете в
ширине и высоте элемента. Если вы
выставите элементу ширину 100 пикселей,
то эти 100 пикселей будут включать в себя
границы и внутренние отступы, а контент
сожмётся, чтобы выделить для них место.
box-sizing: defines how the total width and height of the element is
calculated.By default, in the CSS block model, the width and height that
you set to the element is applied only to the element content. If an
element has a border or an internal indentation, then they are added to
the width and height to get the size displayed on the screen. This means
that when you set the width and height, you will have to change the
value when adding borders and margins. For example, if you have four
blocks with a width of 25% and one of them has a border or an inner
indentation on the left or right, then by default they will not fit on one
line.
box-sizing - CSS | MDN (mozilla.org)

4.

*,
*:before,
*:after {
box-sizing: border-box;
}
Псевдоэлемент :before применяе
тся для отображения желаемого
контента
до
содержимого
элемента,
к
которому
он
добавляется.
Работает
совместно со свойством content.
Pseudo element :before is used to
display the desired content before
the content of the element to
which it is added. Works in
conjunction with the content
property.
Псевдоэлемент :after используется для вывода
желаемого текста после содержимого элемента, к
которому
он
добавляется.
Псевдоэлемент
:after
работает
совместно
со
свойством content.
Pseudo element :after is used to output the desired
text after the content of the element to which it is
added. The pseudo-element :after works in
conjunction with the content property.
Псевдоэлементы позволяют задать стиль элементов
не определённых в дереве элементов документа, а
также генерировать содержимое, которого нет в
исходном коде текста.
Pseudo-elements allow you to set the style of
elements not defined in the document element tree,
as well as generate content that is not in the source
code of the text.
Псевдоэлемент :after | htmlbook.ru
Псевдоэлемент :before | htmlbook.ru

5.

max-width: говорит о том, что фиксированная ширина контейнера, должна
занимать весь размер родительского элемента — если ширина родительского
элемента указана явно, — все это сто процентов, но контейнер никогда не
должен превышать 1200px. Это означает, что контейнер может быть меньше
1200px, если это лучше соответствует его ситуации (например, меньший
размер окна), но оно никогда не должно быть больше. Таким образом, здесь
есть два условия, что ширина контейнер может составлять 100% от
родительского элемента, если он хочет, но он никогда не должен быть больше
1200px.
если ширина > максимальная ширина; пусть браузер использует
max-width.
если ширина < максимальная ширина; пусть браузер использует
ширину.
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
max-width: says that the fixed width of the container should occupy the entire size of the parent element - if the width of
the parent element is specified explicitly — all this is one hundred percent, but the container should never exceed 1200px.
This means that the container can be smaller than 1200px if it suits its situation better (for example, a smaller window size),
but it should never be larger. So there are two conditions here that the width of the container can be 100% of the parent
element if it wants to, but it should never be more than 1200px.
В чем же разница между шириной и максимальной
шириной? | Акопефолува Оджо | Прототип (prototypr.io)

6.

.intro {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100vh;
background: url("../images/intro.jpg") center no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
New relative units of measurement have been added to
CSS3, such as vh, vw, vmin, vmax.These units are
calculated relative to the size of the browser window.
Since the width of the element specified with 100 vw is
greater than the width of the viewing area, it is better
to use 100% width to create fullscreen background
images, which will be equal to the width of the html
root element.
To make a block the full height of the browser
window, you need to set 100% for three elements html, body and directly for the block itself:
В CSS3 были добавлены новые относительные единицы
измерения, такие как vh, vw, vmin, vmax.
Эти единицы вычисляются относительно размеров
окна браузера.
Так как ширина элемента, указанная с помощью 100
vw больше ширины области просмотра, то для
создания полноэкранных фоновых изображений лучше
использовать ширину 100% которая будет равна
ширине корневого элемента html.
Чтобы сделать блок на всю высоту окна браузера,
необходимо задать 100% для трёх элементов — html,
body и непосредственно для самого блока:
Так
как
процентные
размеры
вычисляются
относительно значений родительских элементов, то
необходимо установить соответствующие значения
для каждого элемента DOM. Единица измерения vh не
требует установки значений по цепочке, так как её
значение вычисляется напрямую относительно окна
браузера:
Относительные единицы измерения vh, vw, vmin, vmax
(html5book.ru)

7.

.intro {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100vh;
background: url("../images/intro.jpg") center no-repeat;
-webkit-background-size: cover;
background-size: cover;
CSS Flexbox — это технология для создания сложных
гибких макетов за счёт правильного размещения
элементов на странице.
В Flexbox есть свойство под названием flex-direction:
которое определяет направление главной оси (в каком
направлении
располагаются
flexbox-дочерние
элементы) — по умолчанию ему присваивается
значение т.е. располагать дочерние элементы в ряд
слева направо
}
CSS Flexbox is a technology for creating complex flexible layouts due to the correct placement of elements on the page.
Flexbox has a property called flex-direction: which determines the direction of the main axis (in which direction the
flexbox-child elements are located) — by default, it is assigned a value, i.e. to arrange the child elements in a row from
left to right
background-size: cover масштабирует изображение с сохранением пропорций так, чтобы его ширина или
высота равнялась ширине или высоте блока.
Flexbox - Изучение веб-разработки | MDN (mozilla.org)
Как работает CSS Flexbox: наглядное введение в систему
компоновки элементов на веб-странице (tproger.ru)

8.

.intro__title:after {
content: "";
display: block;
width: 60px;
height: 3px;
margin: 60px auto;
background-color: #fff;
}
Свойство display позволяет изменить способ отображения определенного
элемента на странице. Если в качестве значения задать block - тогда это
приведет к тому, что любой элемент будет отображаться аналогично тегу DIV.
Это значит, что если не задана ширина, то она примет значение 100% и
элемент станет тянутся на всю ширину. Так же это значит, что без
свойства float, другие элементы не смогут оказаться слева или справа на
одному уровне с этим элементом. Так же это значит, что элемент можно
отцентровать при помощи свойства margin, и начинаем работать
свойство padding для этого элемента.
The display property allows you to change the way a certain element is displayed on the page. If block is set as the
value, then this will cause any element to be displayed similarly to the DIV tag.
This means that if the width is not set, then it will take the value 100% and the element will stretch the entire width. It
also means that without the float property, other elements will not be able to be on the left or right at the same level
with this element. It also means that the element can be centered using the margin property, and the padding
property for this element begins to work.

9.

position
The position CSS property sets how an element is positioned in a
document. The top, right, bottom, and left properties determine the
final location of positioned elements.
Static
The element is positioned according to the Normal Flow of the
document. The top, right, bottom, left, and z-index properties
have no effect. This is the default value.

10.

position
Relative
The element is positioned according to the normal flow of the
document, and then offset relative to itself based on the values
of top, right, bottom, and left. The offset does not affect the position
of any other elements; thus, the space given for the element in the
page layout is the same as if position were static.

11.

position
Fixed
The element is removed from the normal document flow, and no
space is created for the element in the page layout. The element is
positioned relative to its initial containing block, which is the
viewport in the case of visual media. Its final position is determined
by the values of top, right, bottom, and left.

12.

.header {
width: 100%;
padding-top: 30px;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1000;
absolute - данное значение задает абсолютное позиционирование
элемента. Что это значит? Во-первых, абсолютно позиционированный
элемент полностью отделяется от общего потока HTML-документа. Другие
элементы
страницы
будут
вести
себя
так,
будто
абсолютно
позиционированного элемента не существует. Во-вторых, абсолютно
позиционированный элемент можно перемещать относительно его родителя
(по умолчанию это окно браузера) при помощи свойств top, right, bottom, left.
}
absolute - this value sets the absolute positioning of the element. What does it mean? Firstly, an absolutely
positioned element is completely separated from the general flow of the HTML document. Other elements of the
page will behave as if an absolutely positioned element does not exist. Secondly, an absolutely positioned element
can be moved relative to its parent (by default, this is the browser window) using the properties top, right, bottom,
left.
Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном
порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может
находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет zindex. Это свойство работает только для элементов, у которых значение position задано
как absolute, fixed или relative.
В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше
значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При
равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже.

13.

body {
margin: 0;
font-family: 'Montserrat',
sans-serif;
font-size: 15px;
line-height: 1.6;
color: #333;
}
margin устанавливает величину отступа от
каждого края элемента. Отступом является
пространство
от
границы
текущего
элемента до внутренней границы его
родительского элемента
Если у элемента нет родителя, отступом
будет расстояние от края элемента до
края окна браузера с учетом того, что у
самого
окна
по
умолчанию
тоже
установлены отступы. Чтобы от них
избавиться,
следует
устанавливать
значение
margin
для
селектора <body> равное нулю.
margin sets the amount
of margin from each
edge of the element. The
indentation is the space
from the border of the
current element to the
inner border of its parent
element
If the element does not have a
parent, the indentation will be the
distance from the edge of the
element to the edge of the browser
window, taking into account that
the window itself is also indented
by default. To get rid of them, you
should set the margin value for the
<body> selector to zero.
Отступ от левого края элемента
margin | htmlbook.ru
Свойство margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее
только для указанных сторон.

14.

Устанавливает значение полей вокруг содержимого элемента. Полем
называется расстояние от внутреннего края рамки элемента до
воображаемого прямоугольника, ограничивающего его содержимое.
Свойство padding позволяет задать величину поля сразу для всех
сторон элемента или определить ее только для указанных сторон.
Величину полей можно указывать в пикселах (px), процентах (%) или
других допустимых для CSS единицах. Значение inherit указывает, что
оно наследуется у родителя. При указании поля в процентах, значение
считается от ширины родителя элемента.