Шпаргалка

All CSS Pseudo Elements
Selector Example Example description
::after p::after Insert something after the content of each <p> element
{content: "something";}
::before p::before Insert something before the content of each <p> element
::first-letter p::first-letter Selects the first letter of each <p> element
::first-line p::first-line Selects the first line of each <p> element
Псевдоклассы задают поведение/свойство существующих(!) элементов, в зависимости от
событий/статуса/положения. А псевдоэлемент условно генерирует несуществующий(!) в html элемент (потому и
псевдо-), ведь ни первая буква ни первая строка в коде ничем не определена, к которому потом применяет
заданный стиль. Наглядно, в случае с :first-line, если менять ширину окна просмотра, то и первая строка будет
постоянно пересчитываться, т.е. будут меняться границы контейнера того самого "несуществующего"
(псевдо)элемента.
::selection p::selection Selects the portion of an element that is selected by a user

В сss3 псевдоэлементы ::after, ::before, ::first-letter, ::first-line с двумя двоеточиями, но браузеры поддерживают и одно
двоеточие в их случае. А ::selection пишется строго с двумя двоеточиями, где можно задать только цвет
выделенного текста (color) и цвет фона для него (background-color). Следует использовать вендорный
префикс ::moz-selection после задания ::selection
All CSS Pseudo Classes

Selector Example Example description
:link a:link Selects all unvisited links

:visited a:visited Selects all visited links
:hover a:hover Selects links on mouse over
:active a:active Selects the active link
Следует придерживаться порядка написания согласно правилу - "LoVe Hate" - :link - непосещенные
ссылки, :visited - посещенные ссылки, :hover - при наведении, :active - при нажатии.
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
Псевдокласс :enabled используется для применения стиля к доступным (не заблокированным) элементам форм.
По умолчанию, все элементы форм являются доступными, если в коде HTML к ним не добавляется
атрибут disabled.
:focus input:focus Selects the <input> element that has focus (клавишей TAB или нажатием
клавишей мыши)
:empty p:empty Все пустые элементы p, которые не содержат дочерних элементов,
текста или пробелов.
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Выбирает элемент, если этот элемент - параграф и это второй
элемент одного родителя.
p:nth-child(3n+2) - Выбирает каждый третий элемент <p>, начиная со второго элемента относительно его
родителя; число - порядковый номер указанного элемента; odd или 2n+1 - все нечетные номера элементов; even
или 2n - все четные номера элементов.
:nth-last-child(n) p:nth-last-child(odd) В отличие от псевдокласса :nth-child отсчет ведется не от первого
элемента, а от последнего.
:nth-of-type(n) p:nth-of-type(2) Означает выбрать второй параграф одного родителя.
:nth-last-of-type(n) p:nth-last-of-type(2) В отличие от псевдокласса :nth-of-type отсчет ведется не от
первого элемента, а от последнего.
:only-child p:only-child Selects every <p> element that is the only child of its parent
:required input:required Selects <input> elements with a "required" attribute specified
:target #news:target Selects the current active #news element (anchor name)
:required Применяет стилевые правила к тегу <input>, у которого установлен атрибут required. Он
позволяет выделять поля обязательные к заполнению перед отправкой формы.
:valid Проверка содержимого полей формы на соответствие указанному типу. Например, для
type="number" вводится число, а не буквы, для type="email" корректный адрес эл. почты.
Селекторы атрибутов
Стиль применяется к тем тегам, внутри которых добавлен
Селектор[атрибут]
указанный атрибут.
Устанавливает стиль для элемента в том случае, если значение
Селектор[атрибут^="значение"]
атрибута тега начинается с указанного текста.
Селектор[атрибут$="значение"]
атрибута оканчивается указанным текстом.
Селектор[атрибут*="значение"]
атрибута содержит указанный текст.
Селектор[атрибут~="значение"] Устанавливает стиль для элемента в том случае, если у атрибута
<div class="block tag"> [class~="block"] имеется указанное значение или оно входит в список значений,
h3 { color: green; } разделяемых пробелом.
НАСЛЕДОВАНИЕ И ПРИОРИТЕТНОСТЬ
Селекторы потомков. (предки-потомки).
EF Любой элемент F, являющийся потомком элемента E.
Дочерние селекторы. (родитель-ребенок)
E>F Любой элемент F, строго дочерний относительно элемента E.
Смежные селекторы. (дети одного родителя - на одном уровне)
E~F Любой элемент F, непосредственно перед которым идёт элемент
E.
Смежные селекторы. (ближайший сосед) Любой
E+F элемент F, непосредственно перед которым идёт элемент E.
100 баллов за
1000 баллов каждый id
10 баллов за каждый 1 балл за каждый
!important #id .class tags
style :pseudo-class ::pseudo-elements
[attributes]
3. user !important - При изменении свойств обозревания веб-страницы в браузере (c 2мя файлами стилей).
2. author (style.css) - Авторские стили имеют большую приоритетность, нежели стили по умолч. в браузере.
1. default browser - По умолчанию в браузере для элементов
Выбираются все стили подключенные к текущей странице с учетом типа устройства, на котором происходит
просмотр. Происходит сортировка свойств с учетом имеющихся правил !important и источников CSS (браузерные,
авторские и пользовательские таблицы). Делается еще одна сортировка, но уже по весу селекторов. И далее
последняя сортировка, где вычисляются те свойства, которые, находясь в селекторах с одинаковым весом и
влияя на один и тот же элемент, имеют дубли. Из них выбираются те, которые располагаются ниже в CSS-коде.
ФОРМАТИРОВАНИЕ ТЕКСТА
font: [font-style font-variant font-weight] font-size [/line-height] font-family;
font-style: normal | italic | oblique italic - курсив
normal - обычное начертание oblique - наклонное (как курсив)
font-variant: normal | small-caps (капитель) small-caps - строчные символы как
normal - регистр по умолчанию заглавные уменьшенного размера
font-weight: bold | normal | 100 - 900 700 — жирное (аналогично bold)

400 — нормальное (аналогично normal) начертание
font-size: размер шрифта; Базовый размер: 100%=1em=16px=12pt=medium
4px - 0.25rem 32px - 2rem rem при наследовании задает размер шрифта равным 0,75 единиц
12px - 0.75rem 36px - 2.25rem от базового, а не от размера шрифта текущего родительского
элемента (в отличии от % и em). Например, можно установить
16px - 1rem 40px - 2.5rem базовый размер 20px для корневого элемента:
20px - 1.25rem 48px - 3rem html { font-size: 20px; } // 20px станут равными 1rem
24px - 1.5rem 56px - 3.5rem А затем 15px для абзаца:
p { font-size: .75rem; } // вычисления относительно 20px
28px - 1.75rem 64px - 4rem
line-height - Для блочных элементов определяет минимальную высоту строки текста. Для внедряемых строчных
элементов (вроде <img>) свойство line-height не оказывает никакого эффекта. Для остальных строчных элементов line-
height задаёт высоту, которая используется Устанавливает
для расчёта высоты строки блока.
семейство шрифта
font-family: Arial, "Helvetica Neue",
font-family Helvetica, sans-serif;
serif — шрифты с засечками (антиквенные) - "Times New Roman", Georgia.

