Элементы css

• https://msiter.ru/references/css-reference
• https://developer.mozilla.org/en-US/docs/Web/CSS/bottom

padding

padding: 10px 20px;

padding-left: 20px;

padding-right: 20px;

order: 0;

opacity: 0;

scroll-behavior - быстрая прокрутка

tab-size: 10px; - табуляция

letter-spacing: 0.3em - между буквами

text-decoration

text-decoration-line

text-decoration-color

text-decoration-skip-ink

text-decoration-style

text-emphasis

text-indent

text-overflow

text-shadow

transform-style

transition-delay

visibility

Свойство CSS aspect-ratio используется для управления соотношением сторон (ширины к высоте) элементов. Когда вы устанавливаете, например, aspect-ratio: 1 / 1;, вы задаете квадратное соотношение сторон, где ширина равна высоте.

backdrop-filter: blur(10px);

Свойство CSS caret-color используется для изменения цвета курсора ввода (каретки) в текстовых полях и элементах, таких как <input>, <textarea>, и другие элементы с текстовым содержимым. Это свойство позволяет сделать интерфейс более привлекательным, улучшая визуальную идентификацию места, где пользователь может вводить текст.

Свойство CSS color-scheme используется для указания, какие цветовые схемы поддерживает данный элемент, и позволяет браузерам применять соответствующие стили по умолчанию. Эта возможность особенно полезна для автоматической поддержки темного и светлого режимов.

Свойство CSS column-count используется для управления разбиением контента на колонки внутри элемента. Это свойство позволяет создать многоколоночный макет, который может быть особенно полезен для длинного текста или другого контента, который будет легче восприниматься в колонках — как в газетах или журналах.

column-rule: solid 6px;

column-rule-style

column-rule-color

column-rule-width

column-span

Селектор .topic-games::before используется в CSS для добавления контента перед содержимым элемента с классом topic-games. В данном случае, свойство content со значением '🎮 ' вставляет эмодзи игровой контроллер (🎮) перед текстом или содержимым этого элемента.

Свойство CSS filter позволяет применять эффекты к элементам на веб-странице, такие как размытие, яркость, контрастность и многие другие. Это свойство предоставляет мощные инструменты для стилизации изображений, текста и других элементов, позволяя улучшить визуальное восприятие контента без необходимости редактирования графики в графических редакторах.

resize: both; - меняет размер текстовое поля

Свойство CSS rotate используется для поворота элемента на определенный угол относительно его начального положения. Оно является частью функции transform, которая применяется для изменения формы, размера, положения и ориентации элемента.

scrollbar-width

scrollbar-color

object-fit

object-position

flix

flex: 2;

flex-wrap: wrap;

margin

margin-top: 20px;

margin-right: 20px;

margin-bottom: 20px;

margin-left: 20px;

:root {
--primary-color: #333;
}

.example {
color: var(--primary-color);
}

Расположение текста

text-align: right;

text-align: left;

text-align: center;

Работа с текстом

font-size: 16px;

color: #fff;

font-family: Verdana, sans-serif;

font-family: 'Roboto', Тahoma, sans-serif;

font-family: Arial, Helvetica, sans-serif;

Цвет фона

background-color: brown;

background-color: #74992e;

background-color: rgb(255, 255, 128);

background-color: rgba(255, 255, 128, .5);

background-image: url("../../media/examples/lizard.png");

background-image: url("../../media/examples/lizard.png"), url("../../media/examples/star.png");

background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)), url("../../media/examples/lizard.png");

background-position: top;

background-position: left;

background-position: center;

background-repeat: repeat-x;

background-repeat: repeat;

background-repeat: no-repeat;

background-size: cover;

opacity: 0.5; - делает блок прозрачным и его содержимое

Ширина и высота

height: 150px; - низ и вверх текста

width: 100%;

max-width: 100%;

height: calc(100% - 200px);

height: 100vh;

min-width: 100%;

position

position: static;

position: relative;

position: absolute;

position: sticky;

top: 100px;

left: 100px;

right: 10px

bottom

background

background-attachment: fixed;

background-position: 1800px 2000px, 1600px 1600px, 1400px 1200px;

background: linear-gradient(#71B280, #134E5E);

background-attachment: scroll;

background-image: linear-gradient(30deg, #11cf4d, #055e21);

background-image: url('AddText_05-05-06.06.05.png');

Углы круглые

border-bottom-left-radius: 80px 80px;

border-radius: 30px;

border-radius: 25% 10%;

border-radius: 10% 30% 50% 70%;

border-radius: 10px 100px / 120px;

border-radius: 50% 20% / 10% 40%;

Границы

border: solid;

border-left: 5px solid #616161;

border: dashed red;

border: 1rem solid;

border: thick double #32a1ce;

border: 4mm ridge rgba(211, 220, 50, .6);

border-collapse: collapse; - склеивает примыкающие границы

@media

@media (max-width: 767px) {

}

@media only screen and (max-width: 1200px) { }

display

display: block;

display: inline-block;

display: none;

display: flex;

display: grid;

Комментарии

/* Sidebar Div */

overflow

overflow: visible;

overflow: hidden;

overflow-x: scroll;

Маркеры списков

list-style: square; - квадратные маркеры

list-style: inside; - круглые маркеры

list-style: url('/media/examples/rocket.svg'); - вместо маркеров картинки

list-style: none; - нет маркеров

list-style-position: inside; - маркеры внутри

list-style-position: outside; - маркеры снаружи

list-style-type: disc;

list-style-type: circle;

z-index

z-index: 1;

Расстояние между строками

line-height: normal;

line-height: 2.5;

Курсор

cursor: grab;

cursor: zoom-in;

cursor: not-allowed;

cursor: crosshair;

cursor: wait;

cursor: help;

cursor-x: 20px;

Подключение своего шрифта

@font-face {

font-family: 'Bangers';

src: url(Bangers-Regular.ttf);

}

transition

transition: margin-right 2s;

transition: all 1s ease-out;

transition: all 0.3s ease;

transition: 200ms ease-in-out;

transition: box-shadow .3s;

transition: transform 280ms ease-in-out;

transition: background-color 0.3s; /* добавляем плавное изменение цвета фона */

transform

transform: scale(0.95);

transform: scale(1);

transform: scale(1.1);

box

box-sizing: border-box;

Тень

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

box-shadow: 0px 0px 10px rgba(0,0,0,0.2);

box-shadow: 3px 3px 5px #000000; - тень

Псевдоклассы

a :hover {}

:active

:focus:

:after

:before

Анимация

animation: snow 40s linear infinite;

Прозрачность блока и его содержимого

order: 3;

Разное

direction: ltr;

white-space: nowrap;

filter: drop-shadow(16px 16px 20px red) invert(75%);

float: none;

justify-content: center;

list-style-position