CSS

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" type="text/css" href="mysite.css">
<link rel="stylesheet" type="text/css" href="http://www.mysite.ru/main.css">

<style type="text/css">
    * {
        color: red;
    }
</style>
:root {
    /* глобальная переменная */
    --color-red: red;
}

.wrapper {
    /* переменная элемента */
    --color-red: red;
    color: var(--color-red, blue);
}

Цвета

elem {
    color: red,
    color: #ff00ff,
    color: #f0f,
    color: rgb(255, 0, 255),
    color: rgb(100%, 0, 100%),
    color: rgba(255, 0, 255, 1),
    color: rgba(100%, 0, 100%, 1),

    /* тон, насыщенность, яркость */
    color: hsl(300, 100%, 50%),
    color: hsla(300, 100%, 50%, 1),

    /* голубой, пурпурный, желтый, черный */
    color: cmyk(29%, 55%, 0, 0),
}

Единицы измерения

  • em - относительный, размера шрифта родительского элемента

  • ex - относительный, высоты символа х в нижнем регистре

  • ch - относительный, размера символа нуль

  • rem - относительный, размера шрифта корневого элемента

  • vw - относительный, ширины окна просмотра

  • vh - относительный, высоты экрана просмотра

  • vmin - наименьшее значение между vw и vh

  • vmax - наибольшее значение между vw и vh

  • px - относительный, разрешения экрана, 1/72 дюйма

  • in - дюйм

  • cm - сантиметры

  • mm - милиметры

  • pt - пункты, 1/72 дюйма

  • pc - пика, 1/12 пункта

  • % - относительный, родительского элемента

  • dpi - разрешение точек на дюйм

  • dpc - разрешение точек на сантиметр

  • dppx - разрешение точек на пиксель

Угловые, временные и частоты

  • deg - градусы

  • grad - градиан, 1/400 окружности

  • rad - радиан, 180/pi, ~57.3

  • turn - оборот

  • ms - миллисекунда

  • s - секунда

  • Hz - герц

  • kHz - килогерц

content

Текст, который появляется либо до, либо после элемента.

elem:before {
    content: "Before";
}

elem:after {
    content: "After";
}

cursor

Определаяет форму указателя мышки

  • auto - по умолчанию

  • default

  • crosshair

  • pointer

  • move

  • e-resize

  • ne-resize

  • nw-resize

  • resize

  • se-resize

  • sw-resize

  • s-resize

  • w-resize

  • text

  • wait

  • help

  • progress

elem {
    cursor: help;
}

elem1 {
    cursor: url(images/cursor.cur);
}

linear-gradient

Градиентная заливка

elem {
    background: linear-gradient(top, #fff, #efefef);
}

media

Медиазапросы

Типы устройств:

  • all - все устройства

  • braille - устройства с тактильной обратной связью

  • embossed - брайлевсике принтеры

  • handled - портативные устройства

  • print - принтеры

  • projection - проекторы

  • screen - цветные экраны

  • speech - речевые синтезаторы

  • tty - моноширинная символьная среда

  • tv - телевизоры

Другие:

  • color - количество бит на цвет

  • color-index - количесвто записей в таблице подстановки цветов

  • grid - устройство с фиксированным размером символов

  • monochrome - сколько бит на каждый пиксель

  • orientation - ориентация экрана

  • resolution - разрешение экрана или печати

  • scan - тип развертки

  • width - ширина области просмотра

  • height - высота области просмотра

  • min-width

  • max-width

  • min-height

  • max-height

  • device-width - ширина экрана

  • device-height - высота экрана

  • min-device-width

  • max-device-width

  • min-device-height

  • max-device-height

  • aspect-ratio - соотношение сторон области просмотра

  • min-aspect-ratio

  • max-aspect-ratio

  • device-aspect-ratio - соотношение сторон экрана

  • min-device-aspect-ratio

  • max-device-aspect-ratio

@media screen and (max-width: 960px){
    body {
        color: red;
    }
}

opacity

Прозрачность элемента

elem {
    opacity: .5;
}

orphans

Минимальное количество строк текста, которые можно оставить внизу распечатанной страницы

elem {
    orphans: 3;
}

page-break-after

Происходит ли разрыв страницы при печати после определенного элемента

  • auto - по умолчанию

  • always - элемент, который следует далее, появится вверху отдельной печатной страницы

  • avoid - предотвращает обрыв страницы после элмента

  • left

  • right

elem {
    page-break-after: always;
}

page-break-before

Происходит ли разрыв страницы при печати перед определенным элементом

  • auto - по умолчанию

  • always - элемент, который следует перед, появится вверху отдельной печатной страницы

  • avoid - предотвращает обрыв страницы перед элментом

  • left

  • right

elem {
    page-break-before: always;
}

page-break-inside

Препятствует тому, что элмент будет разбит на две печатные страницы

elem {
    page-break-inside: avoid;
}

widows

Противоположное orphans, минимальное количество строк, которое должно появиться наверху печатной страницы

elem {
    widows: 5;
}

filter

  • blur()

  • brightness()

  • contrast()

  • drop-shadow()

  • grayscale()

  • hue-rotate()

  • invert()

  • opacity()

  • saturate()

  • sepia()

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

.colorize-navy {
  filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}

.colorize-blue {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}