sans-serif — рубленые (шрифты без засечек или гротески) - Arial, Verdana, Tahoma.
monospace — моноширинные, ширина каждого символа в таком семействе одинакова - Courier New.
cursive — курсивные шрифты; fantasy — декоративные шрифты.
(.woff) — расширение формата шрифта (.ttf) со сжатием и полностью идентичный оригиналу.
@font-face { Продолжение:
font-family: 'PTSans';
src: url('PTSansRegular.woff2')
format('woff2'), @font-face {
url('PTSansRegular.woff') font-family: 'PTSans';
format('woff'), src: url('PTSansBold.woff2') format('woff2'),
font-weight: normal; url('PTSansBold.woff') format('woff');
font-style: normal; font-weight: bold;
} font-style: normal;
}
@font-face {
font-family: 'PTSans';
src: url('PTSansBoldItalic.woff2') format('woff2'),
@font-face { url('PTSansBoldItalic.woff') format('woff');
font-family: 'PTSans'; font-weight: bold;
src: url('PTSansItalic.woff2') font-style: italic;
format('woff2'), }
url('PTSansItalic.woff') format('woff');
font-weight: normal;
font-style: italic; p{
} font-family: PTSans;
letter-spacing - интервал между символами } ; word-spacing - между словами. (px, em, %)
text-transform: capitalize | lowercase | uppercase | none | inherit
capitalize Первый Cимвол Каждого Слова В Предложении Будет Заглавным.
lowercase все символы текста становятся строчными (нижний регистр).
uppercase ВСЕ СИМВОЛЫ ТЕКСТА СТАНОВЯТСЯ ПРОПИСНЫМИ (ВЕРХНИЙ РЕГИСТР).
none - Не меняет регистр символов (по умолчанию), inherit - Наследует значение родителя.
text-decoration: [ blink line-through overline underline ] | none | inherit
line-through Создает перечеркнутый текст (пример).
overline Линия проходит над текстом (пример).
underline Устанавливает подчеркнутый текст (пример).
none Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по
умолчанию.
text-shadow: <сдвиг по x(тень по горизонтали)> <сдвиг по y (по вертикали)> <радиус размытия> <цвет>
*(сss3)
line-height: Межстрочный интервал (интерлиньяж) = размер шрифта (100%) минус line-height.

(%, em,
px, число) line-height: 1.5; - число-коэф. умножается на размер шрифта.
*Стандартный размер межстрочного интервала браузера составляет 120%.
text-align: center | justify | left | right - горизонтальное выравнивание текста
text-indent: <значение> - отступ первой строки; (px - абсолютные значения, em - кол-во символов - базируется
относительно размера шрифта)
box-shadow: none | <тень> [,<тень>]* где <тень>: inset <сдвиг по x> <сдвиг по y> <радиус размытия>
<растяжение> <цвет>
-webkit-box-shadow: 2px 8px 7px -4px rgba(0,0,0,1);
-moz-box-shadow: 2px 8px 7px -4px rgba(0,0,0,1);
box-shadow: 2px 8px 7px -4px rgba(0,0,0,1);
Black #000000 0, 0, 0 WhiteSmoke #F5F5F5 245, 245, 245

Gray #808080 128, 128, 128 Azure #F0FFFF 240, 255, 255
Silver #C0C0C0 192, 192, 192 Lavender #E6E6FA 230, 230, 250
White #FFFFFF 255, 255, 255 Gainsboro #DCDCDC 220, 220, 220
Magenta #FF00FF 255, 0, 255 Thistle #D8BFD8 216, 191, 216
Purple #800080 128, 0, 128 Plum #DDA0DD 221, 160, 221
Red #FF0000 255, 0, 0 Violet #EE82EE 238, 130, 238
Maroon #800000 128, 0, 0 Orchid #DA70D6 218, 112, 214
Yellow #FFFF00 205, 92, 92 MediumOrchid #BA55D3 186, 85, 211
Olive #808000 240, 128, 128 MediumPurple #9370DB 147, 112, 219
Lime #00FF00 250, 128, 114 Indigo #4B0082 75, 0, 130
Green #008000 233, 150, 122 DarkOrchid #9932CC 153, 50, 204
Aqua #00FFFF 205, 92, 92 DarkMagenta #8B008B 139, 0, 139
Teal #008080 240, 128, 128 MediumVioletRed #C71585 199, 21, 133
Blue #0000FF 250, 128, 114 Crimson #DC143C 220, 20, 60
Navy #000080 233, 150, 122 DeepPink #FF1493 255, 20, 147
Orange #FFA500 255, 165, 0 PaleVioletRed #DB7093 219, 112, 147
RosyBrown #BC8F8F 188, 143, 143
HotPink #FF69B4 255, 105, 180
color: rgba(255, 100, 50, .5) LightPink #FFB6C1 255, 182, 193
Pink #FFC0CB 255, 192, 203
MistyRose #FFE4E1 255, 228, 225
Snow #FFFAFA 255, 250, 250 LavenderBlush #FFF0F5 255, 240, 245
Beige #F5F5DC 245, 245, 220 Bisque #FFE4C4 255, 228, 196
Khaki #F0E68C 240, 230, 140 PeachPuff #FFDAB9 255, 218, 185
Peru #CD853F 205, 133, 63 LightCoral #F08080 240, 128, 128
Sienna #A0522D 160, 82, 45 IndianRed #CD5C5C 205, 92, 92
Chocolate #D2691E 210, 105, 30 Brown #A52A2A 165, 42, 42
SandyBrown 244, 164, 96 DarkRed #8B0000 139, 0, 0
#F4A460
BurlyWood #DEB887 222, 184, 135 FireBrick #B22222 178, 34, 34
Wheat #F5DEB3 245, 222, 179 Tomato #FF6347 255, 99, 71

