no-repeat center top / cover;
no-repeat - не повторять картинку при уменьшении масштаба в браузере (т.е. не замощать)
center - положение картинки по горизонтали по центру
top - положение картинки по вериткали (прикрепить к верхнему краю)
cover - чтобы картинка расширялась на всю ширину экрана, растягивалась
! Из заотсутсвия контента (высоты) фоновая картика не будет отображаться
· Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.
· alt – текст, что будет показываться пока картинка прогружается (атрибут после img)
· Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.
border: [border-width || border-style || border-color] | inherit
Значение border-width определяет толщину границы.
Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рисунке. 
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
inherit наследует значение родителя.
Пример: border:4pxdoubleblack;
border-radius: 5px; - устанавливает радиус округления
Ориентация элементов в пространстве
Управление блоками, строками, элементами
· header, section, footer – большие блоки сайта: хедер, блок, футер
·.container – div. container – это элемент, ограничивающий контент по ширине, вставляется внутрь каждого header, section, footer. В css ему задается ширина, которая ограничивает контент.
· div, p, input, button { box-sizing: border-box;}- применяется чтобы коммандыпаддинг и маргин не расширяли элемент настолько, насколько должны забрать пикселей.
Например я указываю высоту и ширину в 500 пикселей, если я делаю паддинг или марджин на 10 пикселей, то блок автоматически увеличится, игнорируя заданную высоту и длину на 10 пикселей, если не применить это свойство.
· padding: 20px 20px 20px 20px; - правило часовой стрелки – отступ сверху, справа, снизу, слева. То же самое для марджин. Это то же самое, что записать padding: 20px;
сверху padding-top
справа padding-right
снизу padding-bottom
слева padding-left
· У нектороых элементов по-умолчанию заданы паддинги и марджины, которые стоит обнулить, это: body,
· Теги <img>, <span>, <a>, <q>, <code> и некоторые другие – строчные (они имеют ширину равную их содержимому/контенту, можно разместить несколько таких элементов в одну строку)
· Теги div, p, h, section, article – блочные элементы (их ширина по-умолчанию равна 100% т.е. они занимают всю строку целиком и справа и слева от себя ничего не потерпят). Их ширину ограничивают только материнские элементы, например контейнер с заданной шириной, или можно превратить их в строчные.
· Чтобы превратить блочный элемент в строчный применяется float. Например floaf: left;
Затем те элементы, где использовался float, группируются по расположению в одинdivи ему приписывается класс clearfix, чтобы избежать проблеммы, когда между интервалами элементов внутри этого div появляется содержимое из последующих div.
· Чтобы превратить строчный элемент в блочный применяется display: block;
· Запрещено добавлять внутрь строчных элементов блочные, а наоборот можно.
· без указания ширины никакие margin: 0 auto не работают
· clearfix – задать этот класс всем элементам, где было использовано float, можно сгруппировать их в один блок и указать только ему класс, если эти элементы расположены внутри него, рядом. Это решит проблему с неправильным обтеканием текста, а так же неправильным вычеслением высоты блока/строки.
· При marginу блочных элементов расположенных рядом друг с другом по вертикали наблюдается эффект схлопывания, когда отступы не суммируются, а объединяются между собой. Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Для отступов слева и справа схлопывание никогда не применяется.
Схлопывание не срабатывает:
для элементов, у которых на стороне схлопывания задано свойство padding.
для элементов, у которых на стороне схлопывания задана граница;
на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute;
на плавающих элементах (для них свойство float задано как left или right);
для строчных элементов;
для <html>.
· Для того, чтобы задать положение картинки адаптивно, например по центру, применяются проценты.
position: absolute;
left: 50%;
margin-left: 100px; - беретсяширинакартинки / 2
top: 50%;
margin-top: 100px; - берется высота картинки / 2
· Нужно задать высоту 100vh и для header и дляarticle, если в артикл не задать, ничего не получится (можно задать такую высоту для артикла только внутри хедера)
· Пункты-иконки лучше всего сделать не через img, а через бекграунд, для этого:
background: url(../img/названиеиконки) no-repeat center top;
padding-top: 170px; - здесь пишется высота картинки / 2
width: 200px; - ширина элемента с учетом подписи (самое широкое значение контента элемента)
text-align: center; - задается выравнивание подписи
position: absolute;
left: 0%; - задается отступ слева, или справа в процентах, в случае центрирования, используется margin-left, как в примере выше
top: 50%;
margin-top: 100px; - берется высота картинки / 2
· Аналогично случаям выше можно задавать отступ снизу через bottom
· position: absolute | fixed | relative | static | inherit;
Absolute
Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
Fixed
По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
Relative
Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
Static
Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
Inherit
Наследуетзначениеродителя.
· 
Top
Для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края (рис. 1). В случае значения relative, top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя (рис. 2).
То же самое, только для левого, нижнего, правого края: left, bottom, right
Синтаксис:
top: значение | проценты | auto | inherit;
autoНе изменяет положение элемента.
InheritНаследует значение родителя.
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства top может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.
· От 1024 – экранная версия, от 768 – планшетная версия, от 320 – мобильная
Создается файлик responsive.cssвнутри папки css
Внутри него приписывется
@mediascreenand (max-width:1024px) {} – планшетнаяверсия
@mediascreenand (max-width: 768px) {}–мобильнаяверсия
Меньше 300px экраны не бывают
Внутри фигурных скобок прописываются классы и их свойства – переопределяем те, которые надо изменить, остальные не трогаем – их не нужно вносить в этот файл
Все что находится в маин.цсс для мониторных версий
Текстовые операторы
CSS
Цвет задается атрибутом color
Для текста внутри ссылок свойства нужно прописать отдельно – они не наследуются
| Свойство | Значение | Описание | Пример |
| font-family | имя шрифта | Задает список шрифтов | P {font-family: Arial, serif} |
| font-style | normal italic oblique | Нормальный шрифт Курсив Наклонный шрифт | P {font-style: italic} |
| font-variant | normal small-caps | Капитель (особые прописные буквы) | P {font-variant: small-caps} |
| font-weight | normal lighter bold bolder 100–900 | Нормальная жирность Светлое начертание Полужирный Жирный 100 — светлый шрифт, 900 — самый жирный | P {font-weight: bold} |
| font-size | normal pt px % | нормальный размер пункты пикселы проценты | font-size: normal font-size: 12pt font-size: 12px font-size: 120% |
| Свойство | Значение | Описание | Пример |
| line-height | normal множитель значение % | Интерлиньяж (межстрочный интервал) | line-height: normal line-height: 1.5 line-height: 12px line-height: 120% |
| text-decoration | none underline overline line-through blink | Убрать все оформление Подчеркивание Линия над текстом Перечеркивание Мигание текста | text-decoration: none |
| text-transform | none capitalize uppercase lowercase | Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ все строчные | text-transform: capitalize |
| text-align | left right center justify | Выравнивание текста | text-align: justify |
| text-indent | значение % | Отступ первой строки | text-indent: 15px; text-indent: 10% |
| Пример | Пример | Пример | Пример | Пример |
| font-family: Verdana, sans-serif; font-size: 120%; font-weight: light | font-size: large; font-weight: bold | font-family: Arial, sans-serif; font-size: x-small; font-weight: bold | font-variant: small-caps | font-style: italic; font-weight: bold |
| --------------------------------- | ------------------------- | --------------------------------- | -------------------- | ------------------------------- |
| Пример: И Это Все О Нем | Пример: текстпоцентру | Пример: Это не ссылка, а просто текст | Пример: отступ первой строки | Пример: полуторныймежстрочныйинтервал |
| text-transform: capitalize | text-align:center | text-decoration: underline | text-indent: 20px | line-height: 1.5 |
HTML
| Код HTML | Описание | Пример |
| <b>Текст</b> | Жирное начертание текста | Текст |
| <i>Текст</i> | Курсивное начертание текста | Текст |
| <sup>Текст</sup> | Верхний индекс | e=mc2 |
| <sub>Текст</sub> | Нижний индекс | H2O |
| <pre>Текст</pre> | Текст пишется как есть, включая все пробелы | Текст |
| <em>Текст</em> | Курсивный текст | Текст |
| <strong>Текст</strong> | Жирное начертание текста | Текст |
br– перенос строки
Шаблонначала
HTML
* {здесь свойства бокс сайзинбордер бокс и обнуление паддингов и марджинов}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Названиевкладки</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<div class="container">
<imgsrc="img/название файла лого" alt="текст вместо картинки" class="logo">
<nav>
<ul class="menu">
<li>
<a href="#">Элементменю 1</a>
</li>
<li>
<a href="#">Элементменю 2</a>
</li>
<li>
<a href="#">Элементменю 3</a>
</li>
<li>
<a href="#">Элементменю 4</a>
</li>
<li>
<a href="#">Элементменю 5</a>
</li>
</ul>
</nav>
</div>
</header>
<section class="a">
<div class="container">
</div>
</section>
<section class="b">
<div class="container">
</div>
</section>
<section class="c">
<div class="container">
</div>
</section>
<footer>
<div class="container">
</div>
</footer>
</body>
</html>
CSS
body, h1, h2, h3, h4 {
padding: 0px;
margin: 0px;
}
div, p, input, button, a {
box-sizing: border-box;
}
.container {
width: 1170px;
margin: 0px auto;
position: relative;
}
.clearfix:after {
content:'';
display: table;
width: 100%;
}
День верстальщика конспект
<head>
<title>Название Вашего Проекта</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
<meta name="description" content="Описаниесайта">
<meta name="keywords" content="тегисайта, ключевыесловачереззапятую">
<!--Подключениестилей -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
Рекомендуется делать высоту первого экрана 700 или подстраиваемой под монитор пользователя
В гуглфондс находим шрифт Ubuntuпроизводим несколько операций и получаем код, который встраиваем например перед подключением cssв head:
<head>
<title>Название Вашего Проекта</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
<metaname="description" content="Страница для мастер-класса по адаптивной верстке">
<meta name="keywords" content="верстка, мастер-класс, frontend">
<!-- Подключение стилей -->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700&subset=cyrillic" rel="stylesheet"> - это отвечает за подключение шрифта Ubuntu из библиотеки гуглфондс
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
В том же гуглфондс есть строка
font-family: 'Ubuntu', sans-serif;
Которую мы пропиываем в bodycss
Картинку на первом экране мы прописываем после указания цвтабекграунда – можно без свойства коллор
Путь к картинке в urlбекграунд начинается с../
.first {
background: #e1de99
url(../img/first_bg.jpg)
no-repeatcentercenter / topcover; - не повторять картинку при увеличении масштаба и сделать так чтобы картинка расширялась соответсвенно ширине экрана
height: 100vh; - vh – это процент от высоты экрана, эта записьб означает то эта область будет занимать по высоте 100% экрана
}