HTML + CSS

Проект для изучения верстки

• HTML
• CSS
  • Основы
  • Оформление
  • Блочная модель
  • Позиционирование
  • Флоаты
  • Флексы
  • Макеты
  • Другое

Ресурс

http://code.mu/ru/markup/book/prime/

HTML

Работа с таблицами на HTML Код таблицы имеет жесткую структуру: главным является тег table, внутри которого должны лежать теги tr, которые создают ряды таблицы, а внутри них - теги td, которые создают ячейки. Тег table может иметь атрибут border , который задает границу таблице и ее ячейкам. заголовки колонок в тегах th:

Тег div для группировки тегов Существует специальный тег div, который позволяет сгруппировать несколько тегов, чтобы затем сними сделать что-нибудь одновременно.

<div class="block1">
  <p>текст</p>
  <p>текст</p>
</div>

.block1 {
  color: red;
}

CSS

Основы CSS

Выравнивание текста на CSS text-align (значение left), по правому (значение right), по центру (значение center) и одновременно и по правому и по левому краю (значение justify).

 {
  text-align: center;
  text-align: right;
  text-align: left;
}

Размер шрифта на CSS font-size

 {
  font-size: 50px;
  font-weight: normal;
}

Тип шрифта на CSS Свойство font-family позволяет задать семейство шрифта. Наиболее распространенные шрифты: Times New Roman (стоит по умолчанию), Arial, Georgia, Verdana, Trebuchet MS, Impact, Arial Black, Comic Sans MS, Courier New.

 {
  font-family: "Comic Sans MS";
}

Межстрочный интервал на CSS

Давайте теперь научимся задавать межстрочный интервал тексту. Под межстрочным интервалом подразумевается расстояние между линиями текста, то есть белый промежуток между ними. Для этого предназначено свойство line-height

 {
  line-height: 15px;
  /* или */
  line-height: 1.5;
}

Свойство-сокращение font курсив жирность размершрифта / межстрочныйинтервал семейство

Эффекты текста на CSS

Свойство text-decoration позволяет задавать некоторые эффекты Значение underline добавляет подчеркивание тексту: Значение none отменяет все эффекты. Обычно используется для отмены подчеркивания ссылок.

 {
  text-decoration: underline;
}

Тег с заданным классом

Можно обратиться к конкретному тегу с классом

p.eee {
  color: green;
}

Селектор потомков

http://code.mu/ru/markup/book/prime/theory/descendant-selector-and-classes/

Элемент с несколькими классами

Можно одновременно задать несколько CSS классов какому-нибудь тегу. Для этого в атрибуте class эти классы нужно перечислить через пробел.

Приоритет селекторов CSS

http://code.mu/ru/markup/book/prime/theory/selectors-priority/

Соседний селектор в CSS

Соседний селектор + позволяет выбрать элемент по его соседу сверху.

h2 + p {
	color: red;
}

Родственный селектор

Родственный селектор ~ позволяет выбрать все элементы, находящиеся после заданного элемента внутри одного родителя.

h2 ~ p {
	color: red;
}

Универсальный селектор в CSS

Универсальный селектор * позволяет выбирать все элементы.

* {
	color: red;
}

Давайте выберем все элементы, находящиеся внутри тега div, и покрасим их в красный цвет:

div * {
	color: red;
}

Давайте выберем все элементы, непосредственно находящиеся внутри тега div, и покрасим их в красный цвет:

div > * {
	color: red;
}

Селекторы атрибутов

http://htmlbook.ru/samcss/selektory-atributov

Выборка по позиции и типу элементов на CSS

http://code.mu/ru/markup/book/prime/theory/position-type-selector/

Оформление на CSS

Установка фонового цвета на CSS

#elem {
	background-color: orange; /* задаем оранжевый цвет фона */
}

Основы работы с границами на CSS

Это делается при помощи трех свойств: свойство border-width задает толщину границы, border-color - цвет, а border-style задает тип границы.