Cornsilk #FFF8DC 255, 248, 220 LemonChiffon #FFFACD 255, 250, 205
LightYellow 255, 255, 224 Gold #FFD700 255, 215, 0
#FFFFE0
LimeGreen #32CD32 LawnGreen #7CFC00 124, 252, 0
50, 205, 50
ForestGreen #228B22 34, 139, 34
SeaGreen #2E8B57 46, 139, 87 DarkGreen #006400 0, 100, 0
PaleGreen #98FB98 152, 251, 152 SpringGreen #00FF7F 0, 255, 127
Turquoise #40E0D0 64, 224, 208 LightSeaGreen #20B2AA 32, 178, 170
Aquamarine 127, 255, 212 LightSkyBlue #87CEFA 135, 206, 250
#7FFFD4
CornflowerBlue 100, 149, 237 DeepSkyBlue #00BFFF 0, 191, 255
#6495ED
RoyalBlue #4169E1 65, 105, 225 DodgerBlue #1E90FF 30, 144, 255
SteelBlue #4682B4 70, 130, 180 MidnightBlue #191970 25, 25, 112
list-style-type: none; disk
list-style-position: inside | outside circle
list-style-image: url('путь к файлу') | none | inherit square
upper-roman
lower-alpha
upper-alpha
decimal
Box model css
*{
box-sizing: border-box;
}
SCSS
<body> Объявление переменных:
<span class="abc">Мой текст</span>
<a class="abc-button">Кнопка</a> $mycolor: #bcbcbc;
</body> $mysize: 24px;
Примеси:
@mixin gradient($color1, $color2) {
background: $color1; /* Old browsers */
background: -moz-linear-gradient(top, $color1 0%, $color2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color1), color-stop(100%,$color2)); /*
Chrome,Safari4+ */
background: -webkit-linear-gradient(top, $color1 0%,$color2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, $color1 0%,$color2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, $color1 0%,$color2 100%); /* IE10+ */
background: linear-gradient(to bottom, $color1 0%,$color2 100%); /* W3C */
}
Передача параметров: Применение для кнопки: Для текста:

