Для написания красивых работ на CSS важно воображение, но нельзя игнорировать основы. Я считаю, что причина, по которой большинство людей боятся писать CSS, заключается в том, что их пугает его огромная система базовых знаний.freecodecamp, изучите внешний интерфейс трех мушкетеров, пройдя уровень, и используйте его для начала работы с CSS — лучший выбор!

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

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

Не пугайтесь цифр, на самом деле они обычно используются:выбрать-позиционирование-макет-коробка модель-шрифт-фон-анимация-другое

Selectors

Type

сам элемент,p

Class

Добрый,p.class

ID

я бы,p#id

Descendant

потомки,ul li

Attribute

Атрибуты,input[type="checkbox"]

Sibling

соседние элементы,input ~ label

Univarsal

выбрать все,*

Pseudo-class

Псевдокласс для выбора элементов в определенном состоянии

:hover

состояние наведения мыши

:focus

Сам элемент получает фокус

:focus-within

Сам элемент и его дочерние элементы получают фокус

:nth-child

n-й дочерний элемент

:not

не в состоянии

:target

якорь URL

:checked

Одиночный/флажковый переключательonположение дел

:disabled

отключенное состояние

:valid

Проверить статус пропуска

:invalid

Проверить статус ошибки

:placeholder-shown

Случай, когда поле ввода имеет заполнитель (то есть когда пользователь еще не ввел)

:empty

пустой элемент метки

Общие сценарии: отсутствующие поля, пустые данные загрузки ajax

Pseudo-element

Псевдоэлементы, которые вставляют дополнительные элементы поверх исходных элементов и не действуют как HTML-теги.

::before | ::after

2 дополнительных рисуемых элемента для этикетки

::selection

Часть, выбранная пользователем

::placeholder

текст-заполнитель для поля ввода

Positioning

position

• относительный: относительное позиционирование, элемент занимает позицию документа и может иметь смещение
• absolute: абсолютное позиционирование, элемент не занимает позицию и позиционируется относительно родительского элемента
• fixed: фиксируется в определенной позиции в окне
• sticky: "прилипнуть" к определенной позиции в окне

top | left | bottom | right

Расстояние смещения вверх, вниз, влево и вправо

z-index

Каскадные отношения

Display

display

• block: элемент уровня блока
• встроенный: встроенный элемент
• flex: гибкая компоновка коробки
• сетка: макет сетки
• содержимое: элемент, действующий как маска (например, дающийimgнадетьaи может сделать так, чтобы это не влияло на макет)

Box Model

Возьмем, к примеру, фрукты: сердцевинаcontent, мякотьpadding, кожура естьborder, снаружи естьmargin

width | height

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

padding | margin

Внутреннее и внешнее поля

overflow

• видимый: лишняя часть видна
• скрыто: лишняя часть не видна
• прокрутка: лишняя часть отображается в виде полосы прокрутки

Fonts

Общие сокращения:<'font-weight'> || <'font-size'> [ / <'line-height'>] || <'font-family'>

font-weight

вес шрифта

font-size

размер шрифта

font-family

тип шрифта

line-height

Высота линии шрифта высота

Text

text-align

выравнивание текста

text-overflow

Усечение текста за пределами

Общие фрагменты:

