Made in HTML/CSS – Telegram
Made in HTML/CSS
1.38K subscribers
754 photos
41 videos
2 files
677 links
Научись классно верстать и создавать сайты благодаря Made in HTML/CSS.
По рекламе - https://news.1rj.ru/str/ZilantTG
Download Telegram
Свойство left в CSS определяет положение элемента относительно левой границы его родительского контейнера.

Оно также используется в сочетании с позиционированием (таким как position: absolute;, position: relative;, position: fixed; или position: sticky;).



Made in HTML/CSS
👍10👨‍💻4🔥3
position. 1 часть.

Свойство position в CSS задает способ позиционирования элемента на странице. Оно может принимать несколько значений:

1. static: Стандартное положение. Элемент располагается в порядке потока документа, и свойства top, right, bottom, left не влияют на его положение.

2. relative: Элемент позиционируется относительно своего нормального положения в потоке документа. Свойства top, right, bottom, left изменяют его расположение от стандартной позиции.



Made in HTML/CSS
👍10🔥6👨‍💻2
position. 2 часть

absolute
: Элемент позиционируется относительно ближайшего предка с позиционированием (не статическим). Если такого предка нет, элемент позиционируется относительно окна браузера.

fixed: Элемент фиксируется относительно окна браузера. Он не сдвигается при прокрутке страницы.

sticky: Элемент находится в обычном потоке документа до тех пор, пока не достигнет заданной позиции при прокрутке, после чего становится фиксированным.



Made in HTML/CSS
👍9🔥3👨‍💻2
Свойство caption-side в CSS применяется к элементу <caption> внутри таблицы и определяет, где будет располагаться заголовок таблицы относительно самой таблицы.

Это позволяет управлять позиционированием заголовка, который обычно описывает содержимое таблицы.

Возможные значения


1. top: Заголовок размещается сверху таблицы (по умолчанию).
2. bottom: Заголовок размещается снизу таблицы.
3. left: Заголовок размещается слева от таблицы (не поддерживается во всех браузерах).
4. right: Заголовок располагается справа от таблицы (также может не поддерживаться).




Made in HTML/CSS
👍10🔥4👨‍💻2
Свойство right в CSS определяет положение элемента относительно правой границы его родительского контейнера.

Оно используется в сочетании с позиционированием (position: absolute;, position: relative;, position: fixed; или position: sticky;).



Made in HTML/CSS
👍11🔥4👨‍💻3
Свойство top в CSS определяет вертикальное положение элемента относительно верхней границы его родительского контейнера.

Оно применяется в сочетании с позиционированием элементов, такими как position: absolute;, position: relative;, position: fixed; или position: sticky;.



Made in HTML/CSS
👍9🔥3👨‍💻2
Свойство z-index в CSS определяет порядок наложения элементов на странице (трехмерную ось Z).
Оно позволяет управлять тем, какие элементы располагаются поверх других, когда они пересекаются.

Как работает z-index

- z-index применяется только к элементам с позиционированием, т.е. у элементов должно быть установлено значение свойства position в absolute, relative, fixed, или sticky.
- Значения z-index могут быть как положительными, так и отрицательными, а также равными нулю.
- Элементы с более высоким z-index располагаются выше элементов с более низким значением.
👍12🔥2👨‍💻2
Свойство border-collapse в CSS применяется к элементам таблицы и определяет, как границы ячеек внутри таблицы должны обрабатываться.

Оно может иметь два основных значения:

1. collapse: Границы ячеек объединяются. Когда две ячейки имеют общую границу, граница отображается только один раз.

2. separate: Границы ячеек отображаются отдельно, и между ячейками создается пространство.



Made in HTML/CSS
👍8🔥4👨‍💻2
Свойство border-spacing в CSS применяется к таблицам с установленным значением border-collapse: separate.

Оно определяет расстояние между границами ячеек в таблице, позволяя установить горизонтальное и вертикальное расстояние между ними.



Made in HTML/CSS
🔥9👍3👨‍💻3
Свойство table-layout в CSS управляет тем, как таблицы отображаются и как вычисляются ширины ячеек.

Оно определяет алгоритм, по которому браузер будет генерировать макет таблицы.


Made in HTML/CSS
👍9🔥6👨‍💻4
Свойство list-style-image в CSS используется для задания изображения в качестве маркера списка.