#elem {
	border-width: 3px;    /* толщина 3px */
	border-style: solid;  /* в виде линии */  /*ridge double dashed*/
	border-color: red;    /* красный цвет */
	width: 100px;
	height: 100px;
}

Свойство-сокращение для границы на CSS

#elem {
	border: 1px solid red;
}

Скругленные уголки на CSS

Скругление в 10px - это радиус круга, который можно вписать в это скругление.

#elem {
	border-radius: 10px;
}

Разные скругления для разных углов CSS

Если задано четыре значения, то первое значение задает скругление для верхнего левого угла, второе - для верхнего правого, третье - для нижнего правого угла, а четвертое - для нижнего левого угла:

#elem {
	border-radius: 10px 20px 30px 40px;
}

Скругленные уголки в процентах на CSS

#elem {
	border-radius: 10%;
    border-radius: 50%; /*Круг*/
}

Работа с фоновыми картинками через CSS

Без background-repeat фоновая картинка замостит собой весь блок http://code.mu/ru/markup/book/prime/decoration/background-images/

селектор {
	background-image: url(путь к картинке);
    background-repeat: no-repeat;
	width: 400px;
	height: 300px;
}

Свойство background-attachment

Свойство background-attachment задает каким образом прокручивать фоновую картинку элемента: вместе с текстом или текст будет скользить по картинке.

• fixed Картинка фона будет неподвижной, а текст будет скользить по ней.
• scroll Картинка фона будет прокручиваться вместе с текстом.
• local Фон фиксируется с учетом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остается на месте.

селектор {
	background-attachment: fixed | scroll | local;
}

Работа с маркерами списков ul на CSS

http://code.mu/ru/markup/book/prime/decoration/ul-markers/

Блочная модель

Работа с отступами margin на CSS

#elem {
	margin: 30px;
}

Отступы margin для разных сторон

Для того, чтобы задать разные отступы для разных сторон существуют отдельные свойства: margin-left - для левой стороны, margin-right - для правой, margin-top - для верхней и margin-bottom - для нижней.

#child {
	margin-top:    10px; /* сверху */
	margin-right:  20px; /* справа */
	margin-bottom: 30px; /* снизу */
	margin-left:   40px; /* слева */
	border: 1px solid green;
}

Два значения

Если передать свойству margin два значения, то первое будет задавать отступ одновременно сверху и снизу, а второе - одновременно и справа, и слева.

#child {
	margin: 40px 20px;
}

Работа с отступами padding на CSS

Существует также очень похожее свойство padding, которое делает отступ вовнутрь от границы.

#elem {
	padding: 30px;
}

Отступы padding для разных сторон

В свойство padding можно передать два, три или четыре параметра. В этих случаях он работает аналогично свойству margin

Пусть некоторому элементу мы задали ширину 100px. В CSS это отнюдь не означает, что элемент действительно будет шириной в 100px. Дело в том, что добавление padding расширяет элемент и он становится больше, чем указано в свойстве width.
Влияние границы (border) - Граница также расширяет блок