@mixin mybutton($width, $height, $text- .abc-button { .abc {
size, $text-color) { @include mybutton(200px, 80px, font-size: $mysize;
width: $width; 32px, red); color: $mycolor;
@include gradient(#bcbcbc,
height: $height; }
#eee);
line-height: $height;
text-align: center;
font-size: $text-size; &:hover {
color: $text-color; @include gradient(#ddd, #999);
border: 1px solid black; }
display: block;
cursor: pointer; &:active {
} @include gradient(#999, #777);
}
}
LESS
<body>
<span class="my-header">Заголовок</span>
<span class="my-header2">Заголовок</span>
</body>
Объявление переменных:
@light-blue: #5B83AD;
@nice-blue: @light-blue + #111;
@text-size: 24px;
Примеси:
.bordered {
border-bottom: 1px solid orange;
}
Для двух заголовков:

.my-header {
color: @light-blue;
font-size: @text-size;
.loop(5);
.bordered;
}
.my-header2 {
color: @nice-blue + #333;
font-size: @text-size * 1.5;
.bordered;
}
1. Синтаксис, валидность и логика

1.1. Для отступов у вложенных элементов используются два пробела. Для правильного форматирования
используйте файл .editorconfig в вашем редакторе.
(https://github.com/htmlacademy/codeguide/blob/master/.editorconfig)
1.2. Теги и их атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются
двойные кавычки.
1.3. Необязательный закрывающий слеш у одиночных тегов (<img>, <br> и другие) не ставится.
Необязательные закрывающие теги (например, </p>) не пропускаются.
1.4. Обязательное указание <!DOCTYPE html>, кодировки: utf-8. Для элемента <html> в атрибуте lang
должен указываться соответствующий язык документа.
1.5. Стилевые файлы с помощью <link> подключаются внутри <head>. При этом атрибут type для тега
<link> не указывается, так как его значение text/css устанавливается по умолчанию. Правило @import
работает медленнее, чем тег <link>. В стилях @import не должен использоваться.
1.6. Скрипты должны подключаться в самом низу страницы, чтобы при её загрузке не блокировать
отображение содержимого. При подключении скриптов в теге <script> атрибут type не указывается, так как
его значение text/javascript устанавливается по умолчанию.
<body>

<script src="app.js"></script>
</body>
1.7. Изображениям <img> должны быть явно заданы с помощью атрибута размеры в пикселях или в
процентах. В случае пикселей размерность не нужна. По возможности изображениям указываются
действительные размеры, так как это улучшает производительность отрисовки страницы: браузер не
будет перерисовывать страницу в процессе загрузки и отображения изображения.
<div class="logo-area">
<img src="logo.png" alt="" width="300" height="150">
</div>
1.8. После значения свойства обязательно ставится точка с запятой. Для отступов внутри правил
используются два пробела. Названия тегов и свойств в правилах пишутся строчными буквами. Во всех
случаях в стилях используются двойные кавычки. После двоеточия в правилах ставится один пробел. А
перед двоеточием пробел не нужен.
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 1px 2px #cccccc, inset 0 1px 0 #ffffff;
}
Закрывающая фигурная скобка пишется на новой строке и без отступа. Следующее после этого правило
отделяется пустой строкой.
1.9. Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов.
Для записи используются строчные буквы. Например, #f5f5f5. Начальный ноль для значений сокращается
(например, .5 вместо 0.5). После запятых внутри значений rgb(), rgba(), hsl(), hsla() пробелы ставятся.
Это повышает удобочитаемость. До и после комбинатора между селекторами (например, p > a) ставится
один пробел. Единицы измерения не пишутся, там где в них нет необходимости. Например, margin: 0 auto.
1.9. Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов.
Для записи используются строчные буквы. Например, #f5f5f5. Начальный ноль для значений сокращается
(например, .5 вместо 0.5). После запятых внутри значений rgb(), rgba(), hsl(), hsla() пробелы ставятся.
Это повышает удобочитаемость. До и после комбинатора между селекторами (например, p > a) ставится
один пробел. Единицы измерения не пишутся, там где в них нет необходимости. Например, margin: 0 auto.
1.10. Имена классов пишутся строчными буквами, используется дефис (но не знаки нижнего
подчёркивания или camelCase) (например, .button и .button-danger). Имена классов должны быть такими,
чтобы по ним можно было быстро понять какому элементу страницы задан класс: избегайте сокращений
(единственное исключение — .btn для кнопок), но не делайте их слишком длинными (более трёх слов).
Для написания классов используются английские слова и термины. Транслитом названия классов и
атрибутов не пишутся.
1.11. Альтернативные варианты шрифта и тип семейства указываются в конце перечисления font-family.
Альтернативный шрифт должен быть такого же типа, что и нестандартный. Обязательный порядок
указания шрифтов: нестандартный шрифт, веб-безопасный, тип шрифта.
Список веб-безопасных шрифтов можно посмотреть здесь — cssfontstack.com.

2. Порядок свойств
2.1 Объявления логически связанных свойств группируются в следующем порядке:
.declaration-order {
Далее: 3.
1. /* Позиционирование */
/* Типографика */
position: absolute;
font: normal 13px/1.5 "Arial", sans-serif;
top: 0;
font-style: normal;
right: 0;
font-size: 13px;
bottom: 0;
line-height: 1.5;
left: 0;
font-family: "Arial", sans-serif;
z-index: 100;
text-align: center;
2. /* Блочная модель */ 4. /* Оформление */

display: block; color: #333333;
float: right; background-color: #f5f5f5;
width: 100px; border: 1px solid #e5e5e5;
height: 100px; border-radius: 3px;
margin: 10px; opacity: 1;
padding: 10px; }
Сгруппированные объявления 5. /* Анимация и другие эффекты */

в правиле отделяются друг от друга transition: color 1s;
пустой строкой. opacity: 1;
Порядок объявления подробных правил, таких как font-size, font-family, line-height, должен
соответствовать порядку в сокращённой версии правила. В случае совместного использования подробных
и сокращённых правил, первой должна идти сокращённая версия.
<!DOCTYPE html> (режим html5) Выбор режима документа для браузера
<html lang="en"> Контейнер, включающий в себя все содержимое страницы
<head> Помощь браузеру в преобразовании страницы
<meta charset="UTF-8"> Кодировка документа
<meta name="description" content="..."> Ccылки
<meta name="keywords" content="..."> validator.w3.org - Валидатор
<title>Document</title> jigsaw.w3.org/css-validator
<link rel="stylesheet" href="style.css">

</html>
<header> Верх страницы или раздела
<menu> li Меню с выпадающими списками
<nav> a Навигационное меню
<section>, <main> Сгрупированное содержимое
<aside> Другой блок на сайте (баннер)
<article> Статьи, новости, пост в блоге
<figure>IMG<figcaption>Подпись к картинке</figcaption></figure>
<footer> Подвал сайта, статьи
Создание якоря
<p><a name="top"></a></p>
<p>...</p>
<p><a href="#top">Наверх</a></p>
Ссылка на адрес электронной почты
<p><a href="mailto:ask@htmlbook.ru">Задавайте вопросы по электронной почте</a></p>
background: [background-attachment background-color background-image background-position

background-repeat] | inherit
background-attachment: fixed | scroll | inherit
background-color: <цвет> | transparent | inherit
background-image: url(путь к файлу) | none | inherit
background-position: [left | center | right | <проценты> | <значение>] ||
[top | center | bottom | <проценты> | <значение>] | inherit
background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit
background: url(images/hand.png) repeat-y, #fc0 url(images/bg-right.png) repeat-y 100% 0; //2 фона в 1
background-size: [ <проценты> | auto ]{1,2} | cover | contain
<проценты> Задает размер фоновой картинки в процентах от ширины или высоты элемента.
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются
auto исходными; если только для одной стороны картинки (100px auto), то размер вычисляется
автоматически исходя из пропорций картинки
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота
cover равнялась ширине или высоте блока.
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком
contain поместилась внутрь блока
Если установлено одно значение, оно задает ширину фона, второе - принимается за auto. Пропорции картинки при
этом сохраняются. Использование 2х значений задает ширину и высоту фоновой картинки.
border: [border-width border-style border-color] | inherit | none
solid dashed dotted double
groove ridge inset outset
display: block | inline | inline-block | none
Элемент показывается как блочный. Применение этого значения для встроенных элементов,
block например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в
начале и отображается
в конце содержимого.
inline Элемент как строчный.
Это значение генерирует блочный элемент, который обтекается другими элементами веб-
inline-block страницы подобно строчному.
float: left | right | none | inherit
Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его
left по правой стороне.
Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой
right стороне.
inherit Наследует значение родителя.
none Обтекание элемента не задается.
Отмена обтекания - clear: both;
1 метод .clearfix:after { content: ""; display: table; clear: both; }
2 метод <div class="clear"></div> .clear { clear: both; }
overflow: auto | hidden | scroll | visible | inherit
visible Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
hidden Отображается только область внутри элемента, остальное будет скрыто.

scroll Всегда добавляются полосы прокрутки.
auto Полосы прокрутки добавляются только при необходимости.
inherit Наследует значение родителя.
Свойство overflow-y управляет отображением содержания блочного элемента по вертикали, если контент целиком не
помещается и выходит за область сверху или снизу от блока. Также можно использовать свойство overflow-x, чтобы
скрыть только горизонтальную полосу прокрутки.
Ccылки
fonts.google.com - Бесплатные шрифты jsfiddle.net - Онлайн-песочница
fontsquirrel.com - Генератор расширений cssdesk.com
cssfontstack.com - Поддержка шрифтов codepen.io
css3generator.com - Генератор css3
foter.com - Бесплатный фото-сток

unsplash.com - Бесплатный HD фото-сток
flaticon.com - Бесплатный сток icons
Расширения
Firefox Chrome
Firebug Adblock Plus
Firesizer Kenzo VK
Web developer Windows Resizer
Web developer
Формы
<form name="myform" action="formdata.php" method="POST">
<fieldset><legend>Form Title</legend>
<p><label>Your name: <input type="text" name="name" maxlength="10" size="30" placeholder="Your
name" required></label></p>
<p><label>Email: <input type="email" name="email" autofocus="autofocus" placeholder="Ваш e-mail"
required></label></p>
<p><label>Password: <input type="password" name="password required"></label></p>
<p>
<label for="textid">Your comments:</label>
<textarea name="comments" cols="20" rows="4" id="textid" required>Text</textarea>
</p>
<p>
<select name="statistic" multiple>
<option value="chrome">Chrome</option>
<option selected value="mozilla">Mozilla</option>
<option value="opera">Opera</option>
<option value="ie">Internet Explorer</option>
</select>
</p>
<p>OS</p>
<p><label><input type="checkbox" name="option1" value="a1" checked>Windows 7</label>
<br><label><input type="checkbox" name="option2" value="a2">Windows 8</label>
<br><label><input type="checkbox" name="option3" value="a3">Windows 10 </label>
<br><label><input type="checkbox" name="option4" value="a4">Linux</label>
</p>
<p>Question</p>
<label><input type="radio" name="answer" value="yes">Yes</label>
<label><input type="radio" name="answer" value="no">No</label>
</p>
<p>Телефон: <input type="tel" name="tel" pattern="8495-[0-9]{3}-[0-9]{2}-[0-9]{2}" /> - (пример 8495-111-
11-11)</p>
<p>Range:<input type="range" name="range" min="1" max="100" /></p>
<p>Number: <input type="number" min="1" max="12" step="1" /></p>
<p>Color: <input type="color" name="color" /></p>
<p>Search: <input type="text" name="search" list="search" /></p>
<datalist id="search" >

<option label="HTML" value="html"></option>
<option label="HTML5" value="html5"></option>
<option label="CSS" value="css"></option>
</datalist>
<p>Date: <input type="date" name="date" /></p>
<p>Time: <input type="time" name="time" /></p>
<p>Date and Time: <input type="datetime-local" name="datetime" /></p>
<p>File:<input type="file" name="file1" value=""></p>

<p><input type=hidden" name="hidden1" value="">
</datalist>
<p>Date: <input type="date" name="date" /></p>
<p>Time: <input type="time" name="time" /></p>
<p>Date and Time: <input type="datetime-local" name="datetime" /></p>
<p>File:<input type="file" name="file1" value=""></p>

<p><input type=hidden" name="hidden1" value="">
<progress value="10" max="10"></progress>
<input type="reset" name="reset1" value="Reset">
</p>
<p><input type="submit" name="submit" value="Отправить" /></p>
</form>
label { width: 200px; float:left; }
Drag and Drop

<div>
<img id="img_1" src="html5.jpg" alt="" draggable="true" ondragstart="dragStart(event)" />
<img id="img_2" src="css3.jpg" alt="" draggable="true" ondragstart="dragStart(event)" />
</div>
<br />
<div ondrop="drop(event)" ondragover="dragOver(event)">Контейнер</div>
<script type="text/javascript">
function dragStart(event) {
event.dataTransfer.setData("text/plain", event.target.id); // Сохранение элемента
}
function dragOver(event) {
event.preventDefault(); // Отмена действия браузера по умолчанию
}
function drop(event) {
event.preventDefault();
var img = event.dataTransfer.getData("text/plain"); // Загрузка элемента
var new_img = document.getElementById(img).cloneNode(true);
event.target.appendChild(new_img);
}
</script>
Определение местоположения пользователя

navigator.geolocation.getCurrentPosition(success, error);
function success(position) {
document.write("Широта: " + position.coords.latitude * Math.random() * 5);
document.write("<br />");
document.write("Долгота: " + position.coords.longitude * Math.random() * 5);
}
navigator.geolocation.getCurrentPosition(success, error);
function success(position) {
document.write("Широта: " + position.coords.latitude * Math.random() * 5);
document.write("<br />");
document.write("Долгота: " + position.coords.longitude * Math.random() * 5);
}
function error(e) {
switch (e.code) {
case e.PERMISSION_DENIED:
alert("Вы запретили считывание информации о Вашем местоположении.");
break;
case e.POSITION_UNAVAILABLE:
alert("Браузер не смог определить Ваше местоположение.");
break;
case e.TIMEOUT:
alert("Браузер не успел определить Ваше местоположение.");
break;
case e.UNKNOWN_ERROR:
alert("Произошла неизвестная ошибка.");
break;
}
}
transition: transition-property || transition-duration || transition-timing-function || transition-delay

#bar {
top: -5.5em; <body>
right: 5em; <ul id="bar">
<li>1</li><li>2</li>
padding: .5em;
<li>3</li><li>4</li><li>↓</li>
margin: 0;
</ul>
position: absolute; </body>
width: 2em;
background: #333;
color: #fff;
text-align: center; transition-timing-function:
/* Переход */ ease
-webkit-transition: top 1s ease-out 0.5s; ease-in-out
-moz-transition: top 1s ease-out 0.5s; linear
-o-transition: top 1s ease-out 0.5s; step-start | step-end
transition: top 1s ease-out 0.5s; steps(<число>, start | end)
} cubic-bezier
#bar:hover { top: 0; }
transition: all 0s ease 0s;
transition: all 1s ease-in .5s;
animation: animation-name || animation-duration || animation-timing-function || animation-delay
div { <body>
width: 100px; <div></div>
height: 100px; </body>
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
} Значение по умолчанию
@-webkit-keyframes example { /* Safari 4.0 - 8.0 */ animation-name: none
0% {background-color:red; left:0px; top:0px;} animation-duration: 0s
25% {background-color:yellow; left:200px; top:0px;} animation-timing-function: ease
50% {background-color:blue; left:200px; top:200px;} animation-delay: 0s
75% {background-color:green; left:0px; top:200px;} animation-iteration-count: 1
100% {background-color:red; left:0px; top:0px;} animation-direction: normal
} animation-fill-mode: none
@keyframes example { /* Standard syntax */
animation-play-state: running
0% {background-color:red; left:0px; top:0px;}
0% {background-color:red; left:0px; top:0px;} animation-duration: 0s
25% {background-color:yellow; left:200px; top:0px;} animation-timing-function: ease
50% {background-color:blue; left:200px; top:200px;} animation-delay: 0s
75% {background-color:green; left:0px; top:200px;} animation-iteration-count: 1
100% {background-color:red; left:0px; top:0px;} animation-direction: normal
} animation-fill-mode: none
@keyframes example { /* Standard syntax */
animation-play-state: running
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;} animation: example 3s ease-out
75% {background-color:green; left:0px; top:200px;} infinite;
}
rotate - Поворот элемента на заданный угол относительно точки трансформации, задаваемой

свойством transform-origin.
transform: rotate(25deg);
scale - Масштаб элемента по горизонтали и вертикали.
transform: scale(2, .5); Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает
масштаб.
transform: skewX(25deg); - Наклоняет элемент на заданный угол.
transform: skewY(25deg);
translate - Сдвигает элемент на заданное значение по горизонтали и вертикали.
transform: translate(20px, 10px);
-moz-transform: rotate(45deg) translate(24px, 25px); /* Firefox */

-ms-transform: rotate(45deg) translate(24px, 25px); /* IE */
-webkit-transform: rotate(45deg) translate(24px, 25px); /* Safari, Chrome, iOS */
-o-transform: rotate(45deg) translate(24px, 25px); /* Opera */ transform: rotate(45deg) translate(24px, 25px);
div { <body>
height: 400px; <div id="block_1"></div>
width: 500px; <div id="block_2"></div>
} <div id="block_3"></div>
#block_1 { <div id="block_4"></div>
background: linear-gradient(20deg, #f00, #00f); </body>
transform: translate(250px, 0);
}
#block_2 {
background: linear-gradient(20deg, #f00 0%, #0f0 50%, #00f 100%);
transform: scale(2.5, 0.5);
}
#block_3 {
background: repeating-linear-gradient(20deg, #f00 0px, #0f0 10px, #00f
15px);
transform: rotate(75deg);
}
#block_4 {
background: radial-gradient(#f00, #00f);
transform: skew(50deg, 20deg) translate(250px, 0);
}
Canvas
<canvas id="canvas" width="500" height="500"></canvas>