Оно позволяет заменить стандартный маркер (точку или цифру) на изображение, которое будет отображаться перед каждым элементом списка.

Это свойство применяется к элементам неупорядоченного (<ul>) или упорядоченного (<ol>) списков.


Made in HTML/CSS
👍10🔥3👨‍💻3
Свойство list-style-position в CSS определяет, как маркеры списка (например, точки или номера) будут выровнены относительно содержимого элементов списка.

Оно применяется к элементам неупорядоченных (<ul>) и упорядоченных (<ol>) списков.


Made in HTML/CSS
👍10🔥2👨‍💻2
Свойство list-style-type в CSS определяет внешний вид маркеров (точек, цифр и т. д.) для элементов списков, таких как неупорядоченные (<ul>) и упорядоченные (<ol>) списки.

Это свойство позволяет выбирать различные стили для маркеров, которые будут применяться к элементам списка.


Made in HTML/CSS
👍7🔥4👨‍💻2
Свойство list-style в CSS используется для задания общего стиля маркеров списка (для неупорядоченных и упорядоченных списков).

Оно сочетает в себе несколько свойств, таких как list-style-type, list-style-position и list-style-image, позволяя быстро задавать все параметры для списка.


Made in HTML/CSS
👍8🔥2👨‍💻2
Свойство counter-increment в CSS используется для управления счетчиками, позволяя увеличивать значение счетчика на определённое количество при каждом использовании CSS-свойства.

Это может быть полезно для нумерации элементов на странице, таких как списки или заголовки.


Made in HTML/CSS
👍7🔥3👨‍💻3
Свойство cursor в CSS используется для изменения внешнего вида курсора мыши, когда он находится над элементом.
Это свойство позволяет пользователям интуитивно понимать, какие действия можно выполнить с элементом (например, нажать кнопку или изменить размер).

Основные значения свойства cursor:

1. default: стандартный курсор (стрелка).
2. pointer: курсор в виде руки, обычно указывает на кликабельный элемент (ссылки).
3. text: курсор в виде символа I (для выбора текста).
4. move: курсор, указывающий на возможность перемещения элемента.
5. resize: курсоры для изменения размера, например:
6. crosshair: курсор в виде перекрестия.
7. not-allowed: курсор в виде квадрата с перекрестием, указывает, что действие запрещено.
8. wait: курсор в виде песочных часов, указывает, что операция выполняется.



Made in HTML/CSS
👍10🔥4👨‍💻3
Свойство box-shadow в CSS используется для добавления теней к блочным элементам.
Оно позволяет управлять размерами, размытием и цветом тени, создавая эффект глубины и выделяя элемент на странице.

Параметры:

1. Смещение по горизонтали: Оно определяет, насколько тень смещена вправо (положительное значение) или влево (отрицательное значение).
2. Смещение по вертикали: Оно определяет смещение тени вниз (положительное значение) или вверх (отрицательное значение).
3. Размытие (необязательно): Чем больше значение, тем более размытая будет тень.
4. Распространение (необязательно): Положительное значение увеличивает размер тени, отрицательное уменьшает его.
5. Цвет (необязательно): Цвет тени.


Made in HTML/CSS
👍9🔥4👨‍💻3
Свойство text-shadow в CSS используется для добавления теней к тексту, создавая эффект глубины и выделяя его на фоновом изображении или цвете.

Это свойство позволяет управлять смещением, размитием и цветом тени текста.


Made in HTML/CSS
👍8🔥4👨‍💻2
Свойство scrollbar-color в CSS позволяет управлять цветом ползунков и треков (фона) прокрутки для браузеров, поддерживающих данное свойство.

Этот стиль позволяет кастомизировать внешний вид прокрутки, делая его более гармоничным и соответствующим дизайну сайта.


Made in HTML/CSS
👍8🔥2👨‍💻2
Свойство scrollbar-width в CSS позволяет задавать ширину полосы прокрутки для элементов в браузерах, которые поддерживают это свойство.

Это свойство применимо к элементам, которые имеют прокрутку (например, с заданным overflow: auto или overflow: scroll).


Made in HTML/CSS
👍8🔥4👨‍💻2
Свойство transition-property в CSS используется для указания, какие свойства элемента должны анимироваться при применении переходов (transitions).

Это свойство является частью CSS-transitions, которые позволяют создавать плавные переходы между состояниями элемента.


Made in HTML/CSS
👍9🔥3👨‍💻2