html and css tips

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; в том что блок скрывается и взаимодействовать с ним нельзя.