.text-clamp {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

text-shadow

тень текста

text-transform

текстовый регистр

text-decoration

стиль оформления текста

-webkit-text-stroke

обводка текста

white-space

обработка пробелов

• nowrap: сделать так, чтобы текст никогда не переносился
• pre: Сохраняет пробелы и символы новой строки, но не может переноситься
• предварительная обертка: сохраняйте пробелы и разрывы строк и можете автоматически переносить

Color

color

цвет текста

opacity

прозрачность цвета

transparent

прозрачный

currentColor

текущий элементcolorзначение

Backgrounds & Borders

Фоновые общие сокращения:<'background-image'> || <'background-position'> [/ <'background-size'> <'background-repeat'>]

Общие сокращения для границ:<'border-width'> || <'border-style'> || <'border-color'>

background-color

фоновый цвет

background-image

Фоновое изображение

background-size

размер фона

background-position

позиционирование фона

background-repeat

Повторяется ли фон

background-clip

фоновый урожай

border-width

ширина рамки

border-style

стиль границы

border-color

цвет границы

border-radius

закругленная граница

box-shadow

тень:offset-x | offset-y | blur-radius | spread-radius | color

Images

linear-gradient

Линейный градиент

Обычное использование: цвет фона, имитация света, полосатый фон и т. д.

radial-gradient

радиальный градиент

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

conic-gradient

Конический градиент

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

object-fit

Работа с заменяемыми элементами (такими какimg) проблема деформации

Filter

filter

Фильтры, применяемые к самому элементу

Часто используемые фильтры:

• размытие: размытие по Гауссу
• контраст: контраст
• drop-shadow: проекция, часто используемая для неправильных форм
• оттенки серого: оттенки серого
• hue-rotate: преобразование оттенка

backdrop-filter

Фильтр, примененный к фону элемента

Blending

mix-blend-mode

Общие режимы наложения

• умножить: умножить
• экран: цветной фильтр
• разница: интерполяция

SVG

clip-path

Обтравочный контур, используемый для вырезания различных фигур

mask

Маска, используемая для создания эффекта выреза

letter-spacing

Межбуквенное расстояние

pointer-events

события мыши (обычно устанавливается наnone, что означает событие мыши для закрытия объекта)

List

list-style-type

списокmarkerстиль (обычно устанавливается наnone, что означает устранение стиля списка)

counter-reset

сбросить счетчик на определенное значение

counter-increment

Увеличение счетчика на определенное значение

UI

appearance

Стиль элемента по умолчанию (обычно устанавливается наnone, что означает удаление внешнего вида по умолчанию)

box-sizing

Коробка тип модели

• content-box: по умолчанию, стандартная блочная модель
• border-box: блочная модель IE (будетborderа также·paddingДлина и ширина вместе)

cursor

Тип курсора, чаще всего используетсяpointer, то есть рука

outline

контур

user-select

Может ли пользователь выбирать текст (обычно устанавливается наnone, что указывает на то, что пользователь не может выбрать этот текст)

Scroll

scroll-behavior

• auto: поведение прокрутки по умолчанию
• smooth: плавная прокрутка

scroll-snap-type

Определяет, как точка привязки в контейнере прокрутки строго принудительно

scroll-snap-align

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

-webkit-overflow-scrolling

Установить какtouchМожно восстановить эластичную прокрутку на мобильных устройствах

overscroll-behavior

Установить какcontainЭффекты цепной прокрутки можно отключить

Writing Modes

writing-mode

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

Здесь мы по умолчанию используем текст ltr (текст, выровненный по левому краю).

• horizontal-tb: идет горизонтально слева направо, по умолчанию
• vertical-lr: поток по вертикали сверху вниз, следующая вертикальная линия находится справа от предыдущей строки
• vertical-rl: поток по вертикали сверху вниз, следующая вертикальная линия находится слева от предыдущей строки

Transforms

transform

Общие геометрические преобразования:

• translate: Сковорода
• scale: увеличить
• rotate: повернуть
• skew: Скошенный срез

transform-origin

Центр трансформации

transform-style

• квартира: по умолчанию
• save-3d: 3d сцена

perspective

Перспективное расстояние

backface-visibility

Виден ли объект сзади

Animation

transition

переход

transition-property

имя свойства перехода

transition-duration

время перехода

transition-delay

задержка перехода

transition-timing-function

Функция плавности перехода, встроенная:ease,linear,ease-in,ease-out,ease-in-out,steps()

Пользовательская функция смягчения:cubic-bezier()

animation

анимация

animation-name

имя анимации

animation-duration

время анимации

animation-delay

задержка анимации

animation-timing-function

функция замедления анимации

animation-iteration-count

Количество воспроизведений анимации

animation-fill-mode

Режим анимированной заливки

animation-play-state

статус воспроизведения анимации

@keyframes

Ключевой кадр

Motion Path

offset-path

определение пути

offset-distance

положение объекта на пути

Others

attr()

Получите значение пользовательского свойства какcontentсгенерированный контент

var()

Пользовательские переменные CSS

calc()

Рассчитано

@media

Медиа-запросы для адаптации под разные устройства

-webkit-box-reflect

проекция

percentage

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

Относительный родительский элемент:width,height,top,left,margin,padding

Относительно себя:translateX,translateY