function drawText() {
can.font = "30px Times New Roman";
var can = document.getElementById("canvas").getContext("2d");
can.fillText("Пример текста", 150, 70);
function drawTriangle() {
}
can.beginPath(); // Для сложной фигуры
function drawImg() {
can.moveTo(10, 15);
var img =
can.lineTo(20, 100);
document.createElement("img");
img.src = "html5.jpg";
can.closePath();
img.alt = "";
can.stroke();
img.onload = function() {
}
can.drawImage(img, 300, 350);
function drawRect() {
}
can.strokeStyle="#f00";
}
can.fillStyle="#fc0";
drawTriangle();
can.lineWidth = 10;
document.createElement("img");
img.src = "html5.jpg";
can.closePath();
img.alt = "";
can.stroke();
img.onload = function() {
}
can.drawImage(img, 300, 350);
function drawRect() {
}
can.strokeStyle="#f00";
}
can.fillStyle="#fc0";
drawTriangle();
can.lineWidth = 10;
drawRect();
can.fillRect(150, 150, 100, 40);
drawText();
can.clearRect(200, 160, 20, 20);
drawImg();
can.strokeRect(250, 250, 100, 40);
</script>
}
Вставка аудио

<audio controls="controls" autoplay="autoplay">
<source src="audio.ogg" type="audio/ogg" />
<source src="audio.mp3" type="audio/mpeg" />
<p>К сожалению, Ваш браузер не поддерживает тег audio. Обновите его!</p>
</audio>
Вставка видео
<video width="800" height="450" controls="controls" autoplay="autoplay">
<source src="video.ogv" type="video/ogg" />
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<p>К сожалению, Ваш браузер не поддерживает тег video. Обновите его!</p>
</video>
Дополнительно
Имя Код Вид Описание
неразрывный пробел
£ £ £ фунт стерлингов
€ € € знак евро
¶ ¶ ¶ символ параграфа
§ § § параграф
© © © знак copyright
® ® ® знак зарег. торговой марки
™ ™ ™ знак торговой марки
° ° ° градус
± ± ± плюс-минус
¼ ¼ ¼ дробь - одна четверть
½ ½ ½ дробь - одна вторая
¾ ¾ ¾ дробь - три четверти
× × × знак умножения
÷ ÷ ÷ знак деления
&fnof; ƒ ƒ знак функции
" " " двойная кавычка
& & & амперсанд
< < < знак "меньше"
> > > знак "больше"
1. TЗ, 2. Макет, нарезка изображений, 3. Верстка (адаптивная, валидная, ...)
<img src="URL" alt="альтернативный текст" />,  <dl><dt> Термин </dt>
<sub>нижний регистр</sub>, <sup>верхний</sup> <dd> Определение </dd> </dl>
<ol></ol> - нумерованный список, <ul></ul> - маркированный <table> <tr><td>
colspan - объединение ячеек по горизонтали, rowspan - по вертикали. </td></tr></table>
МЕТОДОЛОГИЯ БЭМ БЛОК__ЭЛЕМЕНТ_МОДИФИКАТОР
БЛОК независимый элемент страницы с собственным смыслом
ЭЛЕМЕНТ составная часть блока, имеющая смысл только внутри блока
МОДИФИКАТОР модификация внешнего вида или поведения блока или элемента
Не использовать id. Избегать тегов селекторов, селекторов-потомков, вложенных селекторов
Фиксированный макет (fixed) — макет страницы, ширина контента которой жестко задана в px и не меняется в
зависимости от размеров окна браузера.
Резиновый тип макетов (дословно с английского "жидкие", liquid), - контент принимает размер любого экрана за
счет % вместо пикселей.
Адаптивный макет (adaptive) базируется на использовании медиа запросов (англ. media queries) для адаптации
контента под различные параметры экранов. (px + media-queries)
Отзывчивый (responsive) тип макетов страниц в отличие от адаптивного основывается на принципе «резины»,
но также использует медиа запросы. Отзывчивая страница не «прыгает» по контрольным точкам, а плавно изменяется
между ними. (% + media-queries)
Handset / Tablet
Breakpoint (dp) Handset / Tablet Landscape Window
Portrait
360 medium handset xsmall
480 large handset small handset xsmall
600 small tablet medium handset small
840 large tablet large handset small
960 small tablet small
1024** large tablet medium
1280** large tablet medium
1440** large
@media screen and (min-width : Минимальная ширина окна) and (max-width: Максимальная ширина окна) {
/*Ваш код CSS*/
}
<link rel="stylesheet" media="all and (orientation:portrait)" href="/portrait.css">

