mikkabond · September 13, 2020 07:32
diff --git a/layout b/layout
 # css
 1. использовать em (и другие относительные единицы) везде, где возможно
 2. стараться использовать классы , но не идентификаторы для стилизации
 3. для размещения и позиционирования элементов в строку использовать flexbox
 4. для элементов, реагирующих на действия пользователей, использовать псевдоэлементы
 5. высота блочных элементов зависит ТОЛЬКО от контента
 6. идентификаторы используются для форм, в js и в качестве ссылок на место в документе
 7. желательно использовать normalize.css или подобные библиотеки для очистки и нормализации стилей браузера

 #БЭМ
 - самостоятельные блоки кода (повторяющиеся на сайте или которые можно использовать на других проектах) обозначены классами с именем, которое обозначает "что это", а не как выглядит. имя через тире
 - в стилях блока не задавать внешнюю геометрию (отступы), чтобы блок можно было где угодно применять
 - блоки можно вкладывать друг в друга
 - элементы - это составная часть блока (необязательная, но неотделимая от блока) и также имя должно отвечать на вопрос "что это".
  Имя класса элемента отделено от класса блока через __
 - элементы можно вкладывать друг в друга, но каждый элемент остается частью блока, но не родительского (по вложенности) элемента
 - элемент всегда часть блока и не может использоваться отдельно
 - модификатор - определяет или уточняет внешний вид или состояние блока или элемента.
  Имя модификатора добавляется к классу блока/элемента через _
 - микс - позволяет совмещать стили от разных блоков/элементов 
  (например header__title и title, которые могут быть независимыми блоками/элентами, могут использоваться одновременно).
  Также этот прием позволяет задавать геометрию элемента, оставляя стили самих блоков независимыми

 #  простое обнуление стилей
 *{
 	padding: 0;
 	margin: 0;
 	border: 0;
 }
 *,*:before,*:after{
 	-moz-box-sizing: border-box;
 	-webkit-box-sizing: border-box;
 	box-sizing: border-box;
 }
 :focus,:active{outline: none;}
 a:focus,a:active{outline: none;}

 nav,footer,header,aside{display: block;}

 html,body{
 	height: 100%;
 	width: 100%;
 	font-size: 100%;
 	line-height: 1;
 	font-size: 14px;
 	-ms-text-size-adjust: 100%;
 	-moz-text-size-adjust: 100%;
 	-webkit-text-size-adjust: 100%;
 }
 input,button,textarea{font-family:inherit;}

 input::-ms-clear{display: none;}
 button{cursor: pointer;}
 button::-moz-focus-inner {padding:0;border:0;}
 a, a:visited{text-decoration: none;}
 a:hover{text-decoration: none;}
 ul li{list-style: none;}
 img{vertical-align: top;}

 h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}

 #свойства шрифтов

 font-family: "Имя шрифта", "Имя шрифта", тип шрифта
 Устанавливает семейство шрифта
 Типы шрифта:
 serif — шрифты с засечками (антиквенные), типа Times;
 sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
 cursive — курсивные шрифты;
 fantasy — декоративные шрифты;
 monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).

 font-size
 Определяет размер шрифта элемента.

 font-style:
 Определяет начертание шрифта — обычное, курсивное или наклонное.
 normal - Обычное начертание текста.
 italic - Курсивное начертание. 
 oblique - Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо. 

 font-weight:
 Устанавливает насыщенность шрифта.
 100 - thin
 300 - lite
 400 - normal
 500 - medium
 600 - semibold
 700 - bold
 900 - black

 # Свойства текста

 color
 Определяет цвет текста. Для задания цветов обычно используются числа в шестнадцатеричном коде, 
 либо с помощью RGB.

 text-align
 Определяет горизонтальное выравнивание текста в пределах элемента. 
 center - Выравнивание текста по центру.
 justify - Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.
 left - Выравнивание текста по левому краю. 
 right - Выравнивание текста по правому краю.

 text-decoration
 Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. 
 Одновременно можно применить более одного стиля, перечисляя значения через пробел. Это свойство наследуется и может принимать значения:
 line-through - Создает перечеркнутый текст.
 overline - Линия проходит над текстом.
 underline - Устанавливает подчеркнутый текст. 
 none - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.

 text-shadow: горизонтальное_смещение вертикальное_смещение размер цвет;
 Добавляет тень к тексту.
 Прмер text-shadow: 1px 1px 1px #000;

 text-transform
 Управляет преобразованием текста в заглавные или прописные символы.
 capitalize  - Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют.
 lowercase - Все символы текста становятся строчными (нижний регистр). 
 uppercase - Все символы текста становятся прописными (верхний регистр).
 none - Не меняет регистр символов.

 text-indent
 Устанавливает величину отступа первой строки блока текста. При меняется, если нам нужно создать что-то типа красной строки.

 letter-spacing
 Определяет интервал между символами (буквами). Используется когда нужно разрядить текст.

 line-height
 Устанавливает межстрочный интервал текста. Широко применяется при верстке текста.

 white-space
 Управляет свойствами пробелов между словами. Пименяется в основном со значением 
 nowrap которое запрещает перенос строки. Таким образом весь текст отображается в одну строку и не ломается. Значение normal вернет все как было.

 word-spacing
 Устанавливает интервал между словами.

 ============== отступы и блочная модель ===========================
 box-sizing
 Применяется для изменения алгоритма расчета ширины и высоты элемента. 
 Свойство наследуется.
 content-box - Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
 border-box - Свойства width и height включают в себя значения полей и границ, но не отступов (margin). Эта модель используется браузером Internet Exporer в режиме несовместимости.
 padding-box - Свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border). 
 =========================================
 padding
 Внутренний отступ элемента
 При указании поля в процентах, значение считается от ширины родителя элемента.
 Свойство не наследуется.

 padding: со_всех_сторон;
 padding: сверху справа снизу слева;
 padding: сверху_снизу справа_слева;
 padding: сверху справа_слева снизу;

 Отступ сверху и снизу не действует на срочные теги
 =========================================
 margin
 Внешний отступ элемента
 При указании поля в процентах, значение считается от ширины родителя элемента.
 Свойство не наследуется.
 Значение может быть как положительным, так и отрицательным числом.

 margin: со_всех_сторон;
 margin: сверху справа снизу слева;
 margin: сверху_снизу справа_слева;
 margin: сверху справа_слева снизу;

 Отступ сверху и снизу не действует на срочные теги
 =========================================
 width
 Устанавливает ширину блочных тегов и некоторыйх строчных (например img)
 Свойство не наследуется.
 width:100px;
 width:10%;
 =========================================
 max-width
 Устанавливает максимальную ширину блочных тегов и некоторыйх строчных (например img)
 =========================================
 min-width
 Устанавливает минимальную ширину блочных тегов и некоторыйх строчных (например img)
 =========================================
 height:
 Устанавливает высоту блочных тегов и некоторыйх строчных (например img)
 Свойство не наследуется.
 height:100px;
 height:10%;
 =========================================
 min-height
 Свойство не наследуется.
 =========================================
 max-height
 Свойство не наследуется.
 =========================================
 overflow 
 Управляет отображением содержания блочного элемента
 visible - Отображается все содержание элемента, даже за пределами установленной высоты и ширины. 
 hidden - Отображается только область внутри элемента, остальное будет скрыто.
 scroll - Всегда добавляются полосы прокрутки.
 auto - Полосы прокрутки добавляются только при необходимости.
 =========================================
 display:
 Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
 Свойство не наследуется.

 block - Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого. 											
 inline - Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент. 											
 inline - block - Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный. 											
 none - Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. 
 =========================================

 border
 Универсальное свойство border позволяет одновременно установить толщину, 
 стиль и цвет границы вокруг элемента.
 border: 1px solid #000; (размер стиль цвет)
 Основные стили -solid dotted dashed
 =========================================
 border-radius
 Устанавливает радиус скругления уголков блока.
 border-radius:50%; - кргуг
 Можно использовать вместе с overflow: hidden;
 =========================================
 outline
 Универсальное свойство, одновременно устанавливающее цвет, 
 стиль и толщину внешней границы на всех четырех сторонах элемента. 
 В отличие от линии, задаваемой через border, свойство outline 
 не влияет на положение блока и его ширину. 
 Также нельзя задать параметры линии на отдельных сторонах элемента, 
 outline применяется сразу ко всем четырём сторонам. 
 =========================================
 box-shadow
 Добавляет тень к элементу.
 box-shadow: сдвиг_по_гориз сдвиг_по_верт радиус расстояние
 Можно добавить много теней. На тень влияет свойство border-radius.
 =========================================
 opacity
 Определяет уровень прозрачности элемента.
 Отличие opacity:0; от display:none; в том что блок не убирается из верстки а только становиться прозрачным, то есть занимаемое им место остается. Так же, с прозрачными элементами все еще можно взаимодействовать, например кликать по ссылкам.
 =========================================
 visibility
 Предназначен для отображения или скрытия элемента.
 Отличие visibility: hidden; от display:none; в том что блок не убирается из верстки а только скрывается, то есть занимаемое им место остается.
 Отличие visibility: hidden; от opacity:0; в том что блок скрывается и взаимодействовать с ним нельзя.
	# css
	1. использовать em (и другие относительные единицы) везде, где возможно
	2. стараться использовать классы , но не идентификаторы для стилизации
	3. для размещения и позиционирования элементов в строку использовать flexbox
	4. для элементов, реагирующих на действия пользователей, использовать псевдоэлементы
	5. высота блочных элементов зависит ТОЛЬКО от контента
	6. идентификаторы используются для форм, в js и в качестве ссылок на место в документе
	7. желательно использовать normalize.css или подобные библиотеки для очистки и нормализации стилей браузера

	#БЭМ
	- самостоятельные блоки кода (повторяющиеся на сайте или которые можно использовать на других проектах) обозначены классами с именем, которое обозначает "что это", а не как выглядит. имя через тире
	- в стилях блока не задавать внешнюю геометрию (отступы), чтобы блок можно было где угодно применять
	- блоки можно вкладывать друг в друга
	- элементы - это составная часть блока (необязательная, но неотделимая от блока) и также имя должно отвечать на вопрос "что это".
	Имя класса элемента отделено от класса блока через __
	- элементы можно вкладывать друг в друга, но каждый элемент остается частью блока, но не родительского (по вложенности) элемента
	- элемент всегда часть блока и не может использоваться отдельно
	- модификатор - определяет или уточняет внешний вид или состояние блока или элемента.
	Имя модификатора добавляется к классу блока/элемента через _
	- микс - позволяет совмещать стили от разных блоков/элементов
	(например header__title и title, которые могут быть независимыми блоками/элентами, могут использоваться одновременно).
	Также этот прием позволяет задавать геометрию элемента, оставляя стили самих блоков независимыми

	# простое обнуление стилей
	*{
	padding: 0;
	margin: 0;
	border: 0;
	}
	,:before,*:after{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}
	:focus,:active{outline: none;}
	a:focus,a:active{outline: none;}

	nav,footer,header,aside{display: block;}

	html,body{
	height: 100%;
	width: 100%;
	font-size: 100%;
	line-height: 1;
	font-size: 14px;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	}
	input,button,textarea{font-family:inherit;}

	input::-ms-clear{display: none;}
	button{cursor: pointer;}
	button::-moz-focus-inner {padding:0;border:0;}
	a, a:visited{text-decoration: none;}
	a:hover{text-decoration: none;}
	ul li{list-style: none;}
	img{vertical-align: top;}

	h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}

	#свойства шрифтов

	font-family: "Имя шрифта", "Имя шрифта", тип шрифта
	Устанавливает семейство шрифта
	Типы шрифта:
	serif — шрифты с засечками (антиквенные), типа Times;
	sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
	cursive — курсивные шрифты;
	fantasy — декоративные шрифты;
	monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).

	font-size
	Определяет размер шрифта элемента.

	font-style:
	Определяет начертание шрифта — обычное, курсивное или наклонное.
	normal - Обычное начертание текста.
	italic - Курсивное начертание.
	oblique - Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.

	font-weight:
	Устанавливает насыщенность шрифта.
	100 - thin
	300 - lite
	400 - normal
	500 - medium
	600 - semibold
	700 - bold
	900 - black

	# Свойства текста

	color
	Определяет цвет текста. Для задания цветов обычно используются числа в шестнадцатеричном коде,
	либо с помощью RGB.

	text-align
	Определяет горизонтальное выравнивание текста в пределах элемента.
	center - Выравнивание текста по центру.
	justify - Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.
	left - Выравнивание текста по левому краю.
	right - Выравнивание текста по правому краю.

	text-decoration
	Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания.
	Одновременно можно применить более одного стиля, перечисляя значения через пробел. Это свойство наследуется и может принимать значения:
	line-through - Создает перечеркнутый текст.
	overline - Линия проходит над текстом.
	underline - Устанавливает подчеркнутый текст.
	none - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.

	text-shadow: горизонтальное_смещение вертикальное_смещение размер цвет;
	Добавляет тень к тексту.
	Прмер text-shadow: 1px 1px 1px #000;

	text-transform
	Управляет преобразованием текста в заглавные или прописные символы.
	capitalize - Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют.
	lowercase - Все символы текста становятся строчными (нижний регистр).
	uppercase - Все символы текста становятся прописными (верхний регистр).
	none - Не меняет регистр символов.

	text-indent
	Устанавливает величину отступа первой строки блока текста. При меняется, если нам нужно создать что-то типа красной строки.

	letter-spacing
	Определяет интервал между символами (буквами). Используется когда нужно разрядить текст.

	line-height
	Устанавливает межстрочный интервал текста. Широко применяется при верстке текста.

	white-space
	Управляет свойствами пробелов между словами. Пименяется в основном со значением
	nowrap которое запрещает перенос строки. Таким образом весь текст отображается в одну строку и не ломается. Значение normal вернет все как было.

	word-spacing
	Устанавливает интервал между словами.

	============== отступы и блочная модель ===========================
	box-sizing
	Применяется для изменения алгоритма расчета ширины и высоты элемента.
	Свойство наследуется.
	content-box - Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
	border-box - Свойства width и height включают в себя значения полей и границ, но не отступов (margin). Эта модель используется браузером Internet Exporer в режиме несовместимости.
	padding-box - Свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border).
	=========================================
	padding
	Внутренний отступ элемента
	При указании поля в процентах, значение считается от ширины родителя элемента.
	Свойство не наследуется.

	padding: со_всех_сторон;
	padding: сверху справа снизу слева;
	padding: сверху_снизу справа_слева;
	padding: сверху справа_слева снизу;

	Отступ сверху и снизу не действует на срочные теги
	=========================================
	margin
	Внешний отступ элемента
	При указании поля в процентах, значение считается от ширины родителя элемента.
	Свойство не наследуется.
	Значение может быть как положительным, так и отрицательным числом.

	margin: со_всех_сторон;
	margin: сверху справа снизу слева;
	margin: сверху_снизу справа_слева;
	margin: сверху справа_слева снизу;

	Отступ сверху и снизу не действует на срочные теги
	=========================================
	width
	Устанавливает ширину блочных тегов и некоторыйх строчных (например img)
	Свойство не наследуется.
	width:100px;
	width:10%;
	=========================================
	max-width
	Устанавливает максимальную ширину блочных тегов и некоторыйх строчных (например img)
	=========================================
	min-width
	Устанавливает минимальную ширину блочных тегов и некоторыйх строчных (например img)
	=========================================
	height:
	Устанавливает высоту блочных тегов и некоторыйх строчных (например img)
	Свойство не наследуется.
	height:100px;
	height:10%;
	=========================================
	min-height
	Свойство не наследуется.
	=========================================
	max-height
	Свойство не наследуется.
	=========================================
	overflow
	Управляет отображением содержания блочного элемента
	visible - Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
	hidden - Отображается только область внутри элемента, остальное будет скрыто.
	scroll - Всегда добавляются полосы прокрутки.
	auto - Полосы прокрутки добавляются только при необходимости.
	=========================================
	display:
	Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
	Свойство не наследуется.

	block - Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
	inline - Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
	inline - block - Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
	none - Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было.
	=========================================

	border
	Универсальное свойство border позволяет одновременно установить толщину,
	стиль и цвет границы вокруг элемента.
	border: 1px solid #000; (размер стиль цвет)
	Основные стили -solid dotted dashed
	=========================================
	border-radius
	Устанавливает радиус скругления уголков блока.
	border-radius:50%; - кргуг
	Можно использовать вместе с overflow: hidden;
	=========================================
	outline
	Универсальное свойство, одновременно устанавливающее цвет,
	стиль и толщину внешней границы на всех четырех сторонах элемента.
	В отличие от линии, задаваемой через border, свойство outline
	не влияет на положение блока и его ширину.
	Также нельзя задать параметры линии на отдельных сторонах элемента,
	outline применяется сразу ко всем четырём сторонам.
	=========================================
	box-shadow
	Добавляет тень к элементу.
	box-shadow: сдвиг_по_гориз сдвиг_по_верт радиус расстояние
	Можно добавить много теней. На тень влияет свойство border-radius.
	=========================================
	opacity
	Определяет уровень прозрачности элемента.
	Отличие opacity:0; от display:none; в том что блок не убирается из верстки а только становиться прозрачным, то есть занимаемое им место остается. Так же, с прозрачными элементами все еще можно взаимодействовать, например кликать по ссылкам.
	=========================================
	visibility
	Предназначен для отображения или скрытия элемента.
	Отличие visibility: hidden; от display:none; в том что блок не убирается из верстки а только скрывается, то есть занимаемое им место остается.
	Отличие visibility: hidden; от opacity:0; в том что блок скрывается и взаимодействовать с ним нельзя.