#elem {
	padding-top:    10px; /* сверху */
	padding-right:  20px; /* справа */
	padding-bottom: 30px; /* снизу */
	padding-left:   40px; /* слева */
}
Что с этим делать ???
Как правило, описанное расширение вредное и вам хотелось бы от него избавиться. Для этого в CSS есть свойство box-sizing. Если указать ему значение border-box, то ни padding, ни граница не будут расширять блок:
```css
#elem {
	box-sizing: border-box;  /* убираем расширение */
}

Особенности блочных элементов в CSS

Рассмотрим теги, которые при отображении на экране являются блочными. К таким тегам относятся, к примеру, теги div. На примере этого тега давайте посмотрим на особенности блочных элементов.

• Ширина блочного элемента - Если у блочного элемента не задана ширина, то он автоматически займет по ширине все доступное пространство:
• Высота блочного элемента - Если у блочного элемента не задана высота, то его высота сформируется содержимым
• Высота без содержимого - Если содержимого нет, то мы увидим слипшуюся границу
• Несколько блочных элементов рядом - Если расположить несколько блочных элементов рядом, то каждый из них будет начинаться с новой строки

Особенности строчных элементов в CSS

Рассмотрим теги, которые при отображении на экране являются строчными. К таким тегам относятся, к примеру, тег span. На примере этого тега давайте посмотрим на особенности строчных элементов.

• Ширина и высота строчного элемента - Ширина и высота строчного элемента всегда ограничены его текстом. Даже если задать свойства width и height - для строчного элемента они не сработают
• Несколько строчных элементов рядом - Если расположить несколько строчных элементов рядом, то они выстроятся в ряд
• Отступы между строчными элементами - отступы представляют собой банальные символы пробела

Работа со свойством display

При желании, однако, можно сменить модель с помощью свойства display. С помощью значения block данного свойства элемент можно сделать блочным, а с помощью значения inline - строчным. Сделаем так, чтобы теги span вели себя как блочные элементы:

span {
	display: block;
}

А теперь сделаем так, чтобы теги div вели себя как строчные:

div {
	display: inline;
}

Особенности строчно-блочных элементов в CSS

Строчно-блочные элементы сочетают особенности блочных и строчных элементов. Напимер, тег img.

• Строчно-блочного элементу можно задать ширину и высоту, подобно блочным элементам
• Ширина строчно-блочного элемента - Если у строчно-блочного элемента не задана ширина, то он его ширина сформируется содержимым, подобно строчным элементам
• Высота строчно-блочного элемента - Если у строчно-блочного элемента не задана высота, то его высота сформируется содержимым, подобно строчным элементам
• Несколько строчно-блочных элементов рядом - Если расположить несколько строчно-блочных элементов рядом, то они выстроятся в ряд, подобно строчным элементам

Выравнивание блочных элементов на CSS

Свойство margin применяется не только для задания отступов, но и для центрирования блочных элементов. Для этого правый и левый отступ следует задать в значение auto.

.child {
	margin: 10px auto;
}

Значение auto для margin на самом деле может не только центрировать. Фактически это значение позволяет рассчитать отступ автоматически и сделать его максимально возможным. Когда мы ставим auto для левого и правого отступа - элемент центрируется.

.child {
	margin: auto;
}

Выравнивание строчных элементов

Строчные элементы выравниваются по-другому - просто родителю следует задать свойство text-align в нужном значении.

.parent {
	text-align: center;
}

Выравнивание строчно-блочных элементов

Строчно-блочные элементы выравниваются так же, как и строчные - с помощью text-align в нужном значении, заданном для родителя.

Флекс элементы на CSS

Кроме вышеперечисленных типов блочных моделей есть еще одна - флекс элементы. Для того, чтобы получить такие элементы, нужно родителю этих элементов написать свойство display в значении flex. Сам родитель останется блочным элементом, а вот его потомки станут флекс элементами.

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex; /* потомки будут флекс элементами */
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}

Выравнивание flex элементов

Для выравнивания флекс элементов используется специальное свойство justify-content. Оно принимает достаточно много значений.

.parent {
	display: flex;
	justify-content: center;
}

Значение space-between
Значение space-between позволяет сделать так, чтобы элементы равномерно распределились по своему родителю, а расстояние между ними рассчиталось автоматически. При этом первый элемент будет прижат к левому краю, а последний - к правому.

.parent	{
	display: flex;
	justify-content: space-between;
}

Значение space-around
Значение space-around работает похожим образом, только делает так, чтобы первый и последний элемент отступали от края родителя.

.parent {
	display: flex;
	justify-content: space-around;
}

Позиционирование

Абсолютное позиционирование элементов на CSS

Абсолютное позиционирование элементов позволяет располагать элементы по указанным координатам страницы. Например, можно расположить элемент в позицию 100px сверху страницы и 200px слева. Элемент переместится туда, не взирая на то, что там будут располагаться другие элементы и просто станет поверх их. Говорят, что при этом элемент выпадает из нормального потока документа: все остальные элементы будут вести себя так, будто нашего элемента нет.

Для того, чтобы сделать элемент абсолютно спозиционированным, этому элементу необходимо задать свойство position в значении absolute. Кроме этого свойства, нужны еще два: одно будет задавать координату по вертикали, а второе - по горизонтали.

Для вертикали нужно задать отступ или сверху, или снизу. Отступ сверху задает свойство top, а отступ снизу - свойство bottom. Для горизонтали нужно задать отступ или слева, или справа. Отступ слева задает свойство left, а отступ справа - свойство right.

#elem {
	position: absolute;
	top: 0px;
	left: 0px;
}

Относительное позиционирование элементов на CSS

Относительное позиционирование задается с помощью значения relative для свойства position. Такое позиционирование позволяет сдвигать элементы относительно своего текущего положения на заданную величину. При этом все остальные элементы страницы будут думать, что элемент стоит там, где и стоял изначально. То есть при таком типе позиционирования элемент не выпадает из нормального потока.
Смещения от текущего положения задаются свойствами top, right, bottom и left.

#elem {
	position: relative;
	top: 30px;
}

Позиционирование относительно родителя на CSS

Если элементу задан relative, а его потомку - absolute, то этот потомок будет позиционироваться относительно своего родителя, а не относительно окна браузера.
Как правило, в таком случае родителю указывают relative без смещений. В этом случае с этим родителем ничего не происходит, но все его потомки теперь будут позиционироваться относительно него.

Позиционирование относительно абсолютного родителя на CSS

Может быть и такое, что у родителя задан absolute. В этом случае потомки с absolute также будут позиционироваться относительно такого родителя, а не относительно окна браузера

Абсолютное позиционирование без координат

На самом деле указания координат при абсолютном позиционировании не обязательно. Если элементу просто написать position в значении absolute, то он станет абсолютно спозиционированным, но останется стоять в том же месте, где и стоял. При этом все остальные элементы будут вести себя так, будто нашего элемента нет и могут налезть на него.

Фиксированное позиционирование на CSS

Сейчас мы разберемся с фиксированным позиционированием. Оно похоже на абсолютное, разница проявляется в том, как ведут себя эти типы позиционирования при наличии полосы прокрутки.
При прокручивании страницы абсолютно спозиционированные элементы будут прокручиваться вместе со страницей. Можно сделать так, чтобы при прокручивании страницы спозиционированный элемент оставался на месте. Для этого ему нужно задать фиксированное позиционирование с помощью свойства position в значении fixed:

#elem {
	position: fixed; /* задаем фиксированное позиционирование */
}

Блок на всю ширину экрана

Чтобы фиксированный блок занял всю ширину экрана, ему нужно задать ширину 100%:

#elem {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
}

Фиксированное позиционирование на CSS

Оно похоже на абсолютное, разница проявляется в том, как ведут себя эти типы позиционирования при наличии полосы прокрутки. Можно сделать так, чтобы при прокручивании страницы спозиционированный элемент оставался на месте. Для этого ему нужно задать фиксированное позиционирование с помощью свойства position в значении fixed:

#elem {
	position: fixed; /* задаем фиксированное позиционирование */
}

Блок на всю ширину экрана Чтобы фиксированный блок занял всю ширину экрана, ему нужно задать ширину 100%:

Наложение элементов по оси Z

По умолчанию, если два элемента накладываются друг на друга, то выше будет тот элемент, который идет ниже в HTML коде. Регулируем наложение. Порядок наложения элементов можно регулировать с помощью свойства z-index, принимающего своим значением целые положительные или отрицательные числа, либо ноль. Свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative. При использовании данного свойства правило наложения элементов следующее: выше будет тот элемент, у которого значение z-index больше.

#elem {
	z-index: 2;
}

Если z-index у элемента не задан, то его значение следует трактовать как 0. Это значит, что элемент со значением z-index, равным -1, будет ниже элемента без z-index.

Флоаты

Введение в свойство float

http://code.mu/ru/markup/book/prime/float/intro/ Регулируем обтекание картинки текстом

img {
	float: left;
}

Флексы

Размещение флекс элементов в ряд или колонку

Рассмотрим специальное свойство flex-direction, которое регулирует то, как выстраиваются наши блоки. По умолчанию оно имеет значение row, поэтому элементы выстраиваются в ряд. Посмотрим, какие еще есть значения у этого свойства.

Значение row-reverse также позволяет выстраивать блоки в ряд, прижимая их к правому краю. При этом происходит переворот порядка - первый блок будет самым правым:

.parent	{
	display: flex;
	flex-direction: row-reverse;
}

Значение column выстраивает элементы в колонку:

.parent	{
	display: flex;
	flex-direction: column;
}

Главная и поперечная оси в флекс блоках

Про флексбоксы можно говорить в двух терминах: первое это - ряд или колонка, второе - в терминах осей. Понимание осей нужно для того, чтобы выравнивать элементы по горизонтали или по вертикали.
Направление главной оси регулируется свойством flex-direction. Если данное свойство имеет значение row - главная ось направлена слева направо, если же значение row-reverse, то справа налево. Значение column направляет ось сверху вниз, а значение column-reverse - снизу вверх.

Выравнивание флекс элементов по главной оси

Свойство justify-content позволяет выравнивать элементы по главной оси. Ранее рассматривались значения center, space-between, space-around, space-evenly.Есть еще несколько : значение flex-start прижимает элементы к началу главной оси, а значение flex-end - к концу

.parent	{
	display: flex;
	flex-direction: row; /* главная ось слева направо */
	justify-content: flex-start; /* блоки к началу главной оси */
}

Выравнивание флекс блоков по поперечной оси CSS

Будем выравнивать блоки и по поперечной оси. Выравнивание по этой оси задается свойством align-items. Значение flex-start прижимает элементы к началу оси, а значение flex-end - к концу.

Значение center свойства align-items

Значение center позволяет выровнять элементы по центру по поперечной оси:

.parent	{
	display: flex;
	flex-direction: row;
	align-items: center; /* центрируем по побочной оси */
}

Значение stretch свойства align-items

Свойство align-items по умолчанию имеет значение stretch. Это значение растягивает элементы на всю ширину вдоль поперечной оси. Оно работает только в том случае, если в направлении поперечной оси не задан размер элементов.

Выравнивание отдельного элемента в flex модели

Следующие свойства задаются уже не родителю флекс-элементов, а самим элементам. Рассмотрим свойство aling-self, которое выраванивает отдельный блок по поперечной оси.

.parent	{
	display: flex;
	align-items: center;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}
.elem {
	align-self: flex-start;
}

Порядок flex блоков через CSS

Существует свойство order, которое задает порядок следования конкретных элементов по следующему правилу: у кого больше значение, тот стоит ближе к концу оси, а у кого он меньше - тот стоит ближе к началу. Значением свойство может принимать положительное или отрицательное число. По умолчанию все элементы следуют друг за другом, это значит, что order у них нулевой.

.elem {
	order: 1;
}

Макеты

http://code.mu/ru/markup/book/prime/layout/menu/

Другое

CSS классы через пробел и без него

https://ploshadka.net/css-space-and-no-spaces/

Свойство pointer-events

Позволяет управлять тем, как элементы будут реагировать на события мыши или прикосновения к сенсорному экрану. Часто применяется для того, чтобы в сложной компоновке можно было взаимодействовать с нижележащими элементами, игнорируя вышележащие.

.elem{
	pointer-events: auto;
	pointer-events: none;
}