<link rel="stylesheet" media="all and (orientation:landscape)" href="/landscape.css">
min-width - Минимальная ширина окна min-resolution - Минимальная плотность экрана
max-width - Максимальная ширина окна -webkit-device-pixel-ratio - Коэффициент плотности экрана
-webkit-min-device-pixel-ratio - Минимальный коэффициент плотности
device-width - Ширина устройства экрана
device-aspect-ratio - Соотношение сторон
orientation:landscape - Ландшафтная ориентация
resolution - Плотность экрана orientation:portrait - Портретная ориентация
max-device-width - Максимальная ширина устройства (в пикселях)
<meta name="viewport" content="width=device-width, initial-scale=1.0">


Выравнивание картинки по центру: Адаптивность картинки с обтекающим текстом:

.img-left {
img {
display: block;
display: block;
width: 50%; //для примера
margin: 0 auto;
min-width: 250px;
}
height: auto;
Адаптивные картинки в колонках: float: left;
margin: 0 10px 10px 0;
}
.two-columns, .three-columns {
@media (max-width: 480px) {
display: inline-block;
img {
height: auto;
float: none;
width: 48%;
width: auto;
}
max-width: 100%;
height: auto;
.three-columns { }
width: 32%; }
}
Большое фоновое изображение:

#bg-img {
height: 800px; @media (max-width: 1016px) {
background: url(img.jpg) no-repeat #bg-img { height: 600px; }
center; }
background-size: cover; @media (max-width: 768px) {
#bg-img { height: 300px; }
-webkit-background-size: cover;
}
-moz-background-size: cover; @media (max-width: 480px) {
-o-background-size: cover; #bg-img { height: 170px; }
} }
}
-moz-background-size: cover; @media (max-width: 480px) {
-o-background-size: cover; #bg-img { height: 170px; }
} }
Чтобы вычислить новое процентное отношение внутренних блоков - колонок, нужно взять предыдущее значение -
20%, разделить его на ширину контейнера - 80%, оборачивающего колонки. Далее результат умножаем на 100, таким
образом мы подгоняем ширину колонок, чтобы они уменьшились в 80% от ширины страницы, выделенных контейнеру
колонок. Результат деления в этом примере 20 на 80 равен 0,25. Умножаем на 100 и получаем значение 25%. Таким
образом мы нашли размер для одной из колонок. Ширина второй колонки вычисляется таким же образом: 60 делим на
80 и результат умножаем на 100. Получаем 75%. В итоге контейнер занимает 80% от ширины страницы, а колонки-
блоки, находящиеся внутри него занимают 25% и 75%, что в сумме дает 100% от ширины контейнера.
.pageWrapper { .main {
img { max-width: 1200px; float: right;
max-width: 100%; margin: 0 auto; width: 75%;
} } padding: 0 20px;
}
img.half { .columnWrapper {
max-width: 50%; float: left; .sidebar2 {
} width: 80%; float: right;
} width: 20%;
img.left { padding: 0 20px;
float: left; .sidebar1 { }
margin: 0 10px 10px 0; float: left;
} width: 25%;
padding: 0 20px 0 10px;
img.right { }
float: right;
margin: 0 0 10px 10px;
}
Bootstrap
<link href="../Bootstrap/styles/bootstrap.min.css" rel="stylesheet" />

