Базовый CSS

#1 Способы подключения

Пример подключений

inline / в теге style / в отдельном файле

See the Pen Подключение CSS

#2 Изменение типа элемента, свойство display

Значения свойства

inline

чтобы блочный элемент вел себя как inline-элемент (т. е. не переводился на новую строку).

block

если необходимо отобразить строчный элемент как block-элемент (чтобы до и после элемента происходилперенос строки).

inline-block

«гибрид» — блочный элемент с поведением, как у строчного. В этом случае всё содержимое таких блочных элементовбудет отображаться, как обычно, но при этом блоки будут вести себя как строчные элементы, выстраиваясь в одной строке друг за другом и переносясь на новую строку лишь при необходимости. Схлопывание margin в таких случаях перестает действовать.

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

Width / height / padding / margin / border

See the Pen Блочная модель

#4 Свойство box-sizing

Значения свойства

content-box (значение по умолчанию в браузере)

Основывается на стандартах CSS, при этом свойства width и heightзадают ширину и высоту контента и не включают в себя значения отступов, полей и границ

content-box

border-box (самое часто применяемое на практике)

Свойства width и height включают в себя значения полей и границ,но не отступов (margin).

border-box

#5 Единицы измерения

px(абсолютная)

размер определяется разрешением экрана.

rem(относительная)

% от размера шрифта указанного к тегу html, либо установленного по умолчанию

em(относительная)

% от размера шрифта родительского блока либо страницы

%(относительная)

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

vw(относительная)

определяется от размера ширины окна браузера, 100vw = 100% ширины браузера. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl+ или Ctrl-.

vh(относительная)

определяется от размера высоты окна браузера, 100vh = 100% высоты браузера. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl+ или Ctrl-.

#6 Работа с цветом

Пример задания цвета именем цвета

color: red;
background: black;

Пример задания цвета по номеру

color: #e6e6e6;
background: #000;

Пример задания прозрачности/полупрозрачности

color: rgba(255, 0, 0, 0.5);
background: rgb(0, 0, 0);

background: rgba(0,0,0,0.5);

background: rgba(0,0,0,0.2);

#7 Margin особенности

Пример наложения границ соседей(см. инструменты разработчика -> styles)

Заголовок

Абзац текста

Пример вываливания за родительские границы(см. инструменты разработчика -> styles)

Абзац текста

Абзац текста

Абзац текста