<link href="../Bootstrap/styles/style.css" rel="stylesheet" />

<script src="../Bootstrap/js/jquery-1.11.1.min.js"></script>

<script src="../Bootstrap/js/bootstrap.min.js"></script>

Phones (<768px) Tablets (≥768px) Medium - Desktops (≥992px) Large devices - Desktops (≥1200px)
.col-xs- .col-sm- .col-md- .col-lg-
12 columns

<div class="container"> … </div>

.container-fluid делает блок растянутым по всей доступной ширине окна просмотра.
<div class="container-fluid"> … </div>
Колоночная верстка в Bootstrap состоит из строк в 12 колонок по горизонтали. При использовании
динамических CSS-запросов, сетка и элементы адаптируются под различные экраны устройств.
Принцип создания макета:
- создание контейнера (див с классом "container");
- создание "строки" (див с классом "row") в диве с классом "container";
Колоночная верстка в Bootstrap состоит из строк в 12 колонок по горизонтали. При использовании
динамических CSS-запросов, сетка и элементы адаптируются под различные экраны устройств.
Принцип создания макета:
- создание контейнера (див с классом "container");
- создание "строки" (див с классом "row") в диве с классом "container";
- создание колонок в "строке". Размер и количество см. в таблице ниже.
ПРАВИЛО! Если количество колонок в одной строке превышает 12, то колонки, превышающие это число,
будут перенесены на новые строки
Для перемещения колонок вправо используются классы .col-md-offset-*. Эти классы увеличивают отступ
слева на * столбцов. Например, .col-lg-offset-4 перемещает .col-lg-4 на 4 столбца вправо.
<h1>h1. Bootstrap heading</h1> 

Текст в теге body по умолчанию отображается шрифтом "Helvetica Neue" размером 14px. Между
параграфами отступ по умолчанию 10px. Для того, чтобы выделить текст параграфа, используется класс
"lead".--> <p class="lead"> … </p>
<!DOCTYPE html>
<html>
<head>
<title>Колоночная верстка. Отступы столбцов.</title>
<link href="../Bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<style>
.col-md-2, .col-md-8, .col-md-12 {
background: #ffb4b4;
border: 1px solid mistyrose;
}
.col-md-3, .col-md-4, .col-md-10 {
background: bisque;
border: 1px solid mistyrose;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row"> 
<div class="col-md-12"> 
<p>Ширина блока в 12 колонок. Полноценная стрoка.</p>
</div>
</div>
<div class="row"> 

<div class="col-md-10 col-md-offset-1">

<p>Ширина блока в 8 колонок. Отступ слева - 1 колонка.</p>
</div>
</div>
<div class="row"> 

<p>Ширина блока в 8 колонок. Отступ слева - 1 колонка.</p>
</div>
</div>
<div class="row"> 

<div class="col-md-3"> 
<p>Ширина блока в 3 колонки</p>
</div>

<p>Ширина блока в 4 колонки. Отступ слева - 1 колонка.</p>
</div>

<p>Ширина блока в 3 колонки. Отступ слева - 1 колонка.</p>
</div>
</div>
<div class="row"> 

<div class="col-md-2">
</div>
<p>Ширина блока в 8 колонок</p>
</div>
</div>
</div>
</div>
</body>
</html>
Flexbox
flex-direction: row | row-reverse | column | column-reverse;
.container { row (default): left to right in ltr
display: flex; /* or inline-flex */
row-reverse: right to left in ltr
flex-flow: flex-direction || flex-wrap;
} column: same as row but top to bottom
column-reverse: same as row-reverse but bottom to top
Порядок блоков: flex-wrap: nowrap | wrap | wrap-reverse;
nowrap (default): single-line / left to right in ltr
.item {
order: целое число; wrap: multi-line / left to right in ltr; right to left in rtl
} wrap-reverse: multi-line / right to left in ltr;
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start (значение по умолчанию) : блоки прижаты к началу главной оси
flex-end: блоки прижаты к концу главной оси
center: блоки располагаются в центре главной оси
space-between: первый блок в начале главной оси, последний блок – в конце
space-around: все блоки равномерно распределены вдоль главной оси, разделяя все свободное
пространство поровну.
flex-direction – направление главной
оси,
justify-content – выравнивание по
главной оси.
align-items – выравнивание по
поперечной оси.
flex-direction – направление главной
оси,
justify-content – выравнивание по
главной оси.
align-items – выравнивание по
поперечной оси.
align-self также отвечает за
выравнивание по перпендикулярной
оси, но задается отдельным flex-
элементам.
align-items: flex-start | flex-end | center | baseline | stretch;

flex-start — элементы выравниваются
от начала перпендикулярной оси;
flex-end — элементы выравниваются
от конца перпендикулярной оси;
center — элементы выравниваются по
центру;
baseline — элементы выравниваются
по базовой линии;
stretch — элементы растягиваются,
занимая все пространство по
перпендикулярной оси (значение по
умолчанию).
flex-flow: flex-direction || flex-wrap
За многострочность внутри flex-контейнера отвечает CSS свойство flex-wrap:

nowrap (значение по умолчанию) : блоки расположены в одну линию слева направо (в rtl справа налево)
wrap: блоки расположены в несколько горизонтальных рядов (если не помещаются в один ряд). Они
следуют друг за другом слева направо (в rtl справа налево)
wrap-reverse: то-же что и wrap, но блоки располагаются в обратном порядке.
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
align-content определяет то, каким

образом образовавшиеся ряды блоков
будут выровнены по вертикали и как
они поделят между собой все
пространство flex-контейнера. Важно:
align-content работает только в
многоколоночном режиме (т.е. в
случае flex-wrap:wrap; или flex-
wrap:wrap-reverse;)
flex-start: ряды блоков прижаты к
началу flex-контейнера.
flex-end: ряды блоков прижаты к концу
flex-контейнера
center: ряды блоков находятся в
центре flex-контейнера
случае flex-wrap:wrap; или flex-
wrap:wrap-reverse;)
flex-start: ряды блоков прижаты к
началу flex-контейнера.
flex-end: ряды блоков прижаты к концу
flex-контейнера
center: ряды блоков находятся в
центре flex-контейнера
space-between: первый ряд блоков
располагается в начале flex-
контейнера, последний ряд блоков
блок – в конце, все остальные ряды
равномерно распределены в
оставшемся пространстве.
space-around: ряды блоков
равномерно распределены в от
начала до конца flex-контейнера,
разделяя все свободное пространство
поровну.
stretch (значение по умолчанию):
Ряды блоков растянуты, дабы занять
все имеющееся пространство.
Создание примесей медиазапросов SCSS

@mixin mq-small-up {
@media (min-width: $screen-small) { $screen-small : 400px;
@content; $screen-medium : 760px;
} $screen-larger: 1000px;
}
p{
font-size: 1.5em;
p{
}
font-size: 1.5em;
@include mq-small-up {
@media (min-width: 400px) {
font-size: 1.75em;
p{
margin-top: 10px;
font-size: 1.75em;
}
margin-top: 10px;
}
}
}
@mixin mq-small {
@media (min-width: $screen-small) and @media (min-width: 400px) and
(max-width: $screen-medium — 1px) { (max-width: 759px) {
@content;
} }
}
$tablet: "(min-width: 768px) and (max-width: 1023px)"; p{

$desktop: "(min-width: 1024px)"; font-size: 16px;
}
p{
font-size: 16px; @media (min-width: 768px) and
(max-width: 1023px) {
@media #{$tablet} { p{
font-size: 18px; font-size: 18px;
} }
}
@media #{$desktop} {
font-size: 20px; @media (min-width: 1024px) {
} p{
} font-size: 20px;
}
}
Azure #F0FFFF 8 0.5 28 1.75
WhiteSmo #F5F5F5
ke 12 0.75 32 2
Lavender #E6E6FA 16 1 36 2.25
Gainsboro#DCDCD
C 20 ВСЕ1.25 40 2.5
Thistle #D8BFD8 24 СИМВОЛ
1.5 48 3
Ы
Plum #DDA0D Все ТЕКСТА
D 56 3.5
символы СТАНОВ
Violet #EE82EE текста ЯТСЯ 64 4
Orchid #DA70D6 становят ПРОПИС
ся НЫМИ
MediumOr #BA55D3
прописны (ВЕРХНИ
chid
ми Й
MediumPu #9370DB (верхний РЕГИСТР
rple регистр). ).
Indigo #4B0082
DarkOrchi #9932CC
d
DarkMage #8B008B
nta
MediumVi #C71585
oletRed
Crimson #DC143C
DeepPink #FF1493
PaleViolet #DB7093
Red
RosyBrow #BC8F8F
n
HotPink #FF69B4
LightPink #FFB6C1
Pink #FFC0CB
MistyRose #FFE4E1
LavenderB #FFF0F5
lush
Snow #FFFAFA
LightYello #FFFFE0
w
Cornsilk #FFF8DC
Bisque #FFE4C4
PeachPuff #FFDAB9
LightCoral #F08080
IndianRed #CD5C5C
Brown #A52A2A
DarkRed #8B0000
FireBrick #B22222
Tomato #FF6347
SandyBrown #F4A460
BurlyWoo #DEB887
d
Wheat #F5DEB3
Beige #F5F5DC
LemonChif #FFFACD
fon
Khaki #F0E68C
Peru #CD853F
Sienna #A0522D
Chocolate #D2691E
Orange #FFA500
Gold #FFD700
LawnGree #7CFC00
n
LimeGree #32CD32
n
ForestGre #228B22
en
DarkGree #006400
n
SpringGre #00FF7F
en
PaleGreen #98FB98
SeaGreen #2E8B57
LightSeaG #20B2AA
reen
Turquoise #40E0D0
Aquamarin #7FFFD4
e
LightSkyBl #87CEFA
ue
DeepSkyB #00BFFF
lue
DodgerBlu #1E90FF
e
MidnightBl #191970
ue
RoyalBlue #4169E1
Cornflower #6495ED
Blue
SteelBlue #4682B4
Описани
Имя Код Вид
е
неразры
вный
пробел
фунт
стерлинг
£ £ £ ов
знак
€ € € евро
символ
парагра
¶ ¶ ¶ фа
парагра
§ § § ф
знак
© © © copyright
знак
зарегист
рирован
ной
торговой
® ® ® марки
знак
торговой
™ ™ ™ марки
° ° ° градус
плюс-
± ± ± минус
дробь -
одна
¼ ¼ ¼ четверть
дробь -
одна
½ ½ ½ вторая
дробь -
три
¾ ¾ ¾ четверти
знак
умножен
× × × ия
знак
÷ ÷ ÷ деления
знак
&fnof; ƒ ƒ функции
двойная
" " " кавычка
амперса
& & & нд
знак
"меньше
< < < "
знак
"больше
> > > "

Шпаргалка

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Шпаргалка

Загружено:

Авторское право:

Доступные форматы

All CSS Pseudo Elements

Selector Example Example description

::selection p::selection Selects the portion of an element that is selected by a user

All CSS Pseudo Classes

:link a:link Selects all unvisited links

font-weight: bold | normal | 100 - 900 700 — жирное (аналогично bold)

serif — шрифты с засечками (антиквенные) - "Times New Roman", Georgia.

line-height: Межстрочный интервал (интерлиньяж) = размер шрифта (100%) минус line-height.

Black #000000 0, 0, 0 WhiteSmoke #F5F5F5 245, 245, 245

Wheat #F5DEB3 245, 222, 179 Tomato #FF6347 255, 99, 71

Box model css

Передача параметров: Применение для кнопки: Для текста:

Для двух заголовков:

1. Синтаксис, валидность и логика

Список веб-безопасных шрифтов можно посмотреть здесь — cssfontstack.com.

2. /* Блочная модель */ 4. /* Оформление */

Сгруппированные объявления 5. /* Анимация и другие эффекты */

background: [background-attachment background-color background-image background-position

hidden Отображается только область внутри элемента, остальное будет скрыто.

foter.com - Бесплатный фото-сток

<datalist id="search" >

<p>File:<input type="file" name="file1" value=""></p>

<p>File:<input type="file" name="file1" value=""></p>

label { width: 200px; float:left; }

Drag and Drop

Определение местоположения пользователя

transition: transition-property || transition-duration || transition-timing-function || transition-delay

animation: animation-name || animation-duration || animation-timing-function || animation-delay

rotate - Поворот элемента на заданный угол относительно точки трансформации, задаваемой

-moz-transform: rotate(45deg) translate(24px, 25px); /* Firefox */

<canvas id="canvas" width="500" height="500"></canvas>

<link rel="stylesheet" media="all and (orientation:portrait)" href="/portrait.css">

max-device-width - Максимальная ширина устройства (в пикселях)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Выравнивание картинки по центру: Адаптивность картинки с обтекающим текстом:

Большое фоновое изображение:

<div class="container"> … </div>

<h1>h1. Bootstrap heading</h1>

<div class="row">

<div class="row">

<div class="row">

align-items: flex-start | flex-end | center | baseline | stretch;

flex-flow: flex-direction || flex-wrap

За многострочность внутри flex-контейнера отвечает CSS свойство flex-wrap:

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

align-content определяет то, каким

Создание примесей медиазапросов SCSS

$tablet: "(min-width: 768px) and (max-width: 1023px)"; p{

Вам также может понравиться

2. /* Блочная модель / 4. / Оформление */