Html и css

Замечание про brackets.
При включении режима

live Preview сей чудный редактор запускает сервер
на порту по умолчанию - 57261 и соответственно
открывается новая вкладка Хрома (пока это
работает только в хроме) с адресом
http://127.0.0.1:57261/index.html.
live Preview функционирует только для одной
страницы, логично его включать для страницы с
которой активно работаем, поэтому остальные будут
обновляться, в этом виртуальном сайте только если
их сохранять на диск вручную.
В этом тексте я буду использовать, с
некоммерческими целями, выдержки с сайта
http://htmlbook.ru/, да простят они меня.
В тексте будут встречаться упоминания
организации W3C. Это серьезные товарисчи. W3C
(сокращенно от World Wide Web Consortium —
Консорциум Всемирной паутины) — организация,
которая разрабатывает и внедряет единые
стандарты для интернета в целом. Создана в 1994
году. Основатель и глава консорциума — Тимоти
Джон Бернерс-Ли, автор множества разработок в
области информационных технологий.
Общие положения.
< > </> парный тэг должен закрываться, далее, в нужном месте. Иначе можно
получить непредсказуемо феерические эффекты.
< тэг {атрибут =””}|атрибут =””> </> многие тэги имеют атрибуты, обязательные или
же нет.
[ ] - при описании синтаксиса команд обозначают необязательный параметр,
атрибут.
{ } - фигурные скобки - при описании синтаксиса команд обозначают, что должен
быть выбран один из параметров, которые находятся внутри скобок, например,
запись {ON | OFF} обозначает, что должно быть выбрано одно из значений: “ON”
или “OFF”.
| - вертикальная черта - используется при описании синтаксиса команды как
символ обозначающий “или”, например, запись {ON | OFF} обозначает, что должно
быть выбрано одно из значений: “ON” или “OFF”.
{атрибут1}|{атрибут2} можно использовать атрибут1 или атрибут2, или не
использовать ни одного. (есть неточности, проверить)
Голубым цветом я обозначаю то, что может находится в html файле.
Этим оттенком зеленого - то, что может находится в css файле.
"резолвить", "резолвится" - Слово образовано от английского resolve и означает

решать, принимать решение. В некоторых контекстах слово резолвить обозначает
реализовать, иногда определять. В основном все зависит от контекста.
Советую сразу изучить сервис - https://codepen.io/. Прекрасная песочница для
простых опытов. Советую зарегистрироваться - получите возможность сохранять
свои pen-ы - примеры. А также делится ими. Как пользоваться CodePen: подробное
руководство для новичков. Мой пример - https://codepen.io/brian044/pen/PozajER
Для использования картинок со своего компьютера в бесплатной версии
песочницы можно использовать https://piccy.info/ или https://fastpic.ru . В этих
сервисах даже регистрироваться не обязательно.
Сайт - https://placeholder.com/, содержит библиотеку изображений, платных и
бсплатных, а также генератор изображений, их можно будет вставлять в примеры в
codepen.
для codepen генерируемые ссылки работают некорректно, в
частности не появляется текст в картинке примеры использования в
таком виде -"http://placehold.it/100x150&text=1"
https://via.placeholder.com/150/0000FF/808080&text=hello
Все вышеперечисленные сервисы не уникальны и существуют их аналоги.
Для сохранения различных версий своего проекта, удобного его переноса между
разными компьютерами и работы в команде, а также для публикации в инете своего
портфолио (имеется в виду простый страницы (уточнить ) нужно изучить сервис
https://github.com/. Это наиболее, на данный момент, популярный сервис для работы
в команде. Git за полчаса: руководство для начинающих
<!doctype html>
Элемент <!DOCTYPE> предназначен для указания типа текущего документа —

DTD (document type definition, описание типа документа). Это необходимо, чтобы
браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку
HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible
HyperText Markup Language, расширенный язык разметки гипертекста), похожий на
HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и
понимал, согласно какому стандарту отображать веб-страницу и необходимо в
первой строке кода задавать <!DOCTYPE>.
Существует несколько видов <!DOCTYPE>, они различаются в зависимости от

версии языка, на которого ориентированы. В табл. приведены основные типы
документов с их описанием.
Подробнее
Если мы не задаем doctype - ваша страница отображается в режиме quirks -

режиме работы, в котором имитируются особенности и ошибки конкурирующих или
старых версий программных продуктов. Установка <!doctype html> в самом начале-
это самый простой способ избежать режима quirks, но многие страницы уже
написаны для режим quirks и разваливаются в “standards mode”.
В частности таблицы нарушают наследование.
Техническая информация для браузера в тэге <head>
<meta> определяет метатеги, которые используются для хранения информации

предназначенной для браузеров и поисковых систем. Например, механизмы
поисковых систем обращаются к метатегам для получения описания сайта,
ключевых слов и других данных. Разрешается использовать более чем один
метатег, все они размещаются в контейнере <head>. Как правило, атрибуты любого
метатега сводятся к парам «имя=значение», которые определяются ключевыми
словами content, name или http-equiv.
charset - задает кодировку документа.
content - устанавливает значение атрибута, заданного с помощью name или http-
equiv.
http-equiv - предназначен для конвертирования метатега в заголовок HTTP.
name - имя метатега, также косвенно устанавливает его предназначение.
<meta charset="UTF-8"> - корректное отображение русских символов в сайте.
<meta name="viewport" content="width=device-width, initial-scale=0.1"> -
сайт должен подстраиваться под ширину экрана устройства с которого заходит
пользователь.
Viewport - это видимая пользователю область веб-страницы. Т.е. это то, что
может увидеть пользователь, не прибегая к прокрутке. Или иначе говоря это окно
через которое мы смотрим в комнату. А полосы прокрутки заставляют окно
перемещаться по стене.
Метатег viewport был разработан компанией Apple для того, чтобы указывать
браузерам на то, в каком масштабе необходимо отображать пользователю видимую
область веб-страницы. Другими словами meta viewport предназначен для того,
чтобы веб-страницы отображались (выглядели) правильно (корректно) на
смартфонах, планшетах и других устройствах с высокой плотностью пикселей
(>200ppi). Данный метатег предназначен в большой степени для адаптивных
сайтов, но с помощью него можно улучшить представления веб-страниц, имеющих
фиксированную или гибкую разметку.
Атрибут name предназначен для того чтобы указать браузеру, какую именно
информацию о странице хотим ему сообщить. В данном случае эта информация
касается viewport.
Контент (содержимое) этих сведений указывается в качестве значения атрибута
content посредством пар ключ-значение, разделённых между собой запятыми.
Для адаптивного дизайна значения атрибута content viewport должно
определяться 2 параметрами:
width=device-width
initial-scale=1
Рассмотрим каждый из них более подробно.
Первый параметр (width=device-width) отвечает за то, чтобы ширина видимой
области веб-страницы равнялась CSS ширине устройству (device-width). Данная
ширина (CSS) - это не физическое разрешение экрана. Это некоторая величина не
зависящая от разрешения экрана. Она предназначена для того, чтобы мобильный
адаптивный дизайн сайта отображался на всех устройствах одинаково независимо
от их плотности пикселей экрана.
Например, смартфон iPhone4 с физическим разрешением 640x960 имеет CSS
разрешение 320x480. Это означает то, что сайт с метатегом viewport (width=device-
width) на этом устройстве будет выглядить так как будто бы это устройство имеет
разрешение 320x480 (в данном случае вместо device-width будет подставляться
значение 320px). Т.е. на один CSS пиксель будет приходиться 4 физических пикселя
(2 по горизонтали и 2 по вертикали).
Как же определить какое CSS разрешение будет иметь тот или иной экран
устройства?Определяется оно в зависимости от того какую экран имеет плотность
пикселей. Если экран имеет плотность меньше 200ppi, то CSS-разрешение будет
равно физическому. Если экран имеет плотность пикселей от 200 до 300 (ppi), то
CSS-разрешение будет в 1.5 раза меньше физического. А если экран имеет
плотность более 300ppi, то CSS разрешение будет определяться делением
физического разрешения на некоторый коэффициент. Данный коэффициент
определяется по формуле плотность/150ppi с округлением обычно до 2, 2.5, 3, 3.5, 4
и т.д.
Слева страница без мета-тега viewport, справа с мета-тегом. Источник:
developers.google.com
Справа мобилопригодная страница с тегом "viewport", в котором указана область

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

метаданных, изменяют отображение или поведение
HTML-документа, связывают его с другими документами
и предоставляют другую дополнительную информацию
о документе.
Элементами метаданных являются: <base>,

<command>, <link>, <meta>, <noscript>, <script>, <style> и
<title>.
HTML
Оформление текста
<p>... </p> - paragraf - параграф, он же абзац. Создать отступ, “красную строку”,

добавив пробелы в начало абзаца невозможно, это делается стилевыми
свойствами которые будут рассмотрены далее.
К абзацу и заголовку (тег <h1>) автоматически добавляется верхний и нижний
отступы, которые в сумме и дают большое расстояние между заголовком и текстом.
Чтобы уменьшить величину отступа надо явно добавить свойство margin-bottom к
селектору H1. Причем можно установить положительное, нулевое или
отрицательное значение. Таким способом легко задавать желаемое значение
отступа.
<br> - break - перенос строки
<b>... </b> - bold - жирный текст, пробелы до и после, открывающего и
закрывающего тэга, не требуются.
<strong>... </strong> - strong — логическое ударение. (Логическое ударение —
выделение слова интонацией для усиления его смысла или повышения
значимости). Визуально эффект как и от предыдущего тэга. strong-ом мы выделяем
важную часть текста. Имеет смысл для скринридеров, должен, в теории, влиять на
интонацию при прочтении. Также имеет некоторое влияние на выдачу при
индексировании поисковыми роботами.
“Жирность” - насыщенность текста также регулируется css стилями
<i>... </i>- italic - (Italic в шрифтах — это термин, объединяющий всё, что есть
не прямое начертание. Впрочем есть другая версия - )

Используется так же как и <b>.
<em>... </em> - emphasis - упор, акцент. (Эмфатическое ударение — выделение
слова интонацией для усиления эмоциональной выразительности). Визуально
эффект как и от <i> </i>. Имеет смысл для скринридеров, при прочтении будет, ну
точнее должен быть выделен интонацией и оказывает некоторое влияние на
выдачу при индексировании поисковыми роботами.
Наклон текста возможно регулировать в файле css стиля
Следует отметить, что теги <b> и <strong>, также как <i> и <em>
являются не совсем эквивалентными и заменяемыми. Первый тег <b> —
является тегом физической разметки и устанавливает жирный текст, а тег
<strong> — тегом логической разметки и определяет важность
помеченного текста. Такое разделение тегов на логическое и физическое
форматирование изначально предназначалось, чтобы сделать HTML
универсальным, в том числе не зависящим от устройства вывода
информации. Теоретически, если воспользоваться, например, речевым
браузером, то текст, оформленный с помощью тегов <b> и <strong>, будет
произнесен по-разному. Однако получилось так, что в популярных
браузерах результат использования этих тегов равнозначен.
http://endseo.ru/2013/10/11/vliyanie-tegov-strong-b-em-i-na-prodvizhenie/
Цитирую: Согласно спецификациям W3C, предписывается использовать
тег <strong> взамен устаревшему <b>, и аналогично тег <em> вместо
устаревшего <i>. Но это всего лишь рекомендации и их исполнение мало
влияет на продвижение сайта.
Задача данных тегов: выделить в тексте главную или ключевую

информацию, заставить читателя обратить на себя внимание. И именно с
такой позицией нужно подходить к выбору того или иного тега. Однако, по
моему опыту, да и по многочисленным публикациям и исследованиям, я
пришёл к выводу, что теги <strong> и <em> незначительно больше влияют
на релевантность страницы относительно своих собратьев. Поэтому я
обычно основные ключевые слова в тексте оборачиваю в «более сильные»
теги, а ту информацию, на которую хочу обратить взгляд пользователя в
«более слабые».
Внимательно следите за количеством использования данных тегов.

Достаточно буквально пару стронгов на весь текст. Слишком частое
присутствие этих тегов на странице может вызвать вопросы к странице со
стороны роботов поисковых систем и повлечь наложение санкций за
переспам. Да и никто не застрахован от конкурентов, которые вправе
пожаловаться на ваш сайт тому же Яндексу.
<u>... </u> - underline - подчеркнуть. Акцентированного для поисковиков варианта

нет.
<s>... </s> - зачеркнутый текст. (Показать в гугл доке нет возможности.) У этого тэга
существовала другая форма записи - <strike> , но в спецификации HTML 5 его
использование было не рекомендовано, так как считается что эту функцию
желательно реализовывать через css. Более того, <s> также считается
“осуждаемым тэгом” из тех же соображений.
Underline и strike варианты написания текста рекомендуется задавать через css
стиль.
Комбинируя <b> и <i> или <b>, <u>, <i>, <s> мы ожидаемо получаем наклонный
жирный текст или совсем уж мутации в виде наклонного, жирного, подчеркнутого и
зачеркнутого текста )).
Есть еще несколько интересных, но реже используемых тэгов форматирования:
<small>...</small> уменьшает размер шрифта на единицу по сравнению с обычным
текстом. http://htmlbook.ru/html/small
<big> …</big> увеличивает размер шрифта на единицу по сравнению с
обычным текстом.
<sub>...</sub> subscript подстрочный текст (нижний индекс) и его братец
<sup>...</sup> superscript надстрочный текст (верхний индекс). http://htmlbook.ru/html/sub
http://htmlbook.ru/html/sup
<tt> … </tt> - tele type - отображает текст моноширинным текстом.
Моноширинный, или непропорциональный шрифт — это шрифт, в котором
все знаки (точнее, кегельные площадки знаков) имеют одинаковую
ширину.
Списки
Являются блочными тэгами.
<ul>...</ul> - unordered list - ненумерованный список. Также возможно

использование атрибута type. <ul type=“{disk} | {circle} | {square}”>
Значение атрибута type по умолчанию - disk
<li> </li> - list item - элемент списка. Дочерний тэг для <ul>...</ul>. По
умолчанию маркер элемента - черный кружок.
пример:
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
Эти три типа маркера (и другие не добавляются) также могут быть заданы в css
файле, причем они перекроют тип заданный в html файле.
<ol>... </ol> - ordered list - нумерованный список.

<ol {type=“a”|”A”|”число”} {start=”число”} {reversed}> “Число” -одиночная цифра или
число.
Например <ol type="a" start="6">
Задав type = “a” или же “A” получим отсортированные по английскому алфавиту
(по умолчанию по номеру), по строчным и заглавным буквам соответственно,
маркеры списка. Задав start = “6”,- в зависимости от значения атрибута type
маркеры начнутся с буквы “f” или же с цифры “6”.
Атрибут reversed, не имеет своего значения, маркеры списка будут
отсортированы по уменьшению.
<li>...</li> - list item - элемент списка. Естественно он дочерний тэг для
<ol>...</ol>.
пример вышенаписанного:
<ol type="a" start="6" reversed>

<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ol>
Должен сказать, если мы используем
только <li>...</li> , без родительских тэгов,
то у нас, как ни странно, по крайней мере в
хроме 84, получается тот же список,
ordered превращается в unordered с
маркером в виде черного кружка и текст
прижимается к левому краю страницы.
Определением стиля в css файле для нумерованного списка можно задать еще
много типов маркеров.
<dl>...</dl> - description list - список с подробным описанием.

<dt> - definition term название термина, оно же маркер списка, закрывать dt
не обязательно.
<dd> - definition description определение термина.
Наилучшим объяснением будет пример :
<dl>
<dt>GIF</dt>
<dd>Формат графических файлов, широко
применяемый при создании сайтов.
GIF использует 8-битовый цвет и эффективно
сжимает сплошные цветные области,
при этом сохраняя детали изображения.</dd>
<dt>JPEG
<dd>Популярный формат графических файлов,
широко применямый при создании
сайтов и хранения изображений. JPEG
поддерживает 24-битовый цвет и сохраняет
яркость и оттенки цветов в фотографиях. Данный
формат называют сжатием с потерями,
поскольку алгоритм JPEG выборочно отвергает
данные. Метод сжатия может исказить
деталь в рисунке, особенно содержащий текст
или изображение с четкими краями.
Формат JPEG не поддерживает прозрачность,
когда вы сохраняете фотографию в формате
JPEG, прозрачные пиксели заполняются
определенным цветом.</dd>
</dl>
Таблицы
Минимальный набор тэгов формирующих таблицу выглядит так:
<table>
<tr>
<td>...</td>
</tr>
</table>
<th>...</th> -тег <th> предназначен для создания одной ячейки таблицы, которая
обозначается как заголовочная. Текст в такой ячейке отображается браузером
обычно жирным шрифтом и выравнивается по центру. Тег <th> должен
размещаться внутри контейнера <tr>, который в свою очередь располагается внутри
тега <table>.
<td> имеет полезный атрибут - colspan. Его использование объединяет ячейки по
горизонтали.
<td colspan="2"> или
<td colspan="3">
Более полная структура таблицы выглядит следующим образом :

<table>
<thead> .... </thead>
<tfoot> ... </tfoot>
<tbody>
<tr>
<td> ... </td>
</tr>
</tbody>
</table>
Элемент <thead> предназначен для хранения одной или нескольких строк,
которые представлены вверху таблицы. Допустимо использовать не более одного
элемента <thead> в пределах одной таблицы, и он должен идти в исходном коде
сразу после тега <table>.
Элемент <tfoot> предназначен для хранения одной или нескольких строк,
которые представлены внизу таблицы. Хотя тег <tfoot> в исходном коде должен
быть определен до тега <tbody>, браузеры отображают его в самом низу таблицы.
В пределах таблицы разрешается использовать только один элемент <tfoot>.
Элемент <tbody> предназначен для хранения одной или нескольких строк
таблицы. Это позволяет создавать структурные блоки, к которым можно применять
единое оформление через стили, а также управлять их видом через скрипты.
Допускается применять несколько тегов <tbody> внутри контейнера <table>.
Доступны и другие виды группировок строк — <tfoot> и <thead>, ни один из них не
должен перекрываться с элементом <tbody>.
Семантические тэги
Ранее изученные тэги говорят браузеру, какой текст выводить на экран. Но при
просмотре кода разметки они ни каким образом не указывают на смысл этого
текста, на то, в какой части сайта текст виден. Естественно, смотря на код мы
видим, какая фраза, заголовок, идет после какого, но можно оформлять текст в
более удобном, нам же для дальнейшего редактирования, виде. Сейчас будет
понятно ))). Для этого придуманы семантические тэги.
<header>, <footer>, <nav>, <article>, <main>, <section>, <aside> и прочие.
При написании кода мы используем их, соответсвенно той части сайта которую
пишем, а внутри работаем с “безликими” <div>, <span> и прочими тегами деления
сайта на блоки. (Внутри которых находится само содержимое странички).
Более того, это влияет на позицию сайта в поисковой выдаче. Цитирую
“Семантический HTML5 устраняет этот недостаток, определяя точные теги для
пояснения четкой роли контента на странице. Эта дополнительная информация
помогает роботам/индексаторам, таким как Google и Bing лучше понять какой
контент важен, какой является второстепенным, какой используется для навигации
и так далее. Добавляя семантические HTML теги на ваши страницы, вы даете
дополнительную информацию, которая помогает поисковикам понимать роли и
относительную важность разных частей ваших страниц.”
<section>...</section> задаёт раздел документа, может применяться для блока
новостей, контактной информации, глав текста, вкладок в диалоговом окне и др.
Раздел обычно содержит заголовок. Допускается вкладывать один тег <section>
внутрь другого.
Блочные и строчные элементы

Элементы условно делятся на 2 типа:
блочные, которые на строке родителя находятся в одиночестве (у них display

имеет такие значения, как block, list-item, table, flex, grid),
строчные, которых на строке родителя может быть несколько (у них display
имеет такие значения, как inline, inline-block, inline-table, inline-flex, inline-grid).
<div>...</div> - division - делитель

Является блочным элементом и предназначен для выделения фрагмента
документа.
Блочный элемент всегда начинается с новой строки и заканчивается переводом
на новую строку.
Свойство display, по умолчанию, block.
Блочный элемент, по умолчанию, занимает всю ширину страницы, или блока,
внутри которых он находится. Но при отсутствии содержимого он имеет высоту 0px;
<p> является блочным элементом, всегда начинается с новой строки, абзацы
текста идущие друг за другом разделяются отбивкой - небольшим вертикальный
отступом. Если они слишком велики можно, в местах переноса строк, добавлять тег
<br>. В отличие от абзаца, тег переноса строки <br> не создает дополнительных
вертикальных отступов между строками и может применяться практически в любом
тексте. Ну и не забываем про margin-ы.
При дальнейших экспериментах мне не удалось корректно запихнуть ни <h*> ни
<div> внутри <p>. Несмотря на то, что я их вписывал внутрь закрытого тэга,
создавался сестринский а не дочерний элемент. Это было видно по поведению :last-
child. Но это “сестринский” элемент был странным, хотя по раcположению в тексте
html он подходил для :first-child или :last-child - эти псевдоклассы его не выбирали.
Вот что я нашел - “вы не можете создать div внутри p, потому что единственный
тип контента, разрешенный в элементе p , - это фразировка контента (как указано в
спецификации), что обычно означает встроенные элементы. Вот почему наличие div
(или любого другого элемента потока, такого как ul или figure ) сразу после
незамкнутого p будет неявно закрывать этот p и создавать сестринский элемент, а
не ребенок в DOM.”
Встретил и такое мнение -когда браузер встречает неподходящий тег внутри <p>,
он «выбрасывает» этот тег из <p>.
Но этих ограничений не стало в спецификации html 5. Рано или поздно
разберусь.
Для блочных элементов можно задавать ширину (width), высоту (height),

внутренние (padding) и внешние (margin) отступы которые отображаются со всех
сторон.
width и height определяют только размеры внутреннего содержимого элемента,
реальная ширина и высота блочного элемента это сумма: width (height)+padding-
left(top)+padding-right(bottom)+border-width+margin-left(top)+margin-right(bottom)
При значении box-sizing: content-
box - padding “растет наружу”
увеличивая размер элемента. При
значении box-sizing: border-box -
padding “растет внутрь”.
Разделение элементов на блочные
и строчные использовалось в
спецификации HTML до версии 4.01. В
HTML5 это противопоставление
заменено более сложным набором
категорий контента. Категория
«строчных» элементов примерно
соответствует категории текстового
контента, а для «блочных» элементов
прямого соответствия нет, но
«блочные» и «строчные» элементы
вместе примерно соответствуют
категории потокового контента в
HTML5 (т.е., грубо говоря, «блочные»
элементы — это потоковый контент
минус текстовый контент). Кроме того,
есть и другие категории, например,
интерактивный контент.
https://developer.mozilla.org/ru/docs/
Web/HTML/Block-level_elements
<span> …</span> - span - интервал - перевод не совсем отвечает русскоязычной
семантике. Этот тэг следует понимать как “строка текста” или часть строки текста.
<span> - строчный элемент, он идет в потоке строки, не деля ее. Иногда
строчные элементы называют встроенными.
Этот тег целесообразно применять когда мы хотим придать части текстовой
строки свойства отличные от остальной части. Без CSS мы должны были- бы
написать, например <i><b><u> Наш текст</u></b></i> что выглядит в HTML файле
громоздко, и противоречит самой идее CSS. И возможны повторения так
оформленного текста, и существует вероятность, что эту комбинацию надо будет
изменить, найдя каждую. Используя CSS мы пишем <span class=”italic-bold-
underline-text” Наш текст </span>,
в css файле определяем стиль этого класса -
.italic-bold-underline-text
{..........;
……;
……;}
и в дальнейшем легко, в одном участке css файла, меняем оформление всех
частей строк текста.
margin : - при задании для строчного элемента margin-а будет отображаться
только левый и правый отступ, даже если задавать все четыре, и, соответственно
второй параметр, если margin задавать в варианте двух параметров.
padding :- все как и для margin-а, левый и правый padding-и отрабатываются.
width и height : - не отрабатывается.
Несмотря на это заданные значения отступов
отображаются в инспекторе кода.
Есть такое мнение - вкладывание блочных элементов в строчные - недопустимо,
наоборот - вполне, но - «Блочных и строчных элементов» в HTML больше нет —
CSS-LIVE
Есть возможность менять тип элемента, придавать строчному блочный тип и

наоборот.
Волшебное свойство display, или типы отображения элементов html
Формы
<form>...</form>
● accept-charset - устанавливает кодировку, в которой сервер может принимать
и обрабатывать данные.
● action - адрес программы или документа, который обрабатывает данные
формы. При верстке сайта , до включения в работу программистов,
допустимо указать “/”
● autocomplete - включает автозаполнение полей формы.
● enctype - способ кодирования данных формы.
● method - метод протокола HTTP. При верстке сайта , до включения в работу
программистов, допустимо указать “post”
● name - имя формы.
● novalidate - отменяет встроенную проверку данных формы на корректность
ввода.
● target - имя окна или фрейма, куда обработчик будет загружать
возвращаемый результат. Значения атрибута те-же, что и в случае с <a>
Также для этого тега доступны универсальные атрибуты и события.
input - поле ввода однострочного текста

<input >
Тег <input> является одним из разносторонних элементов формы и позволяет
создавать разные элементы интерфейса и обеспечить взаимодействие с
пользователем. Главным образом <input> предназначен для создания текстовых
полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не
требуется помещать внутрь контейнера <form>, определяющего форму, но если
введенные пользователем данные должны быть отправлены на сервер, где их
обрабатывает серверная программа, то указывать <form> обязательно. То же самое
обстоит и в случае обработки данных с помощью клиентских приложений,
например, скриптов на языке JavaScript.
По умолчанию свойство display для input -inline-block
Установка display в block тем не менее не заставит поле ввода занять всю
ширину родителя. Width надо задавать вручную.
Имеет большое количество атрибутов, здесь, я пока, рассмотрю лишь немногие
из них.
● type - можно объяснить только таблицами:
В HTML5 добавлены новые значения:

Значения type tel и email влияют на отображение на мобильных устройствах. При
вводе информации в эти поля появится оптимизированная клавиатура, с @ и
английскими буквами или цифрами для ввода телефона.(Должна появляться,
зависит от п.о на телефоне)
Значение password - при заполнении, вместо вводимых символов, в поле
выводятся звездочки. Сосед ничего не подсмотрит. ))
Значение radio - выбор только одного из предложенных вариантов.

Покажу на примере, как делается выбор пола человека. (Ну по крайней мере
пока можно выбрать только один из двух вариантов)))
<div class="form-group">
<label for="male">муж</label>
<input type="radio" name="chose-male" id="male">
<label for="female">жен</label>
<input type="radio" name="chose-male" id="female">
</div>
Следует обратить внимание на параметр name обоих кнопок, поскольку он

одинаков, это radio кнопки одной группы и отмечена кружком может быть только
одна из них.
Ну и, присвоив этому input-у какой либо класс, и задав свойству display этого
класса - block, мы выстроим кнопочки одну над другой. (пачиму кружочки синие ?)
Или пример с использованием value
<p><input type="radio" name="answer"

value="a1">Офицерский состав<Br>
<input type="radio" name="answer"
value="a2">Операционная система<Br>
<input type="radio" name="answer"
value="a3">Большой полосатый мух
</p>
Немного магии - https://itchief.ru/html-and-css/styling-checkbox-and-radio
Значение - checkbox
Все просто:
<label for="agree">прочитал правила и согласен с ними</label>
<input type="checkbox" name="agree" id="agree">
</div>
Значение - file, открытие диалогового окна операционной системы для выбора

файла и его загрузки в форму.
Пример:
<label for="Фото">Фото</label>
<input type="file" name="photo" id="photo">
</div>
● checked - предварительно активированный переключатель или флажок.

● placeholder - выводит поясняющий (замещающий) текст, который пропадает
при начале ввода текста пользователем. Если внутри строки предполагается
пробел, ее необходимо брать в двойные или одинарные кавычки.
● name - имя данного поля, важно для программистов, обязательно.
● value - определяет значение элемента формы, которое будет отправлено на
сервер или получено с помощью клиентских скриптов. На сервер
отправляется пара «имя=значение», где имя задается атрибутом name тега
<input>, а значение — атрибутом value для текстовых полей (input
type="password | text") указывает предварительно введенную строку.
Пользователь может стирать текст и вводить свои символы, но при
использовании в форме кнопки Reset пользовательский текст очищается и
восстанавливается введенный в атрибуте value;
http://htmlbook.ru/html/input/value
textarea - поле ввода многострочного текста

<textarea> …</textarea> представляет собой элемент формы для создания
области, в которую можно вводить несколько строк текста. В отличие от тега <input>
в текстовом поле допустимо делать переносы строк, они сохраняются при отправке
данных на сервер.
Между тегами <textarea> и </textarea> можно поместить любой текст, который
будет отображаться внутри поля.
За уголок можно потянуть мышкой и увеличить размер.

Заметил такой момент -
<textarea> </textarea>
<textarea></textarea>
Можно нечаянно вставить пробел, между закрывающей и открывающей скобкой.
И именно он будет отображаться вместо placeholder-a.
Иными словами - <textarea class="textarea" name="text" placeholder="О
вас">1</textarea> будет выведена единичка, а не “О вас” в текстовом поле ввода.
● accesskey - переход к полю с помощью сочетания клавиш.

● autofocus - автоматическое получение фокуса.
● cols - ширина поля в символах. Желательно использовать css свойство width.
● rows - высота поля в строках текста. Желательно использовать css свойство
height. Да, в этих случая придется пересчитывать символы в пиксели.
● disabled - блокирует доступ и изменение элемента.
● form - связывает текстовое поле с формой по её идентификатору.
● maxlength -максимальное число введенных символов.
● name - имя поля, предназначено для того, чтобы обработчик формы мог его
идентифицировать.
● placeholder - указывает замещающийся текст. Если внутри строки
предполагается пробел, ее необходимо брать в двойные или одинарные
кавычки. https://html5.by/blog/placeholder/
● readonly - устанавливает, что поле не может изменяться пользователем.
● required - обязательное для заполнения поле.
● tabindex -порядок перехода между элементами при нажатии на клавишу Tab.
● wrap - параметры переноса строк.
Для <input> и <textarea> , в случае использования “своих” шрифтов, на сайте,

нужно индивидуально прописывать font-family и font-size. Броузеры ставят в поля
ввода шрифты по умолчанию для форм ввода, не обращая внимание на стиль ,
например, что-бы не было прописано для <body>, наследование шрифтов от
родителя автоматически не сработает. Но, поскольку таки <body> а не броузер
родитель элемента, использование inherit определит для полей ввода шрифты
которые мы как правило указываем в начале css файла для <body>.
label - метка
<label>...</label>
Тег <label> устанавливает связь между определенной меткой, в качестве которой

обычно выступает поясняющий текст, и элементом формы (<input>, <select>,
<textarea>). Такая связь необходима, чтобы изменять значения элементов формы
при нажатии курсором мыши и на этот текст, а не только на поле ввода. Это
особенно удобно при работе с формой с мобильного свойства. Кроме того, с
помощью <label> можно устанавливать горячие клавиши на клавиатуре и
переходить на активный элемент подобно ссылкам.
Этот тэг не заменяет атрибут placeholder. placeholder “живет” внутри окна ввода,
а label снаружи.
● accesskey - доступ к элементам формы с помощью горячих клавиш.

● for - идентификатор элемента, с которым следует установить связь.
Существует два способа связывания объекта и метки. Первый заключается в

использовании идентификатора id внутри элемента формы и указании его имени в
качестве атрибута for тега <label>. При втором способе элемент формы помещается
внутрь контейнера <label>.
примеры:
<label for="name">Ваше имя</label>
<input class="form-input" type="text" name="name" id="name">
</div>
<label> <input class="form-input" type="text" >Ваше имя</label>
</div>
Для того чтобы метка отрисовалась над полем ввода, в нашем примере, надо
свойству display класса form-input назначить свойство block. Как следствие он
рисуется с новой строки, под меткой.
select - поле выбора одного из нескольких предустановленных значений

<select>
<option>Пункт 1</option>
</select>
Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося

списка, а также список с одним или множественным выбором. Подробнее
По умолчанию свойство display для select -inline-block .

Придание свойству display значения block сделает элемент блочным, но…
увеличение левого и правого padding не приведет к увеличению ширины блока, а
наоборот, они “растут” внутрь, и при большом значении попросту “задушат” сам
элемент. Поэкспериментируйте с инспектором кода.
Изменение толщины границы также влияет только на высоту блока, увеличение
левой/правой стороны уменьшает элемент вместо увеличения.
Еще одно, из учебных материалов понятно, что ранее и вертикальные padding-и
не влияли на высоту поля, но в Chrome 84 они уже отрабатываюся как у всех
блочных элементов.
● multiple - позволяет одновременно выбирать сразу несколько элементов

списка.
Пример раскрывающегося списка
<select name="country" >
<option> Рига</option>
<option> Даугавпилс</option>
</select>
</div>
Пример множественного выбора: при зажатой клавише ctrl можно мышкой

выбрать оба значения.
<select name="country" multiple>
<option> Рига</option>
<option> Даугавпилс</option>
</select>
</div>
option - определяет отдельные пункты списка, создаваемого с помощью

контейнера <select>.
<select>
</select>
● disabled - заблокировать для доступа элемент списка.

● label - указание метки пункта списка.
● selected - заранее устанавливает определенный пункт списка выделенным.
● value - значение пункта списка, которое будет отправлено на сервер или
прочитано с помощью скриптов.
button - кнопка
Тег <button> создает на веб-странице кнопки и по своему действию напоминает

результат, получаемый с помощью тега <input> (с атрибутом type="button | reset |
submit"). В отличие от этого тега, <button> предлагает расширенные возможности по
созданию кнопок. Например, на подобной кнопке можно размещать любые
элементы HTML, в том числе изображения. Используя стили можно определить вид
кнопки путем изменения шрифта, цвета фона, размеров и других параметров.
Теоретически, тег <button> должен располагаться внутри формы,

устанавливаемой элементом <form>. Тем не менее, браузеры не выводят
сообщение об ошибке и корректно работают с тегом <button>, если он встречается
самостоятельно. Однако, если необходимо результат нажатия на кнопку отправить
на сервер, помещать <button> в контейнер <form> обязательно.
Атрибуты - http://htmlbook.ru/html/button
● type -
○ button обычная кнопка. Сама по себе делает то, что ничего не делает.
Полезна для программистов.
○ reset - кнопка для очистки введенных данных формы и возвращения
значений в первоначальное состояние.
○ submit - кнопка для отправки данных формы на сервер.
● disabled - блокирует доступ и изменение элемента.
Кнопки имеют свои стили по умолчанию установленные в броузере.
fieldset - группирования элементов формы.
<fieldset>....</fieldset> Подробнее - http://htmlbook.ru/html/fieldset

Является тэгом “оберткой”. Формирует видимую по умолчанию рамочку вокруг
заключенных внутри него элементов формы.
legend - создание заголовка группы элементов формы, которая

определяется с помощью тега <fieldset>
<legend>Текст</legend> Подробнее - http://htmlbook.ru/html/legend
Пример:
<fieldset>
<legend>Личные данные</legend>
<label for="name">Ваше имя</label>
<input class="form-input" type="text" name="name" id="name">
</div>
<input class="form-input" type="email" name="email" placeholder="Ваш
email">
</div>
<input class="form-input" type="tel" name="tel" placeholder="Ваш номер
телефона">
</div>
<input class="form-input" type="password" name="name"
placeholder="Придумайте пароль">
</div>
<div>
<textarea class="textarea" name="text" placeholder="О вас"> </textarea>
</div>
</fieldset>
Ссылки и изображения
Ссылка для страницы нашего сайта или страницы в инете:
<a href="URL">текст ссылки</a> впрочем работает и без кавычек.
тэг <a>...</a> - anchor - якорь. Этот тэг имеет еще несколько интересных
атрибутов, но сейчас нас в первую очередь интересует href (hyper-reference
гипер-ссылка) и непосредственно с ним связанные target и download
атрибут - href="URL” (Universal Resource Locator, универсальный указатель
ресурса), иными словами, адрес документа, на который следует перейти.
Ссылка будет открыта в текущей вкладке броузера
Cодержимое контейнера <a> является ссылкой. Текст, расположенный между
тегами <a> и </a>, по умолчанию становится синего цвета и подчеркивается.
<a href="https://www.google.com/"> Другой сайт</a> или
<a href="https://google.com/"> Другой сайт</a> - это переход сами видите куда,
но
<a href="google.com"> Другой сайт</a
<a href="www.google.com"> Другой сайт</a>
приведут лишь на страницу с одинокой надписью - Cannot GET /google.com
или Cannot GET /www.google.com или попросту файл не найден - адрес сайта
надо писать полностью, с протоколом.
Для открытия ссылки не в текущей вкладке броузера применяется атрибут
target.
● _blank — загружает страницу в новое окно браузера;
● _self — загружает страницу в текущее окно;
● _parent — загружает страницу во фрейм-родитель;
● _top — отменяет все фреймы и загружает страницу в полном окне браузера.
Когда у target указано неизвестное значение, например, имя фрейма набрано с
ошибкой, то это приводит к тому, что ссылка открывается в новом окне.
Если на веб-странице необходимо сделать, чтобы все ссылки открывались в
новом окне, нет необходимости добавлять во все теги <a> target="_blank". Код
можно сократить, если вначале страницы, в <head> добавить строку <base
target="_blank">
Ссылка для звонка по телефону:

<a href="tel:+34567890">Звоните по телефону 3 456 78 90</a>
Рекомендуется указывать телефонный номер в международном формате: знак
плюс (+), код страны, код местной зоны и номер абонента. https://html5.by/blog/href-
tel-mobile-browser/
Операционная система запустит приложение работающее с телефонными
номерами - skype, FaceTime и т.д.
Номер телефона в параметре атрибута tel: указывается без пробелов.
Ссылка для отправки электронного письма:

<a href="mailto:info@website.com"> пишите <a/>
Операционная система запустит почтовую программу.
Ссылка для изображения:

<img src=images/111.jpg alt="текст">
<img src=URL | “URL” alt="текст"> в случае если мы в <img> задаем URL -
кавычки не обязательны.
Тег <img> предназначен для отображения на веб-странице изображений в
графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся
через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой
файл, поместив тег <img> в контейнер <a>. (например <a href="lorem.html"><img
src="images/girl.png" alt="lorem"></a>При этом вокруг изображения отображается
рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.
Рисунки также могут применяться в качестве карт-изображений (*map), когда
картинка содержит активные области, выступающие в качестве ссылок. Такая карта
по внешнему виду ничем не отличается от обычного изображения, но при этом оно
может быть разбито на невидимые зоны разной формы, где каждая из областей
служит ссылкой.
Прочие атрибуты:
● align - Определяет как рисунок будет выравниваться по краю и способ
обтекания текстом. http://htmlbook.ru/html/img/align Использование этого атрибута
осуждается спецификацией HTML, применялся в версии html 3.2 а далее поддерживается для
совместимости со старыми страницами.
● alt - Альтернативный текст для изображения.
● border - Толщина рамки вокруг изображения. http://htmlbook.ru/html/img/border
Использование этого атрибута осуждается спецификацией HTML, применялся в версии html 3.2 а далее
поддерживается для совместимости со старыми страницами.
● height - Высота изображения. http://htmlbook.ru/html/img/heighthspace -
Горизонтальный отступ от изображения до окружающего контента.
● http://htmlbook.ru/html/img/hspace Использование этого атрибута осуждается спецификацией
HTML, применялся в версии html 3.2 а далее поддерживается для совместимости со старыми страницами.
● ismap - Говорит браузеру, что картинка является серверной картой-
изображением. http://htmlbook.ru/html/img/ismap
● longdesc - Указывает адрес документа, где содержится аннотация к картинке.
http://htmlbook.ru/html/img/longdesc Браузеры никак не поддерживают атрибут longdesc и не
выводят текст, указанный по ссылке. Некоторым исключением является Firefox, который отображает
адрес документа в свойствах изображения
● lowsrc - Адрес изображения низкого качества.
http://htmlbook.ru/html/img/lowsrc Данный атрибут уже не поддерживается браузерами и вместо
добавления двух разных изображений рекомендуется использовать прогрессивный формат JPG.
● vspace - Вертикальный отступ от изображения до окружающего контента.
http://htmlbook.ru/html/img/vspace Использование этого атрибута осуждается спецификацией
HTML, применялся в версии html 3.2 а далее поддерживается для совместимости со старыми страницами.
● width - Ширина изображения. http://htmlbook.ru/html/img/width
● usemap - Ссылка на тег <map>, содержащий координаты для клиентской
карты-изображения.
Предположим изначальная картинка велика, 800 на 600 пикселей
<img src=images/111.jpg alt="Зе" width="100">
картинка без потери пропорций сожмется до 100 на 75 (600/8) пикселей
<img src=images/111.jpg alt="Зе" height="100">
картинка без потери пропорций сожмется до 133 (800/6) на 100 пикселей
<img src=images/111.jpg alt="Зе" width="100" height="100">
картинка будет искажена
Мы можем использовать глобальный атрибут title (существует тэг title и

существует одноименный атрибут.
<a href=https:\\google.com> <img src=images/111.jpg width="100" title=”текст”> </a>
и через несколько секунд после наведения мышки на эту картинку-ссылку
“всплывет” пояснительный текст - “текст” ))) Если параметр ”текст” не заключить в
кавычки то к атрибуту будет иметь отношение только первое слово, остальное
проигнорируется, и в русском и в английском языке.
Еще пример, маленькая картинка - ссылка на себя большую (она является

текстом ссылки, только в графике):
<a href="images/111.jpg" >
</a>
Но в отличии от сайта, картинка откроется в текущей вкладке без использования
target
атрибут href может ссылаться на файлы разных типов, локальные файлы и

файлы в инете: pdf, doc, и пр. переходе по ссылке, если это не архивный файл,
браузер постарается открыть файл в своей вкладке, при наличии соответствующего
плагина или открыть его соответствующей программой с компьютера или же
скачать его в свою папку “загрузки”. Архивный файл всегда будет (должен, если
быть точнее) скачиваться в “загрузки”
Но если мы хотим именно скачать файл то следует указать соответствующий
атрибут.
<a href="images/111.jpg" download >
</a>
Глобальные атрибуты.
Наряду с атрибутами, характерными для конкретных тегов, в HTML5 существует
и ряд атрибутов, который можно добавлять к любым тегам, поэтому входящие в эту
группу атрибуты называются глобальными или универсальными.
Несмотря на то, что глобальные атрибуты можно использовать со всеми HTML
тегами, на некоторые теги они не окажут никакого влияния. Например, если
добавить атрибут title или dir к тегу <br>, то никаких визуальных изменений на веб
странице наблюдаться не будет.
Это:
accesskey
class -
contenteditable
dir
draggable
hidden id
lang
spellcheck
style
tabindex
title - атрибут title используется для указания дополнительной информации о
содержимом элемента (отображается браузерами в виде всплывающей текстовой
подсказки при наведении курсора мыши на элемент).
Атрибут title часто используется с картинками, для добавления описания
картинки:
<img src="1.png" title="Красивый синий цветок">
Примечание: внешний вид и размер всплывающей подсказки, шрифт и цвет
текста, зависят от браузера и не могут быть изменены с помощью CSS стилей.
CSS
Что такое и зачем
Идея использования CSS заключается в том, что в HTML файле находится сам
текст сайта, его семантика, таблицы, картинки, формы и прочее, а в CSS файле
находится описание того как эти элементы отображаются на странице, (за
некоторыми исключениями). Это описание и называется стилем.
CSS может изменить представление элемента до неузнаваемости, но повлиять

на модель содержимого он не может. Ведь CSS применяется к элементам DOM,
построенной из уже распарсенной разметки. А модель содержимого важна как раз
при построении этой DOM, самому парсеру, до вступления CSS в действие.
Существует три метода использования стилей:
1. Подключение файла стилей <link rel="stylesheet" href="style.css">
Атрибут тэга link - rel - relationship ‒ «отношение, взаимосвязь», определяет
отношения между текущим документом и файлом, на который делается тэгом href
ссылка. Это необходимо, чтобы браузер знал, как использовать подключаемый
документ.
stylesheet Определяет, что подключаемый файл хранит таблицу стилей (CSS).
alternate Альтернативный тип, используется, к примеру, для указания ссылки на
файл в формате XML для описания ленты новостей, анонсов статей.
Значения по умолчанию у link нет.
Файл стилей может располагаться как на вашем компьютере, так и на любом
сервере.
2. Глобальные (Internal css style)
При использовании глобальных стилей свойства CSS описываются в самом
документе и располагаются в заголовке веб-страницы. По своей гибкости и
возможностям этот способ добавления стиля уступает предыдущему, но также
позволяет хранить стили в одном месте, в данном случае прямо на той же странице
с помощью контейнера <style>, как показано ниже:
!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Глобальные стили</title>
<style>
H1 {
font-size: 120%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333366;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
3. Внутренние стили (embedded css style или встроенный, ещё их иногда

называют inline стили))
Является по существу расширением для одиночного тега используемого на

текущей веб-странице. Для определения стиля используется атрибут style, а его
значением выступает набор стилевых правил.
Стили подключенные таким образом имеют наибольший приоритет.
Пример:
<!DOCTYPE HTML>
<html>
<head>
<title>Внутренние стили</title>
</head>
<body>
<p style="font-size: 120%; font-family: monospace; color: #cd66cc">Пример текста</p>
</body>
</html>
Внутренние стили рекомендуется применять на сайте ограниченно или вообще
отказаться от их использования. Дело в том, что добавление таких стилей
увеличивает общий объем файлов, что ведет к повышению времени их загрузки в
браузере, и усложняет редактирование документов для разработчиков.
Кроме того, в разных русскоязычных источниках есть
разночтения, внутренними стилями называют и глобальные
стили также.
Импорт CSS
В текущую стилевую таблицу можно импортировать содержимое CSS-файла с
помощью команды @import. Этот метод допускается использовать совместно с
внешней или внутренней таблицей стилей, но никак не со встроенными стилями.
Общий синтаксис следующий.
@import url("имя файла");

@import "имя файла";
Такая запись используется в случае если импортируемый css находится в
одной папке с основным.
@import url("папка c css файлами/header.css");
Такая запись используется в случае если импортируемый css находится в
одной папке с основным, НО мы делаем подключение из html файла ,который
находится уровнем ниже. (Абсолютные и относительные ссылки)
После ключевого слова @import указывается путь к стилевому файлу одним из
двух приведённых способов — с помощью url или без него.
@import может использоваться как во внешнем .css файле, так и в таблице
глобальных стилей, но не во встроенных стилях.
Нужно быть внимательным. Директива @import должна находится в начале
таблицы стилей. Браузер применяет стили последовательно, от первой строки до
последней. Поэтому, например, мы media запросы хотим сделать отдельным css
файлом. И просто так адаптивность пропадет. Произойдет это вот почему.
Медиа запросы при своем срабатывании стилизуют какой либо элемент, но
импортируем мы их в первой строке. А следовательно, при рендеринге, после
стилизации под меньший размер согласно @import файла, браузер вернет стиль
заданный далее, под основное разрешение экрана устройства.
У меня получился такой работающий пример:
@/*style.css*/
@import url("gallery.css");
@import "mobile.css";
.image_link {
color: #5f5d5f;
}
.image {
max-width: 100%;
max-height: 150px;
}
.footer {
background-color: black;
color: white;
}
/*gallery.css*/
.gallery {
max-width: 80;
margin: 30px auto;
overflow: hidden;
}
.image_card {
float: left;
list-style-type: none;
font: 10px/1.5 Verdana, Helvetica, Sans-serif;
width: 16%;
margin: 2%;
}
/*mobile.css*/
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
.image_card {
width: 21%; }
}
/* Small Devices, Tablets */
.image_card {
width: 29%; }
}
/* Extra Small Devices, Phones */
.image_card {
width: 46%; }
}
/* Custom, iPhone Retina */
.image_card {
width: 96%; }
}
Стили сработают даже так :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">

<title>Float masonry</title>
<style media="all">
@import url(css/style.css);
</style>
</head>
но вот почему так не принято делать я пока не знаю.
Любая встроенная (embedded, inline, внутренняя) таблица стилей имеет

наивысший приоритет. Таким образом, она переопределит любое правило,
определенное в тегах <style>...</style> в <head> или правилах, определенных в
любом внешнем файле таблицы стилей.
Любое правило, определенное (internal, глобальная, внутренняя таблица) в тегах
<style>...</style> в <head>, переопределяет правила, определенные в любом
внешнем CSS-файле.
Любое правило, определенное во внешнем файле таблицы стилей, имеет
наименьший приоритет в CSS, а правила, определенные в этом файле, будут
применяться только тогда, когда не применяются два предшествующих правила.
Но, и это не догма, существует директива !important
В качестве числовых значений многих свойств, определяющих какие-либо

размеры текста и межтекстовые расстояния принимаются любые единицы длины,
принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Можно
использовать и относительные единицы основанные на размере шрифта (em и ex).
Размеры в CSS можно указывать не только в
абсолютных единицах, таких как пиксели, поинты или
сантиметры, но и в относительных – в процентах, em
или rem. Использование относительных единиц
измерения также помогает придерживаться стандартов
доступности.
В большинстве браузеров по умолчанию

установлен размер шрифта 16px. Это значение можно
использовать при расчетах (например, 16px равны 1em,
1rem или 100%).
Давайте рассмотрим, какие же относительные
единицы измерения у нас есть.
% – измерение в процентах.
em – размер шрифта относительно обычного, т. е.,
если шрифт имеет размер 2.5em, значит, он в 2,5 раза
больше обычного шрифта.
rem – размер шрифта относительно корневого
элемента документа.
ch – ширина символа «0». В моноширинных
шрифтах, где все символы имеют одинаковую ширину,
1ch это ширина одного символа.
ex – x-высота текущего шрифта (шрифт заданный
для элемента или его ближайшего родителя)
измеряется в высоте символа «х» в нижнем регистре.
Синтаксис например: padding: 10px 20px; свойство, двоеточие, пробел, значение

и без пробела единица измерения, пробел, следующее значение, точка с запятой.
Подробнее о видах таблиц стилей, их подключении к html документу -
https://html5book.ru/osnovy-css/
Селекторы
Для того что-бы применить стиль к какому либо тэгу или группе тэгов надо к нему
обратиться, другими словами выбрать его/их. Делается это указанием селектора.
Заглавные и строчные буквы в именах классов не одно и тоже для браузера.
Селекторы бывают разных видов.
Селекторы по типу элемента
Этот базовый селектор выбирает тип элементов, к которым будет применяться

правило.
Синтаксис: элемент
Пример: селектор input выберет все элементы <input>.
input {
text-decoration:....
.
}
Селекторы по классу
Этот базовый селектор выбирает элементы, основываясь на значении их

атрибута class.
Синтаксис: .имяКласса
Пример: селектор .index выберет все элементы с соответствующим классом
(который был определен в атрибуте class="index").
.index {
color: #.......
.
}
Селекторы по идентификатору
Этот базовый селектор выбирает элементы, основываясь на значении их id

атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е.
использоваться только для одного элемента в HTML-документе.
Синтаксис: #имяИдентификатора
Пример:
<label for="name" id="name-text ">Ваше имя</label>
#name-text {
text-decoration: underline;
}
Селектор #name-text выберет элемент с идентификатором name-text
Селекторы по атрибуту
Если нам надо выбрать все тэги по наличию, какого-либо атрибута в любом тэге
или конкретном тэге - делается так:
[attr] { Описание правил стиля }
[type] {
color:blueviolet;
}
- предположим мы описуем форму ввода. В этом примере весь текст
вводимый (не placeholder) в полях ввода input и надписи на кнопках button
будут голубо-фиолетовыми, атрибут type в тэге присутствует, а его значение
нам не важно. Но вот в случае если type=”file” фиолетовой становится только
надпись “файл не выбран”, надпись на кнопке остается черной, надо
разобраться
Селектор[attr] { Описание правил стиля }
p[title] {
color: blue;
}
- будут выбраны все тэги абзаца имеющие атрибут title в не зависимости от
его значения. Селектором в данном случае является просто имя тэга.
Если мы хотим выбирать элементы по конкретному значению атрибута, есть

некоторые конструкции:
● [attr] - обозначает элемент с атрибутом по имени attr.

● [attr=value] - обозначает элемент с именем атрибута attr и значением в
точности совпадающим с value.
● [attr~=value] - обозначает элемент с именем атрибута attr значением
которого является набор слов разделенных пробелами, одно из которых в
точности равно value
● [attr|=value] - обозначает элемент с именем атрибута attr. Его значение при
этом может быть или в точности равно "value" или может начинаться с "value"
со сразу же следующим "-" (U+002D). Это может быть использовано когда
язык описывается с подкодом. Разобраться
● [attr^=value] - обозначает элемент с именем атрибута attr значение которого
начинается с "value" (отличие от “|”в том, что значение атрибута должно
именно начинаться, а не быть в точности равным “value”)
● [attr$=value] - обозначает элемент с именем атрибута attr чье значение
заканчивается на "value" Но не равно ему.
● [attr*=value] - обозначает элемент с именем атрибута attr чье значение
содержит по крайней мере одно вхождение строки "value" как подстроки. Но
не совпадает целиком с “value”
a[href$=".jpg"] выберет все ссылки, у которых адрес заканчивается на ".jpg".

a[href^="https"] выберет все ссылки, у которых адрес начинается на "https".
еще:
/* Все span с атрибутом "lang" будут жирными */
span[lang] {font-weight:bold;}
/* Все span в Португалии будут зелеными */

span[lang="pt"] {color:green;}
/* Все span с американским английским будут синими */

span[lang~="en-us"] {color: blue;}
/* Любые span на китайском языке будут красными, как на упрощенном китайском

(zh-CN) так и на традиционном (zh-TW) */
span[lang|="zh"] {color: red;}
/* Все внутренние ссылки будут иметь золотой фон */
a[href^="#"] {background-color:gold}
/* Все ссылки с url заканчивающимся на .com будут красными */

a[href$=".com"] {color: red;}
/* Все ссылки содержащие "example" в url будут иметь серый фон */

a[href*="example"] {background-color: #CCC;}
https://developer.mozilla.org/ru/docs/Web/CSS/Attribute_selectors
мой пример:
[class*="articl"]{
color: red;
}
весь текст в тэгах у которых есть атрибут class он равен, в моем случае, - article,
article-title, article-date, article-text перекрашен в красный цвет.
Комбинаторы
“,”
Если необходимо применить одинаковый стиль сразу к нескольким различным
элементам веб-страницы, можно указать необходимые селекторы через запятую,
создав тем самым группу селекторов:
/* Одинаковый стиль у трёх элементов */
h1 { color: #f1cd33; }
span { color: #f1cd33; }
p { color: #f1cd33; }
/* Тоже самое, только селекторы перечислены через запятую */
h1, span, p { color: #f1cd33; }
Примечание: если хотя бы один из селекторов будет написан некорректно или

перед блоком объявлений будет стоять лишняя запятая, то вся группа селекторов
будет считаться недействительной и стиль не будет применен ни к одному
элементу веб-страницы:
h1, h2..foo, h3 { font-family: sans-serif; }
h1, h2, h3, { font-family: sans-serif; }
В этих двух случаях вся группа селекторов, разделенных запятыми, будет
считаться ошибочной и правила стиля не будут применены к указанным элементам.
““
Комбинатор потомков используется для выбора одного или более элементов-
потомков, независимо от их уровня вложенности, внутри элемента-предка.
Комбинатор потомков обозначается символом пробела, который ставится между

двумя селекторами, указывая взаимосвязь между ними. Селектор 1 стоящий слева
от комбинатора определяется как элемент-предок, селектор 2 стоящий справа от
комбинатора определяется как элемент-потомок.
Рассмотрим, как это работает на небольшом примере:

Таким образом мы указали, что стиль будет применен ко всем элементам <span>,
которые являются потомками элементов <div>. Комбинатор потомков | CSS
селектор
“>”
Комбинатор дочерних элементов обозначается знаком "больше чем" (>) и
используется внутри селектора, между двумя простыми селекторами указывая
взаимосвязь между ними. Задача данного селектора - выбор указанных дочерних
элементов внутри родительского элемента, чтобы стало понятнее рассмотрим это
на небольшом примере.
Комбинатор дочерних элементов
div > p { background-color: yellow; }

селектор 1 селектор 2
Селектор состоит из трёх частей: первым указывается простой селектор 1

представляющий родительский элемент, после него указывается комбинатор
дочерних элементов (>) и затем простой селектор 2, определяющий дочерний
элемент. Комбинатор определяет взаимосвязь между двумя селекторами,
показывая, что ко всем элементам <p>, которые являются дочерними по отношению
к элементу <div> будет применен указанный стиль. Именно дочерним, первым
потомкам.
Примечание: между простым селектором и комбинатором дочерних элементов

допускается ставить пробел, он никак не повлияет на работу селектора:
div>p
div> p
div >p
div > p
Комбинатор дочерних элементов | CSS селектор
“+”
Комбинатор соседних сестринских элементов используется для выбора
определенного элемента, который размещается в коде непосредственно после
другого элемента.
Комбинатор соседних сестринских элементов обозначается символом + (плюс),
который ставится между двумя селекторами, указывая взаимосвязь между ними. Из
двух соседних сестринских элементов, определяемых селекторами
расположенными по обеим сторонам от комбинатора, комбинатор применяет стиль
к тому элементу, который определяется селектором стоящим справа от
комбинатора.
Рассмотрим, как это работает на небольшом примере:
div + p { color: blue; }
Таким образом мы указали, что стиль будет применен ко всем элементам <p>,
которые расположены в коде непосредственно после элементов <div>.
Между комбинатором соседних сестринских элементов и селекторами допускается
ставить пробел, он никак не повлияет на работу комбинатора:
div+p
div+ p
div +p
div + p
Комбинатор элемент+элемент | CSS селектор
“~”
Комбинатор элемент1~элемент2 используется для выбора элемента2 следующего
за элементом1, так же заданный стиль будет применен ко всем последующим
элементам2, которые расположены далее.
Оба элемента должны иметь одного родителя.
p~ul { background-color: red; }
Все списки после абзаца будут выведены на красном фоне.
Комбинатор элемент1~элемент2 | CSS селектор
Следующий тип селекторов это псевдоклассы.
Переменные css
Изучите CSS-переменные за 5 минут | by Alexey Pyltsyn | devSchacht
Чтобы объявить переменную, вам сначала нужно решить, в какой области должна
быть переменная. Если вы хотите, чтобы она была доступна глобально, просто
определите её в псевдоклассе :root, который соответствует корневому элементу в
дереве документов (обычно это тег <html>).
Поскольку переменные наследуются, следующий ниже код делает вашу
переменную доступной во всём вашем приложении, так как все ваши DOM-
элементы являются потомками тега <html>.
:root {
--main-color: #ff6f69;
}
Как вы можете видеть, вы объявляете переменную точно так же, как вы бы
установили любое свойство CSS. Однако переменная должна начинаться с двух
дефисов (--).
Для получения доступа к переменной, вам нужно использовать функцию var() и
передать имя переменной в качестве первого параметра.
#title {
color: var(--main-color);
}
И это назначит вашему заголовку цвет #ff6f69
Функция var поддерживает второй параметр, фолбэк, то есть значение (или также
CSS-переменная), которое будет использоваться, если переменная, переданная
первым параметром, не определена, например:
#title {
color: var(--main-color, black);
}
Если переменная main-color недоступна, то будет использоваться черный цвет
(black).
Вы также можете создавать переменные с локальной областью видимости,
который будут доступны только для того элемента, в котором они были объявлены,
включая его дочерние элементы.
Единицы измерения css
em - относительная единица размера. Равна ближайшему к элементу font-size.

1em это текущий размер шрифта в элементе/блоке страницы. Соответственно мы
понимаем, размер шрифта каждого элемента либо задается либо в его стиле в css
файле, либо, редко, в его html коде, либо наследуется от родителя. Часто
используется в виде дроби 0.1em , 11.25em.
Поначалу может возникнуть путаница - ведь 1em может принимать различные
значения в разных участках кода. Но это дело небольшой практики )))
Через em-ы мы можем задавать все те размеры которые мы задаем через px.
Это удобно в случае если, например, есть несколько кнопок разных размеров.
Соответственно у них надписи могут быть разный размеров. Мы определяем font-
size и в случаее его изменения мы не пересчитываем, например padding, box-
shadow, border-radius, каждый раз, чтобы кнопка красиво смотрелась, а
прописываем его через em. Изменили font-size - соответсвенно и кнопка гармонично
изменилась.
rem — это корневой em (Root Em).

Это единица равная корневому (базовому) значению font-size. Это значит, что
1rem всегда будет равен значению font-size, которое было определено для <html>.
Не повторяйте мою ошибку по неопытности - html {...} а
не .html {...}
Работаем с ним также как и с em. Но по моему мнению, удобнее использовать и то
и другое. В разных проектах, разных ситуациях, элементах….
Пример:
<!DOCTYPE html> html {

<html> font-size: 15px;
<head> }
<meta charset="UTF-8"> body {
<link rel="stylesheet" href="css/style.css"> margin:0;
<title>Единицы измерения css</title>
font-family: Arial, sans-serif;
font-size: 1rem;
</head>
color: #21212;
<body>
<div class="container"> }
<h1 class="title">Заголовок</h1> .container {
<a class="btn" href="#">кнопка</a> width: 400px;
<a class="btn btn-xl" href="#">кнопка</a> padding: 1rem;
</div> margin: 20px auto;
</body> background-color: #eee;
</html>
}
.title {
margin: 0 0 1rem;
font-size: 30px;
color: #121212;
}
.btn {
display: inline-block;
padding: 0.4em 0.8em;
background-color: #36b717;
font-size: 1rem;
color: #fff;
text-decoration: none;
border-radius: 0.4em;
box-shadow: 0 0 0.4em #afafaf;
}
.btn-xl {
font-size: 2rem;
}
Краткий список основных размеров шрифтов в rem единицах, при условии, что по
умолчанию стоит 16px:
10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem
rem в CSS. Общие сведения и способы применения
Свойства текста
font-family: имя или семейство шрифта

font-family: имя шрифта [, имя шрифта[, ...]] | inherit
Шрифты можно посмотреть тут CSS: шрифты
Список шрифтов может включать одно или несколько названий, разделенных
запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно
должно заключаться в одинарные или двойные кавычки.
Универсальные семейства шрифтов:
● serif — шрифты с засечками (антиквенные), типа Times;
● sans-serif — рубленные шрифты (шрифты без засечек или гротески),
типичный представитель — Arial;
● cursive — курсивные шрифты;
● fantasy — декоративные шрифты;
● monospace — моноширинные шрифты, ширина каждого символа в таком
семействе одинакова (шрифт Courier).
● inherit Наследует значение родителя.
Шрифты можно подключать отсюда - https://fonts.google.com/
Полученную ссылку вставляем в <head>.
Для шрифта в полях форм это свойство нужно указывать отдельно, при указании
стиля формы, так как у броузеров “свое” мнение, как должен выглядеть текст в
формах.
font-style: начертание шрифта

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

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900
с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет
значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое
установлено по умолчанию) эквивалентно 400, стандартный полужирный текст —
значению 700.
Насыщенность шрифта задаётся с помощью ключевых слов: bold — полужирное
начертание, normal — нормальное начертание. Также допустимо использовать
условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность
относительно насыщенности родителя, соответственно, в большую и меньшую
сторону.
У меня шрифт arial начинал “толстеть”
только при значениях больше 550. bold и
bolder разницы не имели. Это касается arial.
В общем шрифт должен поддерживать
промежуточные значения плотности.
Большинство шрифтов поддерживает
значения 400 и 700.
line-height: межстрочный интервал

line-height: множитель | значение | проценты | normal | inherit
Любое число больше нуля воспринимается как множитель от размера шрифта
текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный
интервал. В качестве значений принимаются также любые единицы длины,
принятые в CSS — пикселы (px), дюймы (in), пункты (pt) и др.
Например при font-size: 16px и line-height 1.5 межстрочное расстояние будет
равно 24px
Разрешается использовать процентную запись, в этом случае за 100% берется
высота шрифта.
● normal - Расстояние между строк вычисляется автоматически.
Интересное исследование: https://css-live.ru/css/metriki-shrifta-line-height-

vertical-align.html
http://inoo.omsu.ru/content/kak-izmenit-interlinyazh-v-html-tekste.html
font: одновременное определение нескольких характеристик шрифта и

текста.
font: [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit
Обязательны параметры font-size и font-family.

font-style и font-weight - порядок значений не важен, поэтому bold и italic (normal |
oblique ) можно поменять местами.
font-variant - Определяет, как нужно представлять строчные буквы — оставить их
без модификаций или делать их все прописными уменьшенного
размера. Такой способ изменения символов называется капителью.
Существует и в виде “самостоятельного” свойства.
font-variant: normal | small-caps | inherit
normal - оставляет регистр символов исходным, заданным по
умолчанию.
small-caps - модифицирует все строчные символы как заглавные
уменьшенного размера.
inherit - наследует значение родителя
/line-height - из типографики пошла запись указывать через слэш размер шрифта
и межстрочное расстояние (интерлиньяж, он же line-height).
Осторожно! Если вы ранее определили одно из свойств шрифта и используете
впоследствии свойство font, то оно перепишет заданные ранее значения.
body { font-size: 16px; line-height: 1.5; }

.form { font: 14px Georgia, serif; }
В этом свойстве font, line-height не было определено, поэтому потеряет значение

своего предка 1.5 и вернётся к своему значению по умолчанию (обычно 1.2).
https://html5book.ru/css-shrifty/
http://htmlbook.ru/css/font
color: цвет символов

color: цвет | inherit
Чаще всего цвет может быть стандартным, и задается словом или же задан в 16-
ти ричной системе -
color: #XXXXXX
При вводе значения цвета в brackets, в поле ввода
числового или словарного значения цвета, нажмите
CTRL-E и будет сюрприз.
Но есть и более экзотические варианты, явное указание цветовой модели и ее
значения в цифрах или процентах -https://html5book.ru/css-colors/
text-align: выравнивание текста

text-align: center | justify | left | right | start | end
● center - выравнивание текста по центру. Текст помещается по центру
горизонтали окна браузера или контейнера, где расположен текстовый блок.
Строки текста словно нанизываются на невидимую ось, которая проходит по
центру веб-страницы. Подобный способ выравнивания активно используется
в заголовках и различных подписях, вроде подрисуночных, он придает
официальный и солидный вид оформлению текста. Во всех других случаях
выравнивание по центру применяется редко по той причине, что читать
большой объем такого текста неудобно.
● justify - выравнивание по ширине, что означает одновременное
выравнивание по левому и правому краю. Чтобы произвести это действие
браузер в этом случае добавляет пробелы между словами.
● left - выравнивание текста по левому краю. В этом случае строки текста
выравнивается по левому краю, а правый край располагается «лесенкой».
Такой способ выравнивания является наиболее популярным на сайтах,
поскольку позволяет пользователю легко отыскивать взглядом новую строку
и комфортно читать большой текст.
● right - выравнивание текста по правому краю. Этот способ выравнивания
выступает в роли антагониста предыдущему типу. А именно, строки текста
равняются по правому краю, а левый остается «рваным». Из-за того, что левый
край не выровнен, а именно с него начинается чтение новых строк, такой текст
читать труднее, чем, если бы он был выровнен по левому краю. Поэтому
выравнивание по правому краю применяется обычно для коротких заголовков
объемом не более трех строк. Мы не рассматриваем специфичные сайты, где
текст приходится читать справа налево, там возможно подобный способ
выравнивания и пригодится.
● auto - не изменяет положение элемента.
● inherit - наследует значение родителя.
● start - аналогично значению left, если текст идёт слева направо и right, когда
текст идёт справа налево.
● end аналогично значению right, если текст идёт слева направо и left, когда
текст идёт справа налево.
text-indent: отступ первой строки

text-indent: <значение> | <проценты> | inherit
Устанавливает величину отступа первой строки блока текста (например, для
абзаца <p>). Воздействия на все остальные строки не оказывается. Допускается
отрицательное значение для создания выступа первой строки, но следует
проверить, чтобы текст не выходил за пределы окна браузера.
В качестве значений принимаются любые единицы длины, принятые в CSS —
например, пикселы (px), дюймы (in), пункты (pt) и др. При задании значения в
процентах, отступ первой строки вычисляется в зависимости от ширины блока.
Допустимо использовать отрицательные значения, но при этом в разных браузерах
возможно появление ошибок.
Тут хочу уточнить. Предположим, мы в html файле определили тэг
параграфа с классом paragraf1, то есть
<p class =”paragraf1”>
а в css сделали запись его стиля
.paragraf1 {text-indent: 20px;}
Затем, при использовании тэга параграфа “в одиночку”, то есть
<p>...</p> - отступа не будет. Более того, если в css файле мы
переопределим стиль всех тэгов <p> с наследованием этого
свойства, то-есть
p {text-indent: inherit}
и эта запись будет после определения стиля .paragraf - ничего не
получится. p от .paragraf отступ не унаследуется. Наоборот также
верно. (надо разобраться как именно работает inherit )
НО, если мы в css файле определим, размер отступа, неважно до

или после .paragraf1 {text-indent: 20px} для всех тэгов параграфа без
класса - то-есть p {text-indent: 20px} , и в стиле .paragraf1 вообще не
будем упоминать text-indent: - то отступ в 20 пикселей повлияет на
его (.paragraf1) стиль. То же касается и других свойств. То есть
“частный” случай тэга <p class =”paragraf1”> унаследует от <p>
отступ.
Но вот наоборот, определение отступа в стиле <p class
=”paragraf1”> на <p> влияния не окажет.
Патаму чта <p> - родитель. (хи хи, первые эксперименты с
наследованием оставлю на память)
text-decoration:подчеркивание, перечеркивание и пр.
text-decoration: [ blink || line-through || overline || underline ] | none | inherit
● blink - устанавливает мигающий текст. Такой текст периодически, примерно
раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в
настоящее время не поддерживается браузерами и осуждается в CSS3, взамен
рекомендуется использовать анимацию.
● line-through - создает перечеркнутый текст .
● overline - линия проходит над текстом
● underline - устанавливает подчеркнутый текст .
● none - отменяет все эффекты, в том числе и подчеркивания у ссылок,
которое задано по умолчанию.
● inherit - значение наследуется у родителя.
Но, допустимы и другие конструкции - (возможность появилась в новых

броузерах, примерно с конца 19-го года)
text-decoration теперь является сокращенной формой записи трех свойств -
text-decoration-style - solid | double | dotted | dashed | wavy - да, появилась
волна, остальные значения как у border-а
text-decoration-color
text-decoration-line - line-through || overline || underline
И как следствие этого можно писать -

text-decoration: dotted underline red;
text-decoration: dotted underline overline red;
text-transform: регистр символа

text-transform: capitalize | lowercase | uppercase | none | inherit
● capitalize - первый символ каждого слова в предложении будет заглавным.
Остальные символы свой вид не меняют.
● lowercase - все символы текста становятся строчными (нижний регистр).
● uppercase - все символы текста становятся прописными (верхний регистр).
● none - не меняет регистр символов.
letter-spacing: интервал между символами

letter-spacing: значение | normal | inherit
Определяет интервал между символами в пределах элемента. Браузеры
обычно устанавливают расстояние между символами, исходя из типа и вида
шрифта, его размеров и настроек операционной системы. Чтобы изменить это
значение и применяется данное свойство. Допустимо использовать отрицательное
значение, но в этом случае надо убедиться, что сохраняется читабельность текста.
например, пикселы (px), дюймы (in), пункты (pt) и др. Можно использовать и
относительные единицы основанные на размере шрифта (em и ex).
Размеры в CSS можно указывать не только в
абсолютных единицах, таких как пиксели, поинты или
сантиметры, но и в относительных – в процентах, em
или rem. Использование относительных единиц
измерения также помогает придерживаться стандартов
доступности.
В большинстве браузеров по умолчанию

установлен размер шрифта 16px. Это значение можно
использовать при расчетах (например, 16px равны 1em,
1rem или 100%).
Давайте рассмотрим, какие же относительные
единицы измерения у нас есть.
% – измерение в процентах.
em – размер шрифта относительно обычного, т. е.,
если шрифт имеет размер 2.5em, значит, он в 2,5 раза
больше обычного шрифта.
rem – размер шрифта относительно корневого
элемента документа.
ch – ширина символа «0». В моноширинных
шрифтах, где все символы имеют одинаковую ширину,
1ch это ширина одного символа.
ex – x-высота текущего шрифта, измеряется в
высоте символа «х» в нижнем регистре.
Свойства списков
list-style-type: тип маркера

Изменяет вид маркера для каждого элемента списка. Это свойство используется
только в случае, когда значение list-style-image установлено как none. Маркеры
различаются для маркированного списка (тег <ul>) и нумерованного (тег <ol>).
list-style-type: circle | disc | square | armenian | decimal | decimal-leading-zero |
georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin
| upper-roman | none | inherit
Значения зависят от того, к какому типу списка они применяются:

маркированному или нумерованному.
Маркированный список
● circle - Маркер в виде кружка.
● disc - Маркер в виде точки.
● square -Маркер в виде квадрата.
Нумерованный список
● armenian - Традиционная армянская нумерация.
● decimal - Арабские числа (1, 2, 3, 4,...).
● decimal-leading-zero - Арабские числа с нулем впереди для цифр меньше
десяти (01, 02, 03,...).
● georgian - Традиционная грузинская нумерация.
● lower-alpha - Строчные латинские буквы (a, b, c, d,...).
● lower-greek - Строчные греческие буквы (α, β, γ, δ,...).
● lower-latin - Это значение аналогично lower-alpha.
● lower-roman - Римские числа в нижнем регистре (i, ii, iii, iv, v,...).
● upper-alpha - Заглавные латинские буквы (A, B, C, D,...).
● upper-latin - Это значение аналогично upper-alpha.
● upper-roman - Римские числа в верхнем регистре (I, II, III, IV, V,...).
● none - Отменяет маркеры для списка.
list-style-type: позиция маркера относительно списка

list-style-position: inside | outside
Лучше иллюстрации мне не объяснить:
Значение outside Значение inside
Естественно к тексту в списках применимы ранее расписанные свойства текста.
Свойства применяемые к таблицам

border-collapse: отображение границ ячеек внутри таблицы
border-collapse: collapse | separate | inherit
Применяется к тегу <table> или к элементам, у которых значение display установлено как
table или inline-table
● collapse - линия между ячейками отображается только одна, также
игнорируется значение атрибута cellspacing.
● separate - вокруг каждой ячейки отображается своя собственная рамка, в
местах соприкосновения ячеек показываются сразу две линии.
Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство
играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек
получится линия двойной толщины (рис. а). Значение collapse заставляет браузер
анализировать подобные места в таблице и убирать в ней двойные линии (рис. б).
При этом между ячейками остается только одна граница, одновременно
принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ,
когда вокруг самой таблицы добавляется рамка.
а б
table-layout: регулировка ширины ячеек таблицы

table-layout: auto | fixed | inherit
Применяется к тегу <table> или к элементам, у которых значение display установлено как
table или inline-table
● auto - Браузер загружает всю таблицу, анализирует ее для определения
размеров ячеек и только после этого отображает.
● fixed - Ширина колонок в этом случае определяется либо с помощью тега
<col>, либо вычисляется на основе первой строки. Если данные о форматировании
первой строки таблицы по каким-либо причинам получить невозможно, в этом
случае таблица делится на колонки равной ширины. При использовании этого
значения, содержимое, которое не помещается в ячейку указанной ширины, будет
«обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера,
но в любом случае ширина ячейки меняться не будет. Для корректной работы этого
значения обязательно должна быть задана ширина таблицы.
Универсальные свойства
border: внешняя граница блока

border: [border-width || border-style || border-color] | inherit
● border-width - определяет толщину границы.
● border-style -
● border-color - устанавливает цвет границы, значение может быть в любом
допустимом для CSS формате.
groove, ridge - рифленая 3D граница. Лучше рассмотреть на увеличенном
рисунке. Эффект зависит от значения border-color
border на самом деле сокращенный вариант записи, он объединяет в себе
следующие:
border: 1px solid #ccc;
Можем записать раздельно -
border-width: 1px;
border-style: solid;
border-color: #ccc;
Допустимо указание значений свойства для каждой стороны отдельно:
border-top: 1px solid #000;
border-right: 2px solid #red;
border-bottom: 3px solid #aqua;
border-left: 4px solid #brown;
Учитывая основополагающий факт, что css свойства, как и текст html, браузером
обрабатываются по строкам, сверху вниз, для задания, например, границы с трех
сторон кроме верхней записываем:
border: 1px solid #000;
border-top: none;
Вторая строка просто отменит “часть” первой.
Можем раскрасить каждую сторону border-a в свой цвет:

border-width: 1px;
border-style: solid;
border-left-color: red;
border-right-color:green;
border-top-color: greenyellow;
border-bottom-color: brown;
Обращаю внимание - без указания border-style ничего не рисуется.
Или можем записать так - {border-color: #cacd58 #5faf8a #b9cea5
#aab238;}
Можем задавать толщину рамки и так:

border: solid #000;
border-left-width: 1px;
border-right-width: 2px;
border-top-width: 3px;
border-bottom-width: 4px;
Толщину можно задавать и в виде одной из переменных - thin (2 пиксела),

medium (4 пиксела) и thick (6 пикселов) задают толщину границы. Но это следует
делать осторожно, мы ведь зависим от настроек броузера в этом случае.
Не забываем указывать единицу измерения.
Таким же образом мы и style можем задавать для каждой стороны как отдельно
так и вместе:
border-style: solid dotted none dotted; Как и в padding-e и margine-e при указании 4
параметров мы указываем верх (12 часов), право (3 часа), низ (6 часов) и лево (9
часов).
В общем вариантов масса.
Еще о border - https://habr.com/ru/post/141658/
border-radius: устанавливает радиус скругления уголков рамки. Если рамка

не задана, то скругление также происходит и с фоном
border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Разрешается использовать одно, два, три или четыре значения, перечисляя их
через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В
качестве значений указываются числа в любом допустимом для CSS формате. В
случае применения процентов, отсчет ведется относительно ширины блока.
Принцип задания 1-го,2-ух,3-ех,4-ех значений похож на принцип определения их
же в padding и margin, только мы выбираем углы а не стороны:
В случае задания двух параметров через слэш, первый задает радиус по

горизонтали, а второй по вертикали (эллиптические уголки). На рисунке показана
разница между обычным скругленным уголком и эллиптическим уголком.
Пример:
<style>
.radius {
background: #f0f0f0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 15px; /* Поля вокруг текста */
margin-bottom: 10px; /* Отступ снизу */
}
</style>
</head>
<body>
<div style="border-radius: 50px 0 0 50px;"
class="radius">
border-radius: 50px 0 0 50px;
</div>
<div style="border-radius: 40px 10px" class="radius">
border-radius: 40px 10px;
</div>
<div style="border-radius: 10em/1em;" class="radius">
border-radius: 13em/3em;
</div>
<div style="border-radius: 13em 0.5em/1em 0.5em;"
class="radius">
border-radius: 13em 0.5em/1em 0.5em;
</div>
<div style="border-radius: 8px;" class="radius">
border-radius: 8px;
</div>
</body>
http://htmlbook.ru/css/border-radius
Эффект данного свойства будет заметен только при условии, что у стилизуемого элемента
имеется цветной фон и/или граница. https://idg.net.ua/blog/uchebnik-css/ispolzovanie-css/border-
radius
Интересное исследование на эту тему: https://habr.com/ru/post/107093/
box-shadow: тень под блочным элементов
1. если используется ключевое слово inset, тень будет направлена внутрь

элемента;
2. сдвиг тени по горизонтали (5px — вправо, -5px — влево);
3. сдвиг по вертикали (5px — вниз, -5px — вверх);
4. радиус размытия тени (0 — резкая тень), начинает “расти в обе стороны” от
внешней границы тени определенной параметром 5.
5. растяжение тени (5px — растяжение, -5px — сжатие), результат
отрицательного значения можно увидеть если 2-м и/или 3-м параметром
сдвинуть тень из-под объекта. Отрицательное значение заставляет тень
расти к центру себя самой, но в отличии от использования inset она растет
“под” объектом. Можно получить эффект от “гнутой”картинки.
6. цвет тени.
В качестве значений можно вписать и rem/em. Если значение не ноль, не
забываем вписывать единицы измерения, отсутствие любой из них приведет к
отсутствию тени.
box-shadow: 0px 0px 10px 40px aqua, 0px 0px 30px 60px green;
background: url(../img/box-with-dot.jpg) 50% 50% no-repeat;
Допускается указывать несколько теней, разделяя их параметры

между собой запятой. Учитывается следующий порядок: первая тень в
списке размещается на самом верху, последняя в списке — в самом
низу.
Гнутая картинка
box-shadow: -18px 0 20px -16px #333, 18px 0 20px -16px #333;

background: url(../img/folded_postcard.PNG) 50% 50% no-repeat;
Первая тень отображается слева от рисунка с радиусом размытия

20px, её размер уменьшен за счёт четвёртого параметра (-16px).
Параметры второй тени указываются после запятой, тень
отображается справа от рисунка и также уменьшена для симметрии.
Для получения полупрозрачной тени подойдёт формат RGBA.

Тень можно добавлять и к псевдоэлементам -http://htmlbook.ru/css3-na-primerakh/teni
outline: другой вариант оформления внешней границы блока
outline: outline-color || outline-style || outline-width | inherit
● outline-color - задает цвет линии в любом допустимом для CSS формате.

● outline-style - стиль линии. Те же, что и у border
● outline-width - толщина границы. Можно задавать переменными, thin (2
пиксела), medium (4 пиксела) и thick (6 пикселов). См. border
Записывается либо краткой записью, outline: 1px solid red; либо по параметрам -
outline-width; outline-style; outline-color;
Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину
внешней границы на всех четырех сторонах элемента. В отличие от линии,
задаваемой через border, свойство outline не влияет на положение блока и его
ширину. Расширение толщины этой рамки не “расталкивает “ соседние элементы. Я
расцениваю это свойство как некое “свечение” по границе элемента.
Как и border, outline “начинается” со следующего пикселя после padding-а.
Также нельзя задать параметры линии на отдельных сторонах элемента, outline
применяется сразу ко всем четырём сторонам.
outline-offset: отступ от элемента

outline-offset: <размер> | inherit
Устанавливает расстояние между рамкой, созданной с помощью свойства outline,

и краем или границей элемента добавленной через border.
● размер - задаёт расстояние от края элемента до рамки. Отрицательное

значение отображает рамку внутри элемента, положительное — вокруг
элемента.
width: универсальное свойство, применяется также к таблице

width: значение | проценты | auto | inherit
Устанавливает ширину блочных или заменяемых элементов (к ним, например,
относится тег <img>). Ширина не включает толщину границ вокруг элемента,
значение отступов и полей.
Браузеры неодинаково работают с шириной, результат отображения зависит от
используемого <!DOCTYPE>. http://htmlbook.ru/css/width
например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной
записи ширина элемента вычисляется в зависимости от ширины родительского
элемента. Если родитель явно не указан, то в его качестве выступает окно
браузера.
● auto - устанавливает ширину исходя из типа и содержимого элемента.

padding: внутренний отступ в ячейках таблицы,
универсальное свойство.
padding: [значение | проценты] {1, 4} | inherit
padding - набивка, подкладка, дополнение.

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

четыре значения, разделяя их между собой пробелом. Эффект зависит от
количества значений:
Число значений Результат
1 Поля будут установлены одновременно от каждого края элемента.
2 Первое значение устанавливает поля от верхнего и нижнего края,

второе — от левого и правого.
3 Первое значение задает поле от верхнего края, второе —

одновременно от левого и правого края, а третье — от нижнего
края.
4 Поочередно устанавливается поля от верхнего, правого, нижнего и

левого края.
Величину полей можно указывать в пикселах (px), процентах (%)
или других допустимых для CSS единицах. Значение inherit
указывает, что оно наследуется у родителя. При указании поля в
процентах, значение считается от ширины родителя элемента.
При использовании 4-х значений это свойство представляет из себя краткую форму
записи сразу 4-х свойств - padding-bottom, padding-left, padding-right, padding-top.
margin: универсальное свойство, устанавливает величину отступа от
каждого края элемента.
margin: [значение | проценты | auto] {1,4} | inherit

margin - поле, край.
Устанавливает величину отступа от каждого края элемента до соседнего
элемента. Отступом является пространство от границы текущего элемента до
внутренней границы его родительского элемента.
Если у элемента нет родителя, отступом будет расстояние от края элемента до
края окна браузера с учетом того, что у самого окна по умолчанию тоже
установлены отступы. Чтобы от них избавиться, следует устанавливать значение
margin для селектора <body> равное нулю.
Под margin нет своего фона и он принимает фон родительского элемента.
Свойство margin позволяет задать величину отступа сразу для всех сторон
элемента или определить ее только для указанных сторон, как и в padding. (Что-бы
легче запомнить за что отвечает каждая цифра, если указывать 4 значения - первая
цифра - полдень, 12 часов, вторая - 3 часа, третья - 6 часов, четвертая - 9 часов).
auto - Указывает, что размер отступов будет автоматически рассчитан
браузером.
Например - margin: 10px auto; блочный элемент будет иметь отступы по 10
пикселей от соседних элементов и выровнен по ширине страницы.
Выравнивание блока по центру через значение auto работает только в сочетании
с width.
Остальные атрибуты имеют то же смысл что и в свойстве padding
Значение margin-а может быть отрицательным. Отрицательные margin-
right/bottom заставляют другие элементы думать, что блок меньше по размеру
справа-внизу, чем он на самом деле. отрицательный margin сокращает расстояние
между элементами, вплоть до того, что эти элементы будут перекрывать друг друга.
Можно записывать в виде: margin-bottom, margin--left, margin--right, margin-top.
Далее я подобрал картинки которые помогут понять разницу между padding и
margin
margin-ы могут схлопнуться, это означает не их уничтожение а замену двух
соседних на один, больший из двух.
Подробнее - Схлопывание внешних отступов - CSS | MDN
box-sizing: алгоритм расчета размера блока
● content-box - это значение по умолчанию. В этом случае свойства width/height

обозначают то, что находится внутри padding.
● border-box - значения width/height задают высоту/ширину всего элемента.
В верхнем случае браузер нарисовал весь элемент размером в width x height, в

нижнем – интерпретировал width/height как размеры внутренней области.
Исторически сложилось так, что по умолчанию принят content-box, а border-box

некоторые браузеры используют если не указан DOCTYPE, в режиме
совместимости.
https://learn.javascript.ru/box-sizing
display: универсальное свойство, которое определяет, как элемент должен

быть показан в документе.
● flex - элемент растягивается на всю ширину и имеет свое полное

пространство среди окружающих блоков. Происходит перенос строк в начале
и в конце блока. (display: flex;)
Одно из применений - <ul> при применении этого стиля становится из
“вертикального” “горизонтальным”
● block - Элемент показывается как блочный. Применение этого значения для
встроенных элементов, например тега <span>, заставляет его вести подобно
блокам — происходит перенос строк в начале и в конце содержимого,
отрабатываются верхние и нижние margin и padding.
Если явно не указана, высота блочного элемента вычисляется браузером
автоматически, исходя из содержимого блока.
● inline-block - элемент становится строчно-блочным, у него отрабатываются
margin и padding, width и height но следующий за ним текст идет в том же
потоке, то есть не начинается с новой строки. (Несколько элементов идущих
подряд располагаются на одной строке и переносятся на другую строку при
необходимости.) Еще одна формулировка - его внутренняя часть элемента
форматируется как блочный элемент, а сам элемент — как встроенный.
Если явно не указано, высота и ширина элемента вычисляется браузером
автоматически, исходя из содержимого блока.
Ширина блока получается сложением значений width, margin, border и
padding.
Высота блока получается сложением значений height, margin, border и
padding.
Элементы можно выравнивать по вертикали с помощью свойства vertical-
align.
Перенос текста считается за пробел.
position: способ позиционирования элемента относительно окна браузера

или других объектов на веб-странице.
position: absolute | fixed | relative | static | inherit
Тут мне нужно уточнить несколько моментов:
Позиционированный элемент - элемент у которого свойство position - не static.
По умолчанию все элементы имеют значение static.
Потоком документа в HTML называется порядок вывода элементов на страницу.
В обычном виде все блоки выводятся в том порядке, в котором они записаны внутри
HTML-документа. Этот порядок можно менять, в частности изменением значения
position. Другое определение - нормальный HTML поток — это порядок следования
HTML элементов, который не изменён CSS.
Когда я пишу - элемент “висит” над страницей, имеется в виду визуальная часть,
заслоняет ли он какой либо другой блок или нет. И это не означает что его нет в
потоке вывода документа. Он может в нем быть, а может и нет. Подробнее - далее.
left, top, right и bottom - эти параметры указывают от какой границы (border-а для
absolute и fixed или padding-a для relative ) родительского элемента, или экрана,
ведется отсчет при позиционировании элемента, а не направление. Т.е. top 50px
сдвинет элемент вниз от top-а, а не вверх. И left 50px сдвинет элемент вправо от
левой границы экрана или родительского элемента. Отрицательные значения
выдвинут элемент с площади родителя наружу.
● absolute - элемент абсолютно позиционирован, при этом другие элементы

отображаются на веб-странице словно абсолютно позиционированного элемента и
нет. Элемент выходит из потока документа и визуально может выглядеть как
“висящий” под ним. Границы элемента, как и в случае relative, будут точкой отсчета
для дочерних элементов с атрибутом absolute.
При этом, если мы не используем left, top и остальные параметры сдвига,
элемент позиционируется на своем естественном месте внутри
позиционированного родителя, относительно своей верхней левой границы.
Так как он вышел из потока следующий блок его не учитывает и рисуется
сверху.
В случае отсутствия позиционированных родителей элемент отрисуется в
верхнем левом углу страницы.
При использовании свойств left, top, right и bottom, отсчет ведется от
соприкосновения границы (border-а) ближайшего позиционированного предка
(padding предка не учитывается) и margin-a элемента, в случае отсутствия
нужного предка, от границы страницы, ее padding также не учитывается.
Значение box-sizing у родителя этот принцип не меняет.
Что произойдет, если мы одновременно установим left и right?
Если ширина не задана, применение left: 0 и right: 0 растягивает элемент
на всю ширину. Это эквивалент установки left: 0 и width: 100%.
Если ширина установлена, то значение right отбрасывается.
То же самое top и bottom.
● fixed - по своему действию это значение близко к absolute, но в отличие от
него привязывается к указанной свойствами left, top, right и bottom точке на экране и
не меняет своего положения при прокрутке веб-страницы.
Элемент выходит из потока документа и без использования свойств
позиционирующих его визуально выглядит как “висящий” над ним.
Если мы не используем left, top и остальные параметры
позиционирования, элемент позиционируется на своем естественном месте
внутри родителя, относительно своей верхней левой границы.
Если мы используем какое то из свойств left, top, right и bottom элемент

позиционируется относительно границ экрана.
Позиция рассчитывается от точки/линии соприкосновения margin-a
элемента который мы позиционируем и границы экрана.
fixed элементы, для безопасности, уменьшения вероятности ошибки при
написании кода страницы, рекомендуется использовать сразу после
открытия body или перед его закрытием т.е этот элементу желательно быть
прямым потомком body
Браузер Firefox вообще не отображает полосы прокрутки, если положение
элемента задано фиксированным, и оно не помещается целиком в окно
браузера. В браузере Opera хотя и показываются полосы прокрутки, но они
никак не влияют на позицию элемента.
● relative - (relative - относительный)

1) Как было сказано ранее - элемент с position: absolute ищет себе
ближайшего родителя с position:relative или absolute и отсчет позиции
ведется от его границ. При таком использовании родительского элемента,
как системы координат для потомка, его самого чаще всего не
позиционируют. (чаще всего ??? - практика покажет ) и он отрисовывается
как если бы бы был static.
2) Положение такого элемента может изменяться относительно его
исходного, естественного места, которое он занимал бы имея position: static .
При этом элемент остается в потоке вывода.
Добавление свойств left, top, right и bottom изменяет позицию
элемента и сдвигает его в ту или иную сторону от первоначального,
естественного расположения в родителе, при это учитывается margin
позиционируемого элемента. Дочерние элементы absolute естественно
путешествуют с ним.
И элемент опять - таки может выглядит “висящим” над страницей. При
этом другие элементы он не сдвигает. Получается забавно, при
визуализации страницы, браузер резервирует под него естественное место,
согласно потоку документа, но значения сдвига его могут убрать куда угодно,
и естественное место останется пустым )))
В случае если у нас пересечется два элемента relative, “вверху” по
умолчанию, будет тот который записан
в тексте позже, действует правило
чтения документа - сверху-вниз.
Мы можем регулировать
взаимное наложение элементов с
помощью свойства z-index.
Вот неплохая иллюстрация:
position: relative - квадратик Two хоть и
сдвинут от своего естественного
положения в потоке документа, но
место под него было выделено, это и
значит - “остается в потоке вывода
документа”
position: absolute - квадратик Two вышел
из потока документа и места под него не
было в странице. По картинке видно,
что Two был спозиционирован и
“поднят” атрибутом z-index. Иначе бы он
“лежал” под Three.
● static - элемент позиционируется как обычно. Использование свойств left, top,

right, bottom и z-index не приводит к каким-либо результатам. Элемент считается не
позиционированным.
Значение параметров сдвига можно указывать и в процентах. Что особо удобно

для fixed варианта. Но следует учитывать, что отсчет при вертикальном
позиционировании будет идти от верха элемента, при горизонтальном от левой
стороны элемента, а не от его осевой вертикальной или горизонтальной линии.
Поэтому можно использовать отрицательные значения margin-top и margin-left на
половину высоты или ширины элемента. Отрицательное значение подтягивает
элемент на пол своего размера в противоположном направлении чем указано в
свойстве. Попробуйте -
<div class="square-fixed"> .square-fixed {

</div> margin: 10px;
width: var(--square-width);
height: var(--square-height);
background-color: red;
position: fixed;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
}
<div class="square-fixed">
</div>
.square-fixed {
width: 50px;
height: 50px;
background-color: red;
position: fixed;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
}
Вместо margin мы можем использовать transform
transform: translate(-25px, -25px);
Красный квадратик ровно посередине экрана.
z-index: управляет размещением элементов по z-оси

z-index: число | auto | inherit значение по умолчанию - auto.
Любые позиционированные элементы на веб-странице могут накладываться друг
на друга в определенном порядке, имитируя тем самым третье измерение,
перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше
других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это
свойство работает только для элементов, у которых значение position задано как
absolute, fixed или relative.
В качестве значения используются целые числа (положительные, отрицательные
и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми
элементами, у которых оно меньше. При равном значении z-index, на переднем
плане находится тот элемент, который в коде HTML описан ниже. Хотя
спецификация и разрешает использовать отрицательные значения z-index, но такие
элементы не отображаются в браузере Firefox до версии 2.0 включительно. (ой горе
то какое)
Свойство z-index влияет как на блочные элементы, так и на строчные (inline).
Кроме числовых значений применяется auto — порядок элементов в этом случае
строится автоматически, исходя из их положения в коде HTML и принадлежности к
родителю, поскольку дочерние элементы имеют тот же z-index , что их
родительский элемент. Значение inherit указывает, что оно наследуется у родителя.
https://idg.net.ua/blog/uchebnik-css/razmetka-css/z-index
overflow: отображение содержания блочного элемента, если оно целиком не
помещается и выходит за область заданных размеров.
overflow: auto | idden | scroll | visible

У блока должны быть заданы размеры.
● visible - значение по умолчанию. Содержимое не обрезается, а отображается
поверх границ блока-контейнера. Соседний контент не смещается. Возможно
перекрытие соседних блоков.
● hidden -содержимое блока обрезается без добавления какого-либо
интерфейса прокрутки для просмотра содержимого вне области обрезки.
Также предотвращает отображение фона или границ под плавающими
элементами, для которых задано свойство float: left / right;. отображается
только область внутри элемента, остальное будет скрыто.
● scroll - Содержимое обрезается до области полей, при этом блок становится
прокручиваемым контейнером. Если браузер использует механизм
прокрутки, который виден на экране, например, полосу прокрутки, этот
механизм отображается независимо от того, обрезано ли какое-либо его
содержимое.
Если содержимое не обрезано то полосы прокрутки просто неактивны. Это
позволяет избежать проблем с появлением и исчезновением полос
прокрутки в динамической среде. Размеры контейнера при этом не
меняются, а полоса прокрутки вставляется между внутренним краем границы
и внешним краем поля элемента.
● auto - полосы прокрутки добавляются только при необходимости. И почему у
меня работает только при переполнении снизу и справа
● initial - устанавливает значение свойства в значение по умолчанию.
● inherit - наследует значение свойства от родительского элемента.
white-space: устанавливает, как отображать пробелы между словами.

white-space: normal | nowrap | pre | pre-line | pre-wrap
В обычных условиях любое количество пробелов в коде HTML показывается на
веб-странице как один. Исключением является элемент <pre>, помещённый в этот
контейнер текст выводится со всеми пробелами, как если бы он был
отформатирован пользователем. Таким образом, white-space имитирует работу
<pre>, но в отличие от него не меняет шрифт на моноширинный.
Кроме того в коде HTML любой перенос текста воспринимается браузером как
пробел, это касается и размещения элементов на отдельных строках. И из этого
следует ньюанс. Предположим вы определили три элемента, ширина которых 20,
40, 40 процентов родителя. Если определения элементов в коде идут в одной
строке - они будут в одной строке на экране. Если же определения указаны в трех
строках подряд, между ними на экране добавится пробел и третий элемент уйдет на
вторую строку.
И как следствие, если вы пишите длинные слова без пробела, они выйдут за
границы блока, если ширина блока фиксирована. И могут чрезмерно расширить
блок в случае width: auto. Впрочем это теория, слова длиной более 20 букв весьма
редки.
● normal - текст в окне браузера выводится как обычно, переносы строк
устанавливаются автоматически.
● nowrap - пробелы не учитываются, переносы строк в коде HTML
игнорируются, весь текст отображается одной строкой; вместе с тем,
добавление <br> переносит текст на новую строку. Текст может выйти за
пределы родительского элемента.
● pre - текст показывается с учётом всех пробелов и переносов, как они были
добавлены разработчиком в коде HTML. Если строка получается слишком
длинной и не помещается в окне браузера, то будет добавлена
горизонтальная полоса прокрутки. Если вы привычно строите тэги лесенкой,
- и текст на экране броузера будет отформатирован лесенкой. Текст может
выйти за пределы родительского элемента, если тот мал.
● pre-line - в тексте пробелы не учитываются, текст автоматически переносится

на следующую строку, если он не помещается в заданную область. Другими
словами, текст выглядит близко к тому как в редакторе html, если места в
родительском элементе для конкретной строки недостаточно - остаток строки
переносится, затем опять перенос, броузер стремиться максимально
сохранить разметку.
● pre-wrap - в тексте сохраняются все пробелы и переносы, однако если строка

по ширине не помещается в заданную область, то текст автоматически будет
перенесён на следующую строку. Тот же pre но с переносом если
родительский элемент мал.
cursor:
cursor: [url('путь к курсору'),] | [ auto | crosshair | default | e-resize | help | move | n-
resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-
resize | wait | inherit ]
Устанавливает форму курсора, когда он находится в пределах элемента. Вид

курсора зависит от операционной системы и установленных параметров.
● url - позволяет установить свой собственный курсор, для этого нужно указать
путь к файлу с курсором.
● auto - вид курсора по умолчанию для текущего элемента.
transform: применяет 2D или 3D преобразование к элементу. Оно позволяет
смещать, вращать, масштабировать и/или наклонять любой элемент на
странице.
С помощью функций преобразования можно манипулировать внешним видом
элемента. В качестве значения свойства transform выступает одна или несколько
функций (разделяемых пробелами), которые будут применяться в том порядке, в
котором они определены.
К элементам, которые могут быть трансформированы, относятся элементы с
display: block; и display: inline-block;, а также элементы, значение свойства display
которых вычисляется как table-row, table-row-group, table-header-group, table-footer-
group, table-cell или table-caption. Трансформированным считается элемент с любым
установленным значением свойства transform, отличным от none.
Модель визуального форматирования CSS описывает систему координат внутри
каждого позиционированного элемента. Система координат является точкой
отсчета для свойств смещения. Положение и размеры в этом координатном
пространстве можно рассматривать как заданные в пикселях, относительно точки
отсчета, с положительными значениями, идущими вправо и вниз.
CSS3-трансформации позволяют сдвигать, поворачивать и масштабировать
элементы. Трансформации преобразовывают элемент, не затрагивая остальные
элементы веб-страницы, т.е. другие элементы не сдвигаются относительно него.
transform: none|transform-functions|inherit;
transform-functions:
● none - преобразование не применяется.
● matrix(a, c, b, d, x, y) - применяет 2D преобразование с помощью матрицы из
шести значений.
Значение a изменяет масштаб по горизонтали. Значение от 0 до 1
уменьшает элемент, больше 1 — увеличивает.
Значение c деформирует (сдвигает) стороны элемента по оси Y,
положительное значение — вверх, отрицательное — вниз.
Значение b деформирует (сдвигает) стороны элемента по оси X,
положительное значение — влево, отрицательное — вправо.
Значение d изменяет масштаб по вертикали. Значение меньше 1
уменьшает элемент, больше 1 — увеличивает.
Значение x смещает элемент по оси X, положительное — вправо,
отрицательное — влево.
Значение y смещает элемент по оси Y, положительное значение —
вниз, отрицательное — вверх.
● matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) - применяет 3D преобразование с

помощью матрицы из шестнадцати(4х4) значений.
● translate(x,y) - функция translate позволяет перемещать элементы влево,
вправо, вверх или вниз. Эта функция аналогична поведению position: relative;
При использовании этой функции, можно сдвигать элементы не влияя на
поток документа. Аргументы - единицы длины (положительные и
отрицательные), %.
● translate3d(x,y,z) - применяет 3D смещение.
● translateX(x) - определяет смещение, только по оси Х.
● translateY(y) - определяет смещение, только по оси У.
● translateZ(z) - определяет 3D смещение, только по оси Z.
● scale(x,y) - функция scale(x,y) масштабирует элемент горизонтально и
вертикально. Если указано только одно значение, оно будет использовано
сразу и для горизонтального масштабирования и для вертикального.
Например, scale(1) оставит элемент такого же размера, scale(2) удвоит его
пропорции, scale(0.5) уменьшит элемент в 2 раза и так далее.
Предоставление различных значений будет искажать элемент.
Масштабируемый элемент будет увеличиваться от своего центра или
уменьшаться к нему, другими словами центр элемента будет всегда
находится в одной и той же точке, независимо от его размера. Таково
поведение элемента по умолчанию, чтобы изменить это можно
воспользоваться свойством transform-origin. Отрицательные значения
отображают элемент зеркально. Аргументы - любое число.
● scale3d(x,y,z) - применяет 3D преобразование масштаба.
● scaleX(x) - определяет преобразование масштаба по оси Х.
Отрицательные значения отображают элемент зеркально по горизонтали.
● scaleY(y) - определяет преобразование масштаба по оси У.
Отрицательные значения отображают элемент зеркально по вертикали.
● scaleZ(z) - определяет 3D преобразование масштаба по оси Z.
● rotate(angle) - функция rotate() поворачивает элемент вокруг точки
происхождения по заданному значению угла. Как и в случае с функцией
scale(), по умолчанию точка происхождения - это центр элемента. Аргументы
- углы (deg, grad, rad или turn)
1turn, равен одному обороту или 360 градусам.
Соответственно 0.25 turn = 90 deg. и т.д.
grad - единица grad используется для определения угла в
градах. Прямой угол равен 100 град, полный оборот
соответствует 400 град. Допустимо использовать
отрицательное значение (-100grad), нулевое (0grad) и дробное
(36.6grad).
rad eдиница rad применяется для обозначения угла в
радианах. Один радиан получается при длине дуги, равной
радиусу окружности. Поскольку длина окружности
непосредственно связана с числом π, то для пересчёта радиан
в градусы и обратно используются следующие формулы:
deg = (rad * 360)/2π
rad = (deg * π)/180
● rotate3d(x,y,z,angle) - определяет 3D поворот.

● rotateX(angle) - определяет 3D поворот вдоль оси Х.
● rotateY(angle) - определяет 3D поворот вдоль оси У.
● rotateZ(angle) - определяет 3D поворот вдоль оси Z.
● skew(x, y) - функция skew(x, y) -определяет наклон по осям X и Y. Как и
следовало ожидать, x определяет наклон оси X,а y определяет наклон оси Y.
Если второй параметр опущен, то перекос элемента произойдёт только по
оси X. Аргументы - углы (deg, grad, rad)
● skewX(angle) - определяет 2D преобразование наклона вдоль оси Х.
● skewY(angle) - определяет 2D преобразование наклона вдоль оси У.
● perspective(n) - определяет перспективу для преобразования 3D элемента.
● inherit - указывает, что значение наследуется от родительского элемента.
Можно объединить несколько трансформаций одного элемента, перечислив их
через пробел в порядке проявления.
div {transform: scale(1.5) rotate(-10deg);}
https://webref.ru/layout/advanced-html-css/transform
https://html5book.ru/css3-transform/
transform-origin: смещает центр трансформации, относительно которого
происходит изменение положения/размера/формы элемента.
Значение по умолчанию — center, или 50% 50%. Задается только для

трансформированных элементов. Не наследуется.
transform-origin: <x> <y> <z>
● x - (left, center, right, длина, %)

● y -(top, center, bottom, длина, %) - пара значений, заданная с помощью
ключевых слов, единиц длины или процентов определяет, относительно
какой части элемента будет происходить трансформация. Значения больше
100% увеличивают область трансформации элемента. (сдвигают уже
трансформированный элемент)
● z - координата по оси Z. Может задаваться только в любых корректных
единицах для измерения длины (исключая проценты).
● initial - устанавливает значение свойства в значение по умолчанию.
● inherit - наследует значение свойства от родительского элемента.
<!DOCTYPE HTML>
<html>
<head>
<title>transform-origin</title>
<style>
div {
background: #fc0;
padding: 10px;
border: 1px solid #000;
}
div:hover {
/* Точка поворота в правом верхнем углу */
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
/* Поворачиваем на 20 градусов против часовой стрелки */
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div>Пример</div>
</body>
</html>
В данном примере при наведении курсора на элемент он поворачивается на
20 градусов против часовой стрелки относительно правого верхнего угла.
Float
На момент написания этого справочника (конец 2020г.) эта технология считается
устаревшей. Ей на смену пришли Flex и Grid. Но знать Float необходимо, масса
старый сайтов могут нуждаться в модификации вашими руками. К тому же, если
аккуратно работать с этой технологией - результат предсказуем и красив.
Float - плавать, всплывать.
Распространенный пример :
Я пока не подобрал корректной формулировки. Когда я пишу что float элемент

удаляется из потока, это не совсем “то же самое” удаление, что в случае с
использованием position: absolute | fixed. Как правильно описано здесь Разделяй и
властвуй — float, position и display / Хабр это третья схема позиционирования -
поплавок (float).
Ведь другие элементы обтекают float элемент и он может от них отодвигаться. А
при абсолютном позиционировании элемент никак не влияет на остальные.
Нормальный поток (normal flow, далее поток), включающий в

себя форматирование блока, инлайн-форматирование и
относительное позиционирование.
Поплавки (float). В этом случае, контейнер изначально
позиционируется в соответствии с потоком, а затем сдвигается
вправо или влево насколько возможно.
Абсолютное позиционирование (absolute positioning). При
таком подходе контейнер полностью изымается из потока (т.е. не
оказывает никакого влияния на соседние контейнеры) и
располагается относительно содержащего контейнера.
Float: left | right | none | inherit;

● left — элемент выравнивается по левой стороне. Элементы, находящиеся
ниже в потоке, обтекают его с правой стороны.
● right — значение, противоположное предыдущему. Элемент выравнивается по
правой стороне, а элементы, находящиеся ниже в потоке, обтекают его слева
по левому краю.
● none — элемент не обтекается и находится в своей обычной позиции.
Элемент, к которому применено свойство float, прижимается к левому или к
правому краю родительского элемента (в зависимости от заданного значения), а все
элементы, которые расположены ниже, поднимаются и словно обтекают данный
элемент. Для лучшего понимания представьте себе камень, который обтекает вода.
Собственно, именно поэтому такие элементы еще называют «плавающими».
Если для плавающего элемента явно не установлено width, то он сжимается по
ширине до размеров содержимого.
Браузер обрабатывает код HTML документа двигаясь сверху вниз, когда
обработка кода доходит до плавающего элемента, браузер размещает его сначала
согласно потоку документа, т.е. под тем элементом где он расположен в коде
документа, затем он удаляет плавающий элемент из нормального потока и смещает
его на максимально возможное расстояние к левому или правому краю
родительского элемента:
Поскольку плавающий
элемент был удалён из потока
документа остальные блочные
элементы, расположенные в
коде после него, смещаются на
его место, будто этого
элемента там и не было.
Несмотря на то, что
плавающий элемент был
удален из нормального потока,
на строчное содержимого, тем
не менее он влияет. В отличие от блочных элементов, строчное содержимое,
расположенное в коде после плавающего элемента, учитывает его границы и
обтекает его, то есть происходит обтекание текстом плавающего блока:
Если в примере на картинке будет использован <div> вместо <p> то ничего не
изменится. За исключение отступа вокруг абзацев, естественно.
Кроме того, margin примененный к <p> не обеспечит дистанцию его текста от
текста в “amazing”. Он ведь находится “внутри” абзаца. А вот применяя margin к
“amazing” мы добьемся нужного эффекта.
В одном ряду можно размещать более одного плавающего элемента, если это
позволяет ширина родительского элемента. Если ширины родительского элемента
не хватает, то плавающие элементы, которые не помещаются в ряд с остальными
плавающими элементами, будут смещены вниз. Что бы небыло лишних проблем с
содержимым float-ов не забываем о box-sizing.
Плавающие элементы не влияют (не плюсуются как содержимое) на высоту

родителя, то есть, если есть некоторый контейнер, а в нем находятся только
плавающие элементы, то высота контейнера будет равна нулю. Ведь плавающие
элементы удалены из потока.
Либо, если родителю задано, к примеру, свойство padding-top и/или padding-
bottom, то его высота будет равна сумме этих padding-ов.
Если в родительском контейнере помимо float-элементов имеются также обычные
элементы, то высота родителя будет равна высоте этих обычных элементов плюс
отступы.
Как заставить родительский контейнер учитывать высоту содержащихся в нем
плавающих элементов?
● Задать фиксированную высоту - в тех случаях, когда известно какая должна

быть высота контейнера.
● Применить “хак” micro clearfix. Этот хак был придуман разработчиком по
имени Nicolas Gallagher, и заключается он в добавлении нескольких строк
CSS к псевдоэлементу :after родительского контейнера, потерявшего высоту:
.wrapper:after {
content: " ";
display: table;
clear: both;
}
Этот код работает во всех современных браузерах. Преимущество данного

способа состоит в отсутствии необходимости писать лишний HTML-код.
Браузеру требуется найти место для псевдоэлемента и он посчитает размер
контейнера.
Я менял display:table на block или inline-block. И хак корректно работал. Надо как
-нибудь разобраться. Табличные значения display: table, table-cell, table-row, table-
column, и другие
Поведение, типичное для таблицы:
по умолчанию имеет ширину по содержанию, но занимает целую
строку, подобно блочным элементам;
по умолчанию прижимается к левой границе контейнера, даже если
контейнеру задано выравнивание по правому краю (text-align: right). Чтобы
прижать таблицу к правому краю, надо применять float: right или же делать
её инлайновой;
ширину и высоту таблицы можно задавать в css;
у таблицы может быть свойство margin, в том числе с
отрицательными значениями (в частности, таблицу можно центрировать,
назначив ей margin: 0 auto), а также padding (не действует в IE7);
к содержанию таблицы применимо горизонтальное выравнивание
(text-align);
вертикальное выравнивание на содержание такого элемента не
действует;
таблица может иметь рамку (border);
к таблице применимы свойства border-collapse (режим соединения
рамок) и border-spacing; последнее работает в том случае, когда первое
имеет значение separate, и создаёт зазоры между ячейками таблицы.
Это значение, кроме создания табличной структуры, можно
использовать в декоративных целях для ограничения видимой области по
содержанию — например, если в дизайне фон заголовка ограничивается
текстом заголовка: Пример. Подобный эффект можно получить правилом
float: left или display: inline, но display: table оставляет всю строку в
распоряжении данного элемента, не создавая обтекания следующими.
● Применить другой “хак”. Всего лишь сделать родительский элемент для float-
ов inline-block. Альтернатива для .clearfix / Хабр
● Применить свойство overflow: auto (или hidden) к контейнеру. Заставляет
браузер рассчитать высоту контейнера и изменить ее так, чтобы включать
плавающие элементы, иначе ему бы пришлось добавить полосу прокрутки
или скрыть их. Впрочем, иногда это случается, поэтому будьте осторожны.
Но учтите, если они есть, то мы потеряем абсолютно позиционированные
элементы.
Кроме того, оба этих хака и overflow (но конечно не width) выполнят ту-же
функцию, что и clear: both;
Свойство float работает только с блочными элементами, поэтому, при применении

его к элементам какого-то другого типа, они преобразуются к блочному типу.
Примечание: элементы с абсолютным и фиксированным позиционированием

игнорируют свойство float. Также свойство float не оказывает никакого эффекта на
флексбоксы.
clear: сброс обтекания
В большинстве случае на наших страничках обтекание надо будет в каком то
месте отключать. Например, очень часто у страницы есть footer. И он тоже будет
пытаться “обтечь” float элемент. Скорее всего он не “пролезет” весь, но вот его
background-color распространиться и под предыдущие float-элементы, или начнется
какая иная неразбериха.
И если мы не делаем этого предыдущими методами, используем clear:
● left — элемент, к которому применяется свойство clear:left, перестает обтекать
элемент со свойством float:left, однако правое обтекание сохраняется.
● right — элемент, к которому применяется свойство clear:right, перестает
обтекать элемент со свойством float:right, однако левое обтекание
сохраняется.
● both — полностью отменяет обтекание со всех сторон. Элемент смещается
вниз и образовывает стандартный поток. На следующие за ним элементы
обтекание также перестает влиять.
● none — отменяет очистку clear. Элемент будет вести себя, как обычно, и на
него будут влиять настройки float.
Подробно о свойстве float / Хабр
Flex
Хочу сразу сказать огромное спасибо Стасу Багретсову за его прекрасную работу
- Вёрстка на Flexbox в CSS. Полный справочник | by Stas Bagretsov
Flex - Flexible - гибкий, уступчивый.
Flex это не просто свойство, я могу назвать это технологией, столь она обширна
Flexbox разметка предоставляет возможность гибкого позиционирования и
изменения размера контейнеров внутри родителя имеющего свойство display: flex
Этот метод, набор свойств, также называют одномерным. Flex очень удобен для
размещения и манипуляций с контейнерами расположенными в строку или столбец.
Для работы с двумерной матрицей существует Grid разметка. Но. Есть
определенные хитрости для двухмерности и у flex-а.
Flexbox совершенно не зависит от направления размещения контейнеров. Это
удобно, ведь блочные элементы базируются на вертикальном расположении, а
стройные на горизонтальном.
Элементы в flexbox могут располагаться вдоль основной оси (от main-start до
main-end) или же вдоль поперечной оси (от cross-start до cross-end).
Main axis — основная ось flex контейнера, вдоль которой располагаются flex
элементы. Обратите внимание, что ей необязательно быть горизонтальной, все
зависит от свойства flex-direction, о котором вы прочитаете позже.
Main-start | main-end — Flex элементы расположены в рамках контейнера,
начиная от main-start и заканчивая main-end.
Main-size — высота или ширина flex элемента, что зависит от того, в каком
направлении идёт основная ось.
Cross axis — ось перпендикулярная главной оси, называется поперечной. Её
направление зависит от направления главной оси.
Cross-start | cross-end — flex линии, заполненные элементами и расположенные в
контейнере от cross-start до cross-end.
Cross-size — Ширина или высота flex-элемента, в зависимости от направления
главной оси.
float, clear и vertical-align не имеют эффекта для flex элементов
Свойства родительского контейнера
flex-direction: направление главной оси и контейнеров

row row-reverse column column-reverse
Значение column делает точкой отсчета вертикальную ось, точнее присваивает ей

статус - main-axis, а не разворачивает контейнер. Т.е. например, padding-top не
“превращается” в padding-right при замене row на column.
flex-wrap: перенос контейнеров
wrap-заворачивать.
Изначально все flex-элементы будут пытаться уместиться в одну строку. Вы
можете поменять это и дать возможность этим элементам переходить на другую
строку, при переполнении ширины контейнера.
● nowrap — это значение по-дефолту, при котором все flex элементы будут
выстраиваться в одну линию.
● wrap — flex элементы будут переноситься на несколько строк, от верха к
низу.
● wrap-reverse — flex элементы будут переноситься на несколько строк снизу
вверх.
Работает одинаково и при переполнении через указание width и через flex-basis.
flex-flow: сокращенная форма от flex-direction и flex-wrap
flow - поток
flex-flow: <'flex-direction'> || <'flex-wrap'>
По умолчанию - flex-flow: row nowrap;
justify-content: распределение пространства вокруг flex элементов.
Распределяет лишнее свободное пространство, когда, либо все flex элементы в

линии имеют фиксированный размер, либо же нет, но уже достигли своего
максимального размера.
Оно также влияет на выравнивание элементов, когда те переполнят строку. (надо
разбираться)
Для того, чтобы определить как браузер распределяет пространство между и
вокруг флекс элементов вдоль поперечной оси контейнера (вертикально), или
производит выравнивание всего макета сетки по оси столбца grid-контейнера, вы
можете воспользоваться свойством align-content.
Обращаю внимание, если элемент не является флекс элементом (не находится
внутри родительского элемента, который является блочным, или строчным флекс
контейнером), то свойство justify-content не окажет на такой элемент никакого
эффекта.
Это свойство может использоваться в тех случаях, когда для флекс элементов
явно указана ширина, и если ширина всех элементов внутри контейнера не
вызывает переполнение контейнера, иначе свойство justify-content не окажет на
такой элемент никакого эффекта.
При распределении элементов учитываются их margin-left/right и padding-left/right
(при любом значении box-sizing), надо быть внимательным. Кроме того большой
margin может сместить элемент из контейнера наружу. Также , при горизонтальном
отсчете, (flex-direction: row) padding-top/bottom элементов увеличивают высоту flex
родителя вне зависимости от box-sizing (все это в подробностях постепенно
выясню)https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/
Сам по себе margin: auto; у дочернего элемента flex родителя поглощает
свободное пространство, то есть, если элемент один, он будет отцентрирован
внутри flex контейнера.
space-around — элементы равномерно распределены по строке с равным местом
вокруг них. Учтите, что визуально пробелы между элементами не равномерны, так
как все элементы имеют одинаковые пробелы с двух сторон. Пробелы от начала
контейнера до первого элемента и от последнего элемента до конца контейнера
равны и составляют половину пробелы между элементами. Иными словами - у
каждого элемента одинаковый пробел слева и справа, и соответственно - начало
контейнера - пробел - 1-й элемент - пробел - пробел - 2-й элемент и.т.д
space-evenly — элементы распределены таким образом, что свободное
пространство между любыми двумя элементами равномерно, как и место до
границы края контейнера.
align-items: выравнивание элементов вдоль cross axis

align-items: stretch | flex-start | flex-end | center | baseline;
Это свойство определяет стандартное поведение того, как flex элементы будут
располагаться вдоль поперечной оси (cross axis) на заданной строке. Это
своебразная версия justify-content, но только для поперечной оси, которая
перпендикулярна главной.
● flex-start — всё размещается с начала поперечной оси
● flex-end — все элементы размещаются с конца поперечной оси
● center — элементы центрируются по поперечной оси
● baseline — элементы выравниваются по базовой линии. Базовая линия -
условная линия проходящая под первой строкой текста не учитывая
свисания и нижние выносные элементы букв вниз, проще говоря без
хвостиков вниз как - ф, р, у в этом шрифте и тому подобное…..
● stretch — это дефолтное состояние, при котором элементы заполняют
контейнер, с учетом min-width и max-width.
а вот при direction:column все немного странно, надо разобраться.Вертикальное и
горизонтальное центрирование всего и вся в CSS Flexbox
Свойства дочерних элементов
order: порядок размещения

order: <любое целое число>; /* дефолтное 0 */
По-дефолту, флекс элементы располагаются в исходном порядке 1, 2, 3 и т.д.

Однако, свойство order контролирует порядок в котором элементы могут
располагаться.
Следует учитывать - сначала будут размещены элементы с дефолтным order , в
порядке их описания в коде html, затем имеющие не нулевое его значение. То есть,
предположим, у нас описаны три <div> ,в коде html, последовательно. у второго
order: 2; Но он будет на третьей позиции, так как сначала отрисуются 1-й и 3-й без
явно указанного order-а.
flex-grow: способность flex элемента становиться больше.

flex-grow: <число>; /* дефолтное 0 */
Это свойство определяет способность flex элемента при необходимости
становится больше. Оно принимает безразмерное значение, которое служит
пропорцией или долей. Оно указывает какое количество свободного места внутри
контейнера элемент должен взять.
Если все элементы в контейнере имеют flex-grow со значением 1, то это означает
то, что оставшееся место в нём распределено в равной мере среди потомков.
Также, помните, что оно не принимает негативных значений.
Как работает Flex-grow в CSS. Подробное руководство
flex:shrink: способность flex элемента сокращаться

flex-shrink: <число>; /* дефолтное 1 */
Это свойство определяет способность flex элемента сокращаться при
необходимости. Оно также не принимает отрицательных значений.
Как работает flex-shrink в CSS. Подробное руководство
flex:basis: определяет размер элемента

flex-basis: <длина> | auto; /* дефолтное auto */
Это свойство определяет стандартный размер элемента, перед тем как
оставшееся место будет распределено. Это может быть длина (20%, 5rem и тп) или
ключевое значение. Ключевое значение auto означает «эй, посмотрите на мои
свойства ширины и высоты» (этим раньше занималось свойство main-size, пока не
устарело и не было удалено). Значение content означает, что размер основывается
на контенте элемента — это свойство пока что не очень хорошо поддерживается,
поэтому его очень тяжело протестировать и довольно сложно понять, что делают
его собратья, такие как max-content, min-content и fit-content.
Свойство совершенно не эквивалентно width необходимо изучить - Разница
между width и flex-basis. Понимание flex-basis это очень важный… | by Stas
Bagretsov
flex: сокращение для grow, shrink, basis

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
Второй и третий параметры опциональны, то есть flex-shrink и flex-basis. По-
дефолту оно имеет значение 0 1 auto.
align-self: переопределение align-self для конкретного элемента

align-self: auto | flex-start | flex-end | center | baseline | stretch;
Это свойство позволяет переопределить выравнивание указанное явно или по
умолчанию для родительского элемента (если точно align-items) элементов, быть
перезаписанному для определенного flex элемента.
Свойства изображений
background-color: определяет цвет фона элемента.

background-color: <цвет> | transparent | inherit
Хотя это свойство не наследует свойства своего родителя, из-за того, что
начальное значение устанавливается прозрачным, цвет фона дочерних элементов
совпадает с цветом фона родительского элемента.
● transparent - устанавливает прозрачный фон.
background-image: устанавливает фоновое изображение для элемента.

background-image: url(“путь к файлу”) | none[, url(“путь к файлу”) | none]*
● url - в качестве значения используется путь к графическому
файлу, который указывается внутри конструкции url(). Путь к
файлу при этом можно писать как в кавычках (двойных или
одинарных), так и без них. При написании пути в css файле мы
должны считать что “находимся” в папке с ним. То есть, так как
мы, как правило, описуем стиль для картинки в файле ‘имя’.css,
а он, опять таки, как правило, находится в папке css, при
написании пути к картинке надо “выйти” из css в предыдущую
папку, где как правило находится папка с картинками /img, и
“войти” в img. А именно, пишем, url(“../img/файл
картинки.расширение”). Две точки означают выход в
предыдущую папку.
Причем, используя live server в VSCode мы можем забыть написать
точки и все будет работать, но при ручном запуске браузер картинку не
загрузит.
● none - отменяет фоновое изображение для элемента.
При указании нескольких url изображение, которое было объявлено раньше,
будет выше остальных по оси Z.
Свойства такие как background-position, background-repeat и др., также могут
содержать значения перечисляемые через запятую, которые будут относиться к
соответствующему фоновому изображению.
Например (https://htmlbase.ru/css/background-image)
background-image:
url(https://htmlbase.ru/storage/app/media/html5-css3.png),
url(https://htmlbase.ru/storage/app/media/axiom-pattern.png);
background-repeat: no-repeat, repeat;
background-position: center;
background-repeat: будет повторять второй рисунок.
background-position: разместит по центру первый;
По умолчанию картинка отображается в своем разрешении, без
масштабирования, и если она меньше контейнера для которого служит фоном она
повторяется по горизонтали и по вертикали. Если она крупнее - будет отрезано
лишнее. Для регулирования повторов применяется следующее свойство:
gradient:
Отдельного свойства для добавления градиента нет, поскольку он считается

фоновым изображением, поэтому добавляется через свойство background-image
или универсальное свойство background.
linear-gradient: привычный нам линейный градиент

Для записи позиции вначале пишется to, а затем добавляются ключевые слова
top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно
написать to left top или to top left. В табл. 1 приведены разные позиции и тип
получаемого градиента для цветов #000 и #fff, по другому от чёрного к белому.
Вместо ключевого слова допускается задавать угол наклона градиентной линии,

который показывает направление градиента. Вначале пишется положительное или
отрицательное значение угла, затем к нему слитно добавляется deg.
Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт
ведётся по часовой стрелке. Отсчёт угла наклона градиентной линии показан ниже.
Для значения top left и ему подобных угол наклона градиентной линии
вычисляется, исходя из размеров элемента так, чтобы соединять две диагонально
противоположные угловые точки.
Для создания сложных градиентов двух цветов уже будет недостаточно,

синтаксис позволяет добавлять их неограниченное количество, перечисляя цвета
через запятую. При этом можно использовать прозрачный цвет (ключевое слово
transparent), а также полупрозрачный с помощью формата RGBA.
Чтобы точно позиционировать цвета в градиенте, после значения цвета

указывается его положение в процентах, пикселах или других единицах. Например,
запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с
красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый.
Для простоты крайние единицы вроде 0% и 100% можно не писать, они
подразумеваются по умолчанию.
Еще примеры:
linear-gradient(to bottom, #fff 40%, #333 ,

#fff );
linear-gradient(to bottom, #fff 40%, #333 , #fff

80% );
Обратите внимание, разница в примерах

только в процентах возле третьего, белого
цвета. В первом случае - белый цвет идет до 40% затем градиентный переход, во
втором случае мы указываем что белый вновь начинается с 80% и градиент
“ужимается” в промежуток 40%-80%. При том что и “формула” градиента и границы
сплошных цветов задаются одним выражением.
linear-gradient(to bottom, #fff 50%, #333
50% );
Да, такой записью мы задали черно белый градиент, но, под него не осталось
места, 50 %процентов белый и с 50% черный.
Значит мы трактуем процент первого цвета - “до куда”, а процент второго
“откуда”. Но если цветов больше все становится сложнее. Два раза подряд указание
одного цвета с разными процентами будет означать сплошной интервал этого
цвета. И т.д.
Ну в общем тут очень много можно экспериментировать, Есть полезный
калькулятор.
radial-gradient: круговой градиент
В простейшем случае для задания радиального градиента понадобится всего два

параметра: начальный и конечный цвет.
Возможны две формы радиального градиента — круг (circle) и эллипс (ellipse),

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

помощью ключевых слов или доступных единиц измерения вроде пикселов или
процентов; ниже приведены возможные сочетания.
● at top left = at left top = at 0% 0% (в левом верхнем углу);

● at top = at top center = at center top = at 50% 0% (по центру вверху);
● at right top = at top right = at 100% 0% (в правом верхнем углу);
● at left = at left center = at center left = at 0% 50% (по левому краю и по центру);
● at center = at center center = at 50% 50% (по центру) — это значение по
умолчанию;
● at right = at right center = at center right = at 100% 50% (по правому краю и по
центру);
● at bottom left = at left bottom = at 0% 100% (в левом нижнем углу);
● at bottom = at bottom center = at center bottom = at 50% 100% (по центру
внизу);
● at bottom right = at right bottom = at 100% 100% (в правом нижнем углу).
Обратите внимание на синтаксис, если мы хотим сочетать форму градиента с

указанием начальной точки, то вначале идёт ключевое слово circle, а потом уже
через пробел позиция:
background-image: radial-gradient(circle at center, #fff

50%, #333 75% );
Если задать позицию начальной точки для примера как at 40px 45px, а второй
цвет сделать несколько темнее (#0076a5), и использовать скругление углов - border-
radius - Закругление углов CSS: свойство border-radius — учебник CSS то получится
реалистичный шарик:
.circle {
height: 100px;
width: 100px;
border-radius: 50px;
background: #55ddff; /* Старые браузеры */
background: radial-gradient(#55ddff, #0081b5);
}
Есть еще интересная возможность, мы можем не только позиционировать центр

градиента, но и задавать его размер:
Для центральной начальной точки градиенты вроде closest-corner и farthest-side
совпадают. Но градиенты будут различаться, если установить начальную точку в
углу.
Ранее указанный калькулятор умеет генерировать параметры и для кругового
градиента.
background-repeat: определяет, как будет повторяться фоновое

изображение, установленное с помощью свойства background-image.
CSS 2.1 background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit
CSS 3 background-repeat: <повторение> [ , <повторение> ]*
Здесь:
<повторение> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2} ?????
Допустимо указывать два значения, первое ключевое слово задаёт повторение по

горизонтали, второе по вертикали. Если мы указываем значения через запятую -
они относятся к разным слоям, без запятой - к одному.
● no-repeat - устанавливает одно фоновое изображение в элементе без его
повторений, положение которого определяется свойством background-
position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-
repeat.
● repeat - фоновое изображение повторяется по горизонтали и вертикали.
Аналогично repeat repeat.
● repeat-x - фоновый рисунок повторяется только по горизонтали. Аналогично
repeat no-repeat.
● repeat-y - фоновый рисунок повторяется только по вертикали. Аналогично no-
repeat repeat.
● space - изображение повторяется столько раз, чтобы полностью заполнить
область; если это не удается, между картинками добавляется пустое
пространство.
● round - изображение повторяется так, чтобы в области поместилось целое
число рисунков; если это не удаётся сделать, то фоновые рисунки
масштабируются. (И вуаля, если наша картинка больше половины
контейнера по х и по у - мы увеличим ее на весь контейнер. Но надо быть
осторожным, вдруг размер контейнера будет резко увеличен).
Можно установить повторение рисунка только по горизонтали, по вертикали или в

обе стороны.
● В CSS3 допустимо указывать несколько значений для каждого фона,

(картинки “разной глубины” - координата z) перечисляя значения через
запятую.
background-size: Масштабирует фоновое изображение согласно заданным

размерам.
background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain
● <значение> - задает размер в любых доступных для CSS единицах —
пикселы (px), сантиметры (cm), em и др. Пропорции картинки могут быть
искажены.
● <проценты> - задает размер фоновой картинки в процентах от ширины или
высоты родительского элемента. Если заданы одновременно, то пропорции
картинки могут быть искажены. (Ессно зависит от пропорций контейнера).
● auto - если задано одновременно для ширины и высоты (auto auto), размеры
фона остаются исходными; если только для одной стороны картинки
(100px auto), то размер вычисляется автоматически исходя из пропорций
картинки. Пропорции сохраняются и контейнер может остаться частично не
заполненным.
● cover - масштабирует изображение с сохранением пропорций так, чтобы его
ширина или высота равнялась ширине или высоте блока. Но картинка может
не поместиться в контейнер.
● contain - масштабирует изображение с сохранением пропорций таким
образом, чтобы картинка целиком поместилась внутрь блока.
Контейнер 700*600, картинка -
1250*650
cover дает тот же результат, что и auto
100%
contain дает тот же результат, что и
100% auto
Насколько можно судить два последних подбирают комбинации 100% и auto
для картинки.
Если установлено одно значение, оно задает ширину фона, второе значение
принимается за auto. Пропорции картинки при этом сохраняются. Использование
двух значений через пробел задает ширину и высоту фоновой картинки.
С этими значениями удобно экспериментировать в инспекторе кода.
background-position: задает начальное положение фонового изображения,

установленного с помощью свойства background-image.
CSS2.1 background-position: [left | center | right | <проценты> | <значение>] ||

[top | center | bottom | <проценты> | <значение>] | inherit
CSS3 background-position: <позиция>[, <позиция>]*
Здесь:
<позиция> = [left | center | right | <проценты> | <значение>] || [top | center | bottom |

<проценты> | <значение>] | inherit.
У свойства background-position два значения, положение по горизонтали (может

быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме
использования ключевых слов положение также можно задавать в процентах,
пикселах (отсчет от верхнего левого пикселя родительского контейнера) или других
единицах. Если применяются ключевые слова, то порядок их следования не имеет
значения, при процентной записи вначале задается положение рисунка по
горизонтали, а затем, через пробел, положение по вертикали. Отношение между
используемыми ключевыми словами и процентной записью следующее.
Процент отступа это не расстояние центра изображения от границ. Это

соотношение отступов слева/справа, сверху/снизу.
66% - слева отступ ~ в 2 раза больше чем справа
75% - слева отступ в 3 раза больше чем справа
80% - слева отступ в 4 раза больше чем справа
90% - слева отступ в 9 раз больше чем справа
top left = left top = 0% 0% (в левом верхнем углу) - - по умолчанию

top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)
Если смещение в пикселях или процентах отрицательное - рисунок уйдет влево

или вверх. Вышедшая за размеры родителя часть будет невидима. (по крайней
мере если она попадет на местонахождение <body>. Если указывать смещение
более 100% или более размер картинки + оставшаяся часть контейнера - картинка
уйдет вправо или вниз.
* В CSS3 допустимо указывать несколько значений для каждого фона, (картинки

“разной глубины” - координата z) перечисляя значения через запятую.
background : позволяет установить одновременно до пяти характеристик
фона.
Значения могут идти в любом порядке, браузер сам определит, какое из них
соответствует нужному свойству. Для подробного ознакомления смотрите
информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры
сразу нескольких фонов, перечисляя их через запятую.
CSS2.1 background:[background-attachment || background-color || background-
image
|| background-position || background-repeat] | inherit
CSS3 background: [<фон>, ]* <последний_фон>
Здесь: <фон> = [background-attachment || background-color || background-image||
background-position || background-repeat] | inherit
<последний_фон> = [background-attachment || background-color || background-image
|| background-position || background-repeat] | inherit
Если наряду с фоновыми изображениями требуется задать цвет фона элемента,

он указывается в последнюю очередь после перечисления.
Значения - любые комбинации пяти значений, разделяемых между собой
пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение
не является обязательным, поэтому неиспользуемые можно опустить. inherit
наследует значение у родительского элемента.
На момент написания этого текста допустимо и использование шестого значения
- background-size, для этого его записываем через слэш - например - background:
#fff url("images/bg.jpg") no-repeat center /cover;
При чем, по крайней мере на данный момент, указание background-size в
background обязательно должно сопровождаться указанием какого либо background-
position, иначе контейнер пуст. (Это вообще ситуация когда мы допускаем
синтаксические ошибки - браузер игнорирует неправильно заданные свойства и
рендерит страницу дальше.)
И кроме того, background перезапишет все ранее указанные “персональные”
свойства фоновой картинки.
Точно также указанный после background другой background-image - перезапишет
таковой в background.
Прочие CSS свойства
Наследование свойств
Наследованием называется возможность переноса правил форматирования от
элементов- родителей элементам-потомкам, в случае если они не определены у
них вручную.
В наследовании много ньюансов, сюда все включать не стану.
С точки зрения свойств
Наследуется меньшая часть свойств CSS. К наследуемым относятся в основном
свойства, определяющие параметры отображения текста:
font-size, font-family, font-style, font-weight, color, text-align, text-transform, text-
indent, line-height, letter-spacing, word-spacing, white-space, direction и другие.
Также к наследуемым свойствам относятся list-style, cursor, visibility, border-
collapse и некоторые другие. Но они используются значительно реже.
Вот интересная статья: Наследование, каскадность и специфичность в CSS | Info-
line.net
Наследуемые свойства можно и нужно задавать через предков, следуя структуре
документа.
Механизм наследования — многоуровневый, то есть его эффект не только
распространяется на прямых потомков (дочерние элементы), но и переносится на
все вложенные элементы. Если, например, <em> и <strong> расположены внутри
<p>, то они также наследуют атрибуты любого стиля, применяемого к <body>.
Например, параметры текста зачастую не меняются в пределах крупных блоков
страницы: меню, основного содержания, информационных панелей. Поэтому общие
параметры текста (цвет, размер, гарнитура) обычно указывают в стилях этих
крупных блоков.
Как правило, свойства, которые затрагивают размещение элементов на странице
(отступы (поля), границы (рамки) элементов), не наследуются.
Весь список наследуемых свойств вы можете найти в стандарте CSS.
Ну а не наследуемые можно заставить наследовать ))))
Рамка у <body> не наследуется. И это очень хорошо ), иначе представьте весь
сайт с десятками рамок, вокруг каждого абзаца, раздела в котором эти абзацы
находяться и т.п.
С помощью inherit можно указать, чтобы элемент принудительно наследовал
значение свойства у своего предка.
Например - чтобы заставить теги <p> таки унаследовать рамку border от своего
предка <body>, необходимо записать:
p{
border: inherit;
}
Родителем некоторых свойств является не <body> и даже не <html> а сам
броузер, например синее подчеркивание ссылок или размер текста в h1-h6.
Свойства, у которых имеется уточнение обстоятельств (при наведении мыши;
если один тег вложен в другой, и тд.) имеют приоритет над свойствами, указанными
для всех остальных случаев. Ещё один важный момент: если после значения CSS
свойства поставить пробел и написать !important, то это свойство всегда и везде
будет иметь наивысший приоритет.
Свойства, указанные для класса (class) или уникального идентификатора (id),
имеют высший приоритет, причем приоритет у id, выше чем у class.
(доразобраться)
С точки зрения тэгов

Заголовки h1-h6 не наследуют размер текста, это связано с тем, что у браузера
уже есть встроенные стили для заголовков. Они обычно отображаются крупным
полужирным шрифтом. И это вполне логично, размер заголовка совсем не
обязательно должен быть равен размеру текста в родителе, а часто может быть
больше.
Такая же ситуация обстоит и ссылками: <a> у браузера, изначально, для ссылок
установлен синий цвет и подчеркивание.
Как дотянуться до дочерних элементов:?

Если нужно задать стиль потомку определенного элемента делаем так :
p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам

абзаца с классом first;
p .first a {color: green;} — если добавить пробел, то будет применен стиль к

любому тегу имеющему класс .first, который является потомком элемента <p>;
.first a {color: green;} — данный стиль будет применен к любой ссылке,

расположенной внутри другого элемента, обозначенного классом .first.
Например .first a {color: inherit;} - цвет текста ссылки будет унаследован от
родителя .first
Приоритеты стилей: (незакончено!)
Из таблицы видно что:
Свойства встроенного стиля ((не путайте с внутренним стилем задаваемым в

<head>) - например <p style="font-weight: bold; color: red;">Обратите внимание на
этот текст.</p> ) не могут быть переопределены внешним .css файлом.
Вот здесь подробно расписано:http://site4business.net/css/kaskadirovanie-i-

prioritetnost.html
Одной из сложностей создания больших сайтов является необходимость

использовать нестандартные стили для определенных страниц. То есть, для одних
и тех же элементов разных страниц может понадобится использовать разные стили.
Но как этого добиться?
Как вариант можно использовать правило последней (самой актуальной) записи.

Например, для такой "нестандартной" страницы можно подключить отдельную
таблицу стилей, содержащую особенные правила форматирования. Только нужно
не забыть подключить этот файл после основной таблицы стилей, чтобы отменить
предыдущие правила. Вот вам и хитрость:-)
Сброс стилей: (я считаю что правильнее говорить начальное

переопределение)
Стили по умолчанию для webkit -

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
https://gist.github.com/ambidexterich/34828a904dd97dd2a345
Стили по умолчанию для Firefox - https://dxr.mozilla.org/mozilla-
central/source/layout/style/res/html.css
Также по этому вопросу - https://meiert.com/en/blog/user-agent-style-sheets/
Из написанного ранее понятно, что некоторые стили по умолчанию нам зачастую
не подходят. И, очевидно, мы можем их обнулить (сбросить), а точнее
переопределить, в начале нашего .css файла. Какие обнулять? Что изначально
лишнее? Это зависит от разработчика и особенностей сайта. Вариантов много.
Сразу уточню, мы говорим об обнулении, но это семантика русского языка, мы
некоторые стили обнуляем, а некоторым ставим не “0”, а другое числовое или
словесное значение, чем по умолчанию назначено им браузером, стандартом css.
Самый распространенный вариант сброса стилей это такой код:
* {padding: 0; margin: 0}
Звездочка – универсальный селектор, который перебирает все теги по порядку и

задает их указанным свойствам новые значения (но есть некоторые “но” -
https://www.sitepoint.com/universal-selector-css-selector/ ) и есть мнение - иногда “*”
использует намного больше ресурсов компьютера, поэтому часто верстальщики
используют явное описание сброса для каждого HTML тега.
Многие верстальщики предпочитают сброс оформить отдельным файлом.
Прекрасная статья - https://habr.com/ru/post/45296/
Вот весьма красивый и хорошо описанный вариант -

https://medium.com/@stasonmars/%D1%81%D0%BE
%D0%B2%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D1%8B
%D0%B8%CC%86-%D1%81%D0%B1%D1%80%D0%BE%D1%81-css-f5816963c82b
Псевдоэлементы
Эти элементы не пишутся в html коде страницы, поэтому они и называются
псевдоэлементами.
Этот прием позволяет создавать визуальные элементы, текст (что возможно, но
не корректно) или что-то другое, не средствами html разметки, а средствами css.
Зачем использовать css для создания визуальных элементов, а не управления их
свойствами? HTML - это семантика, CSS - отображение.
Когда вы хотите добавить элемент, который нужен только для изменения
отображения страницы, но не связан с логической структурой, то некорректно
вносить его в HTML. Например - нумерация заголовков в списках. Вид маркера, мы,
если конечно максимально используем css, не указываем в html разметке. Но кроме
родных свойств маркеров списков мы можем использовать и псевдоэлементы.
Ранее псевдоэлемент записывался через двойное двоеточие, но сейчас правильной
будет и запись с одним двоеточием.
Псевдоэлементы визуально отображаются на экране монитора, не добавляясь к
дереву документа DOM. Программы для чтения с экрана не имеют доступ к
содержимому, созданному с использованием псевдоэлементов и не могут его
прочитать, поэтому рекомендуется не использовать псевдоэлементы для вставки
важного контента на страницу.
& - это элемент родитель к которому применяется

псевдокласс, можно так же писать и полное имя родителя.
.parent {
position: absolute;
&:before {
height: 100%;
vertical-align: middle;
content: '';
}
}
Он же без &, а с полным именем родителя.
.parent {
position: absolute;
}
.parent:before {
height: 100%;
vertical-align: middle;
content: '';
} стоп, это про sass
В чем разница между псевдоклассом и псевдо-элементом в CSS? - css
В инспекторе элементов Firefox он указывается в тексте разметки с двойным

двоеточием. (да, инспектор элементов, для нашего удобства, покажет его в
разметке, хотя его там и нет )))
пример:
<p class="descriprion"> the most powerful operational rocket in the world by a factor
of two
</p>
.descriprion:after {
content:"";
display:block; //мы делаем псевдоэлемент отдельным блоком, что
переносит его на новую строку после “two”
width:1px;
height:60px;
background-color: white;
margin:auto; //блок становится в линию вертикального центра экрана.
margin-top:26px;
}
Результат : полоска высотой 60px,

ширино 1px, удаленная от
предыдущего элемента на 26px.
еще пример:
необходимо добавить кавычки для цитаты:
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
свойство content определяет содержимое псевдоэлементов. И даже больше,

многие псевдоэлементы не отобразятся, если у них не задано свойство content.
Достаточно такой строки: content: "";
Содержимое, вставляемое с помощью свойства content, появляется внутри
элемента, до или после его содержимого. С помощью CSS можно генерировать
содержимое следующими способами:
— с помощью свойства content в сочетании с псевдоэлементами ::before и ::after;
— с помощью свойств counter-increment и counter-reset.
2.12. CSS content
Свойство content • Про CSS
counter-increment
:before и .after content обязателен, еще примеры
Цифры из псевдоэлементов до и после заголовка:
<h1 class="psevdo-title">Псевдоэлементы </h1>
psevdo-title {
margin: 0px;
font-size: 30px;
}
psevdo-title:before {
content: "1.";
font-size: 15;
color: green;
}
.psevdo-title:after {
content: ".1";
}
1.Псевдоэлементы.1
Еще пример, синяя полоска над началом этого же слова:
.psevdo-title:before {
content: "";
margin: 50px 0;
display: block;
width: 50px;
height: 3px;
background-color: #274fbc
}
Что характерно курсором выделяется только часть прописанная в html, точки с
единичками в буфер не отправишь.
position для псевдоэлементов работает так же как для элементов.
Центрируем полоски и надпись по горизонтальной оси
<h1 class="psevdo-title">Псевдоэлементы </h1>
.psevdo-title {
margin: 0px;
font-size: 30px;
text-align: center;
position: relative;
}
.psevdo-title:before {
content: "";
margin: 5px auto;
display: block;
width: 50px;
height: 3px;
background-color: aquamarine;
position: absolute;
left: 50%;
margin-left: -25px;
bottom: 5px;
}
.psevdo-title:after {
content: "";
margin: 5px auto;
display: block;
width: 50px;
height: 3px;
background-color: #274fbc
}
:first-letter - стилизация первой буквы абзаца.
<div class="psevdo-text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ut lorem sit amet velit condimentum dignissim.
Nullam pellentesque tristique orci a laoreet. Ut venenatis
ullamcorper metus iaculis malesuada. Quisque ullamcorper
placerat malesuada. D</p>
</div>
.psevdo-text p:first-letter {
color: red;
font-size: 50px;
}
Получаем:
:first-line - стилизация первой строки абзаца.

Работает точно так же как и :first-letter.Но что интересно, они совместимы. :first-
letter имеет выше приоритет.
Хоть по смыслу :first-line работает со всей строкой, он не перекрасит первую букву
стилизованную :first-letter
:first-letter -же перекрасит первую букву первой строки несмотря на :first-line
::placeholder - псевдоэлемент placeholder задает стили для подсказывающего

текста placeholder в тегах input или textarea. (в Chrome 84 работает и с одним
двоеточием)
<input type="text" placeholder="подсказка">
input::placeholder {
color: red;
}
Но такую простую запись мы можем себе позволить, только если не важна
совместимость.
Для совместимости со старыми броузерами надо использовать вендорные
приставки:
Internet Explorer использует псевдокласс :-ms-input-placeholder.
Microsoft Edge использует псевдоэлемент ::-ms-input-placeholder.
Chrome, до версии 57, Opera до версии 44, Safari до версии 10.1 и Android
используют псевдоэлемент ::-webkit-input-placeholder.
Firefox с версии 4 и до 19 использует псевдокласс :-moz-placeholder.
Firefox до версии 51 использует псевдоэлемент ::-moz-placeholder.
Да, это не опечатка, двоеточий разное количество, проклятые костыли для
совместимости. В разных версия разных старых броузеров placeholder или
псевдокласс или псевдоэлемент.
И получаем:
/* IE 10+ */
input:-ms-input-placeholder {
color: red;
}
/*Microsoft Edge */
input::-ms-input-placeholder{
color: red;
}
/* Chrome/Opera/Safari до 2017 года*/
input::-webkit-input-placeholder {
color: red;
}
/* Firefox 4-18 */
input:-moz-placeholder {
color: red;
}
/* Firefox 19-50 */
input::-moz-placeholder {
color: red;
}
/* Standart */
input::placeholder {
color: red;
}
В css правилах этого псевдоэлемента мы можем использовать следующие
свойства:
color
font и все связанные свойства (font-size, font-family и т.д.)
text-decoration
text-indent
text-overflow
text-transform
line-height
word-spacing
letter-spacing
background и все связанные свойства (background-color, background-
image и т.д.)
opacity
vertical-align
Псевдоклассы
Псевдоклассы это селекторы, выбирающие элементы которые они будут
стилизовать по определенным критериям. Критериями могут быть расположение
элемента в дереве документа, возникновение/окончание события, определенное
значение одного из атрибутов элемента.
Они не отображаются в исходном документе и не принадлежат дереву документа

DOM (дереву документа принадлежат только сами html-элементы).
Их количество конечно и имена определены стандартами css.
Записывается как одно из имен псевдоклассов, добавленное через двоеточие к
селектору элемента, в css файле.
В чем разница между псевдоклассом и псевдо-элементом в CSS? - css
Динамические псевдоклассы
Классы, применяющиеся к элементу (стилизуемому элементу) при

наступлении/выполнении/прекращении выполнения определенных условий.
:hover - определяет какой стиль приобретет элемент при наведении на него

курсора мыши до момента активации, то-есть нажатия кнопки мыши.
В css файле мы сначала определяем стиль в самом классе а затем его
псевдокласс:
.class {
}
.class:hover {
}
Но в общем можно определить псевдокласс и без определения основного класса,
значения свойств класса все равно ведь есть в таблице броузера по умолчанию.
Ну, и для внесения окончательной ясности пример:
.btn {
background-color: #43ac14;
color: #fff;
border: 1px solid #3a9112;
}
.btn:hover{
background-color: #3a9112;
cursor: pointer;
}
Вчитайтесь, эта конструкция обеспечивает перекраску фона кнопки, при
наведении на нее курсора, в более темный цвет, совпадающий с цветом ее
границы, а также курсор мыши, над кнопкой, сменится на указывающюю руку - .

:focus - определяет стиль элемента находящегося в фокусе.
Элемент находится в фокусе, когда мы его выбрали, установили в него курсор,
находимся “в нем” Это касается в первую очередь элементов ввода input, ввода
через textarea, нажатия на ссылку. Элементы выбираются либо нажатием клавиши
мыши, либо нажатием клавиши “tab”.
По умолчанию элемент в фокусе выделяется браузером с помощью outline.
Есть ньюанс с button. Ее в фокус можно поставить только “tab”-ом, нажатие на
ней клавиши мышки вызовет срабатывание кнопки.
Пример, берем предыдущий пример, но теперь мы хотим, что внешняя граница -
outline не появлялась а цвет фона менялся на цвет границы и при выборе кнопки
“tab”-ом и при наведении на нее курсора.
.btn {
color: #fff;
}
.btn:focus {
outline: none; /*outline отключаем отдельно для состояния
focus, при ховере он не появляется*/
}
.btn:hover, .btn:focus {
cursor: pointer;
}
:active - определяет стиль элемента в момент нажатия на нем. Происходит

между нажатием и отпусканием кнопки мыши на элементе. Обычно
применяется для кнопок и ссылок.
Наш пример растет:
.btn {
color: #fff;
}
.btn:focus {
outline: none;
}
.btn:hover, .btn:focus {
cursor: pointer;
}
.btn:active {
background-color: #2c760a;
}
Теперь кнопка темнеет при наведении на нее курсора или выборе ее
“tab”-ом, а при нажатии становится еще темнее.
:visited - применяется для ссылок, срабатывает после первого

использования ссылки, перехода по ней.
Дело в том, что по умолчанию, единожды задействованная ссылка становится
фиолетовой. Но если мы что-то в ней переопределили, а ведь обычно отключаются
подчеркивания, то ссылка не будет перекрашиваться после первого успешного
перехода по ней. Данный псевдокласс специально заточен под эту проблему.
Если у вас ссылка уже отработана, то заставить ее “поголубеть” клавишей F5 и
даже закрытием и перезагрузкой страницы не получится. Нужно очистить историю
браузера.
Записываются эти псевдоклассы в определенной последовательности, иначе
возможно некорректное отображение.
Пример:
.link {
text-decoration: none;
color: #1d76dd;
}
.link:visited {
color: #7c25d3;
}
.link:hover{
text-decoration: underline;
}
.link:active{
color: black;
}
Например если .visited разместить после .active ссылка не будет чернеть при
нажатии.
Псевдоклассы пользовательского интерфейса.
Относятся к элементам форм.

:disabled - стиль применится к заблокированным элементам форм, то-есть тем у
кого присутствует атрибут disabled.
Такие элементы не могут получить фокус, быть нажатыми или активированы, в
текстовых полях нельзя набирать текст. Должен применяться после .hover. Иначе
элемент будет затенен, но при наведении на него курсора сработает .hover.
Структурные псевдоклассы
Представляют концепцию структурных псевдоклассов, которая позволяет

отбирать элементы на основании информации, которая отражена в дереве
документа и не может быть получена при помощи простых селекторов или их
комбинации. Отсчёт начинается с элемента с индексом 1.
:placeholder-shown - отличие :placeholder-shown от ::placeholder

заключается в том, что оформление с помощью :placeholder-shown работает
только тогда, когда в полях input и textarea виден текст заполнителя, т.е.
значение атрибута placeholder.
И занимается он оформлением поля ввода а не текста заполнителя. То есть,
например, свойство color в описании стиля применяется к цвету границы а не цвету
placeholder-а. Но и тут есть ньюансы: в Chrome 80 все как написано, а в Firefox 72, в
случае отсутствия ::placeholder или отсутствия в его стиле свойства color, свойство
color в :placeholder-shown воздействует и на цвет границы поля ввода и на цвет
placeholder-а. Остальные свойства я не исследовал так подробно.
https://css-tricks.com/almanac/selectors/p/placeholder-shown/
Когда пользователь начинает вводить текст, это оформление меняется на
стандартное или описанное в стилях для данной страницы/сайта.
С поддержкой его старыми броузерами дело еще хуже -http://html-
plus.in.ua/pseudoclasses-and-pseudoelements-for-form-elements/
Все допустимые css свойства не проверял, но фоновый рисунок, до начала ввода
текста в поле, появился.
:root соответствует корневому элементу <html>. Таким образом,

селекторы :root и html применяют стиль к одному и тому же элементу <html>.
Тем не менее, между :root и html есть небольшое отличие — у :root приоритет
выше, чем у селектора html. Если задать одинаковые стилевые правила для этих
селекторов, то стиль :root переопределит стиль html.
:empty применяет заданный стиль к элементу, который не имеет дочерних

элементов (включая текст, он также расценивается как дочерний элемент).
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p:empty {
background-color: aqua;
width: 100px;
height: 20px;
}
</style>
</head>
<body>
<p>Первый абзац.</p>
<p></p>
<p>Третий абзац.</p>
</body>
</html>
Результат:
:first-child - задаёт стиль первого элемента в группе сестринских элементов

(имеющих одного родителя).
:last-child - задает стилевое оформление последнего элемента группе

сестринских элементов
Если какой либо элемент является единственным потомком - он одновременно и
:first-child и :last-child
Определение выглядит очень просто, но я с пол-часа разбирался..
И могу подробно теперь объяснить
С дальнейшими примерами удобно экпериментировать в https://codepen.io/
Пример: (https://webref.ru/css/first-child)
<article>
<h1>Роль цитокинов при дорсалгии</h1>
<p>Автор: Гордон Фримен, канд. физ.-мат. наук</p>
<p>Содержание статьи</p>
<address>Почта: freemen@blackmesa.com</address>
<p>Опубликовано: <time datetime="2018-11-27">27 ноября 2018</time></p>
</article>
article :first-child { color: red; } читаем так - выбрать все первые дочерние элементы
у родителя <article>, первые дочерние у дочерних элементов от <article>, и далее
первые дочерние у дочерних от дочерних и так.далее...
Псевдокласс :first-child без указания селектора выберет все первые элементы
внутри <article> и установит для них красный цвет текста. Здесь первыми
дочерними идут <h1> и <time>, они и будут выбраны. <h1> -первый дочерний для
<article>, а <time> первый дочерний для <p>
Кстати, не забываем <time> потомок <article>, но он не дочерний для него
элемент, ))), внучерний. child в имени псевдокласса обозначает именно дочерний, а
не ребенок/потомок.
article h1:first-child { color: red; } - выбрать все первые дочерние элементы типа
<h1>
При добавлении селектора к :first-child в начале берётся первый дочерний
элемент тэга <article>, затем смотрится какого он типа. Если элемент совпадает с
указанным селектором, то он будет выбран. Таким образом, выбирается элемент,
если он удовлетворяет двум условиям одновременно: это первый элемент и это
элемент указанного типа. Здесь красным цветом будет выделен заголовок,
поскольку первым идёт именно <h1>.
article p:first-child { color: red; }
Ничего выбрано не будет, поскольку первые дочерние элементы <h1> и <time> а
не <p>.
article :last-child { color: red; }
Результат - Опубликовано: 27 ноября 2018 третий <p> - последний дочерний
элемент от <article>, а <time> в свою очередь первый и последний дочерний от <p>,
наследует цвет текста от него.
Еще пример:
<!doctype html>
<html>
<head>
<title>Пример</title>
<style>
p:first-child { color: red; }
</style>
</head>
<body>
<p>Этот абзац является первым дочерним элементом своего родителя(body).</p>

<h1>Добро пожаловать!</h1>
<p>Этот абзац является третьим дочерним элементом своего родителя(body).</p>
<div>
<p>Этот абзац является первым дочерним элементом своего родителя(div).</p>
<p>Этот абзац является вторым дочерним элементом своего родителя(div).</p>
</div>
</body>
</html>
- первый <p> является и первым дочерним элементом для <body>, а третий
будет первым дочерним элементом уже относительно <div>.
Пример: делаем меню, в начале отрисовываем border у каждого пункта, слева и

справа, затем отключаем первый левый и последний правый border-ы
https://qna.habr.com/q/74536
<div class="top-line"> .top-line .menu ul li {

<div class="menu"> float: left;
<ul> padding: 6px 0px;
<li><a href="#">Вызов курьера</a></li> border-left: 1px solid #fff;
<li><a border-right: 1px solid #c7c7c7;
href="#">Сотрудничество</a></li> list-style-type: none;
<li><a href="#">Новости</a></li> }
<li><a href="#">Статьи</a></li>
<li><a href="#">Видеоблог</a></li> .top-line .menu ul li a {
</ul> color: #474747;
</div> font-size: 0.857em;
</div> text-decoration: none;
padding: 7px 15px;
}
.top-line .menu ul li:first-child { border-left: none; }

.top-line .menu ul li:last-child { border-right: none; }
Часто встречающийся пример, объяснение которого я изменил:
<!DOCTYPE html>
<html>
<head>
<title>first-child</title>
<style>
B:first-child {
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b>
adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat.</p>
<p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b>
exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo
consequat</b>.</p>
</body>
</html>
Выбрать все первые дочерние элементы типа <b>

Результат:
Выбраны первый <b> первого абзаца, понятно почему, и первый <b> второго
абзаца, так как он первый дочерний <b>для второго (другого) тега <p>.
:first-of-type - задаёт стиль первого элемента определенного типа в группе

братских элементов (имеющих одного родителя).
(даже если этот элемент не является первым дочерним для своего родителя и над
ним находятся другие дочерние элементы других типов);
:last-of-type - задаёт стиль последнего элемента определенного типа в

группе братских элементов (имеющих одного родителя).
(даже если этот элемент не является первым дочерним для своего родителя и над
ним находятся другие дочерние элементы других типов);
Если какой либо элемент является единственным в своем типе - он
одновременно и first-of-type и :last-of-type
<article>
<h1>Роль цитокинов при дорсалгии</h1>
<p>Автор: Гордон Фримен, канд. физ.-мат. наук</p>
<p>Содержание статьи</p>
<address>Почта: freemen@blackmesa.com</address>
<p>Опубликовано: <time datetime="2018-11-27">27 ноября 2018</time></p>
</article>
article :first-of-type { color: red; } - выбираем первые встреченные элементы любого
типа
Будут выбраны первые элементы каждого типа (<h1>, <p>, <address>, <time>) и
установлен для них красный цвет текста.
article p:first-of-type { color: red; } - выбираем первый <p> - Автор: Гордон Фримен,
канд. физ.-мат. наук
article :last-of-type { color: red; } -
:last-of-type без указания селектора выберет последние или единственные
элементы каждого типа (<h1>, <p>, <address>, <time>) и установит для них красный
цвет текста.
И поиграем с таблицей:
<!DOCTYPE html>
<head>
<title>first-of-type</title>
<style>
table {
border-collapse: collapse; /* Убираем двойные границы */
width: 100%; /* Ширина таблицы */
border-spacing: 0; /* Расстояние между ячеек */ }
td {
border: 1px solid #6A3E14; /* Параметры рамки */
padding: 4px; /* Поля в ячейках */ }
tr:first-of-type {
background: #808990; /* Цвет фона */
color: #fff; /* Цвет текст */ }
td:first-of-type { background: #CFD6D3; /* Цвет фона */ }
</style>
</head>
<body>
<table>
<tr>
<td> </td><td>1998</td><td>1999</td><td>2000</td><td>2001</td>
<td>2002</td><td>2003</td>
</tr>
<tr>
<td>Нефть</td>
<td>3</td><td>22</td><td>34</td><td>62</td><td>74</td><td>57</td>
</tr>
<tr>
<td>Золото</td>
</tr>
<tr>
<td>Дерево</td>
</tr>
</table>
</body>
</html>
tr:first-of-type {
background: #808990; /* Цвет фона */
color: #fff; /* Цвет текст */
выберет первую из 4 строк сформированных <tr></tr>
td:first-of-type {
background: #CFD6D3; /* Цвет фона */
}
а этот псевдокласс “найдет” свой <td></td> на уровень ниже, и стилизует первую
ячейку в каждой строке. Попутно переопределит предыдущий цвет первой ячейки
первой строки который был назначен tr:first-of-type.
Правомерна и такая конструкция - применение псевдоэлемента к псевдоклассу.
p:last-of-type::after {
content: ' ◄'; /* Добавляем символ в конце текста */
color: #c00000; /* Цвет символа */
}
пример этого - https://webref.ru/css/last-of-type
Хотя в спецификации это явно не указано, мы можем использовать класс вместо

тэга. То есть элементом к которому относится наш селектор, он же псевдокласс,
может быть как тэг, так и класс. Возможно и id, я пока не проверял. Но в firefox 72.02
записанный в следующем виде код корректно работает: (проверить в валидаторе)
<article>
<h1 class="header">Роль цитокинов при дорсалгии</h1>
<p class="paragraf">Автор: Гордон Фримен, канд. физ.-мат. наук</p>
<p class="paragraf">Содержание статьи</p>
<address class="adress" >Почта: freemen@blackmesa.com</address>
<p class="paragraf">Опубликовано: <time class="time" datetime="2018-11-
27">27 ноября 2018</time></p>
</article>
:only-child - выбирает дочерний элемент, только если он является

единственным у своего родителя.
:only-of-type - выбирает дочерний элемент определённого типа, только если

он является единственным у своего родителя.
<html>
<head>
<title>:only-child</title>
<style>
</style>
</head>
<body>
<section>
<div>единственный</div>
</section>
<section>
<div>один из двух дочерних div</div>
<p>один из двух дочерних</p>
</section>
</body>
</html>
section :only-child {
color: green; /* Зелёный цвет текста */
} - выбираем элемент любого типа внутри <section> в случае если он
единственный дочерний элемент. Есть ли у него свои дочерние элементы - не
важно. Они также будут проверены на единственность.
В первом <section> один элемент, во втором - два, результат очевиден -
единственный
<style>
section div:only-of-type {
color: green; /* Зелёный цвет текста */
} - выбираем элемент типа <div> внутри <section> в случае если этот <div>
единственный, наличие других дочерних элементов не важно.
Внутри каждого из <section> <div> встречается только единожды, и значит
зеленым цветом будет закрашено - единственный и один из двух дочерних div
Разницу между этими двумя псевдоклассами можно сформулировать так: p:only-

child проверяет, является ли элемент единственным, и если это <p> выбирает его, а
p:only-of-type находит элемент <p> и смотрит, является ли этот <p> единственным в
своем типе.
Взято отсюда, еше есть пример меню: https://webref.ru/layout/structural-pseudo-
classes/only-child
И самые сложноватые герои раздела:
:nth-child()
Псевдокласс :nth-child() позволяет выбрать элементы на основе их положения в
группе братских (соседских) элементов.
● odd - описывает элементы среди группы соседних с нечётными номерами
1, 3, 5, и т. д. Эквивалентно (2n+1)
● even - описывает элементы среди группы соседних с чётными номерами 2, 4,
6, и т. д. Эквивалентно (2n)
В общем же виде этот псевдокласс записывается следующим образом.
:nth-child(an ± b) { … }
Вместо a и b подставляются конкретные целые числа, а n является счётчиком и
остаётся в исходном виде. Числа a и b целые числа могут быть отрицательными
или нулём, в таком случае их можно не записывать — 2n+0 идентично 2n.
Отрицательный результат выражения не имеет смысла, так как позиции
элементов отсчитываются от 1-цы.
Счётчик n начинается с 0. Это количество дочерних элементов, 3,5,18, например.
Понятное дело что их положительное количество, но если задавать - “-n” при
вычислении nth-позиции n будет отрицательным числом.
Несложно привыкнуть и без калькулятора считать эту формулку:
Запись (an ± b) следует понимать так: выбираем с интервалом a элементы,
начиная с позиции b (включая ее) и до последнего соседского элемента. Стартовая
позиция может находиться слева от нуля. Эти минусовые значения можно
победить.
Если вам попадется такая неприятная, например, формула - (4n-7), это будет то-
же самое что - (4n+1), формулу такого вида можно привести к виду (an+b).
Вычитаем из a b, до тех пор, пока b не будет положительным. Как этот поток
сознания понимать ? А именно:
берем (4n-7), 4-7=-3, получаем (4n-3), что ровно то же самое
берем (4n-3), 4-3=1, получаем (4n+1), каждый 4-й элемент отсчитывая от первой
позиции, последовательность которую легко представить и покрутить в голове.
Почему так ? Если нарисовать вручную становится ясно. Математик смог бы
объяснить по научному)))
Запись (-an+b) выбираем элементы с позиции b, (включая ее) двигаемся к
первому элементу с интервалом a.
Запись (n + b ) выбираем каждый элемент начиная с позиции b и до последнего
элемента.
Запись (-n + b ) выбираем каждый элемент начиная с позиции b, двигаемся к
первому элементу.
Запись (-an - b) не имеет смысла
Сразу может быть трудно понять, но если расписать вручную :
4n n=0 0 -3n+8 n=0 8 -n+7 n=0 7

n=1 4 n=1 5 n=1 6
n=2 8 n=2 2 n=2 5
n=3 -1 n=3 4
n=3 12
…….
4n+2 n=0 2 -3n-2 n=0 -2 -3n+7 n=0 7

n=1 6 n=1 -5 n=1 4
n=2 10 n=2 1
не имеет смысла
n=3 14
4n-2 n=0 -2 n+6 n=0 6

n=1 2 n=1 7
n=2 6 n=2 8
n=3 10 n=3 9
http://css.yoksel.ru/nth-child/
http://www.topdesignagencies.com/nth-test/ -калькулятор
На эту казалось бы мелочь стоит потратить немного времени - потом пригодится
при работе с массивами в программировании.
Но это не все, мы можем применить комбинацию двух и более модификаторов.
В результате будет выбрано пересечение обоих множеств, или, для не учивших
вышку, только значения (позиции) выбранные обоими селекторами.
Предположим у нас 12 соседских элементов:
:nth-of-type(n+4) :nth-of-type(-n+6)
4,5,6,7,8,10,11,12 6,5,4,3,2,1 результат 4,5,6
:nth-child(n+3) :nth-child(-n+7) :nth-child(even)
3,4,5,6,7,8,9,10,11,12 7,6,5,4,3,2,1 (только четные) результат 4,6
в коде css пишем так:

<тэг родитель>:nth-of-type(n+4):nth-of-type(-n+6) {
…..
}
a:nth-child(2n-1) - читаем так - выбрать элементы на позициях 1,3,5,7...если
они являются ссылками.
И еще, эта выборка будет идти “вглубь” по дочерним тэгам, как и nth-child, cм. :nth
Tester
Возможно и так задавать селектор (как и при использовании обычных классов) -

<div class="two"> .two :nth-child(2) :nth-child(3) {
<ul> background: lightsteelblue;
<li>One</li> }
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<ol>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
</ol>
Будет выбран третий дочерний элемент во втором дочернем элементе для .two
то-есть “seven”
:nth-of-type()
Псевдокласс :nth-of-type() работает схожим образом с :nth-child(), но выбирает
элементы, исходя из их положения в группе братских элементов, лишь указанного
типа.
Предположим нам требуется выбрать, например, несколько абзацев в статье,
которая содержит не только абзацы, но и заголовки?
Предположим, мы хотим покрасить нечетные абзацы, поэтому напишем p:nth-
child(odd)
Но nth-child(odd) считает все соседские элементы подряд, и закраска пройдет так:
Закраска сработает только для <p>, стоящего на нечетной позиции но

нумеруются то позиции с учетом <h*>.
Для таких задач и придуман nth-of-type
p:nth-of-type(odd) - выбрать все нечетные соседские элементы типа <p>. Так все
получится. Формула та-же что и у :nth-child
https://codepen.io/christophergoodwin/pen/YyVXdg
https://codepen.io/dsoldera/pen/KdeXdw
:nth-last-child() и :nth-last-of-type()
Псевдоклассы :nth-child() и :nth-of-type() выбирают заданные элементы из группы
братских элементов, начиная с первого. В противоположность им, псевдоклассы
:nth-last-child() и :nth-last-of-type() выбирают элементы, считая от последнего.
соответственно: если у нас 8 элементов
4n n=0 0 -3n+8 n=0 1 -n+7 n=0 2

n=1 5 n=1 4 n=1 3
n=2 1 n=2 7 n=2 4
n=3 5
…….
4n+2 n=0 7 -3n-2 n=0 10 (но его -3n+7 n=0 2

n=1 3 нет по условию) n=1 5
n=2 10 (но его уже нет n=1 15 (но его n=2 8
нет по условию) теперь при такой
по условию)
формуле движемся к
не имеет смысла концу списка
4n-2 n=0 10 (но его уже нет n+6 n=0 3

по условию) n=1 2
n=1 7 n=2 1
n=2 3
n=3 -2
я что-то не хочу их дальше считать в уме))).
вот универсальный калькулятор - https://css-tricks.com/examples/nth-child-tester/
вот тут можно поэкспериментировать:
https://codepen.io/SitePoint/pen/LroIp
Для лучшего понимания:

https://tproger.ru/translations/pseudo-classes-explained/ - разбор с примерами в
DOM.
https://htmlacademy.ru/demos/2#1 - наиболее подробное и наглядное объяснение
из всех что я видел.
(увлекаться калькуляторами не надо, на собеседовании их скорее всего не будет)
https://css-tricks.com/useful-nth-child-recipies/
https://habr.com/ru/post/119139/ - взгляд на различие :nth-child и :nth-of-type

:not (селектор) применяет заданный стиль ко всем элементам страницы,
кроме указанных в круглых скобках.
<!doctype html>
<html>
<head>
<title>Пример</title>
<style>
p { color:aqua; }
:not(p) { color: green; }
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Абзац.</p>
<div>Текст внутри элемента div.</div>
<p>Абзац.</p>
</body>
</html>
Результат:
Тэги “не <p>” , то бишь <h1> и <div> получили зеленый цвет.
Интересные статьи на тему frontend разработки.

10 особенностей CSS, о которых вы, возможно, не знали
Центрирование горизонтальное и вертикальное

HTML и CSS ошибки, которые я встречаю как человек без ограничений по
здоровью
Магия CSS: Обтекание текста вокруг нестандартных форм
Наглядно о CSS селекторах
Как добавить эффект свечения (тень) для SVG при наведении
Анимированная светящаяся при наведении кнопка с помощью CSS
Множественная тень с эффектом свечения с помощью CSS
4 симпатичных CSS-эффекта для изображений
Подчеркивание в CSS (красивые эффекты с примерами кода)
How to Recreate the Ripple Effect of Material Design Buttons
Задавать Height и Width для изображений снова важно
Grab your user's attention with the :focus-within CSS selector
Таблицы и CSS-свойство float в современной веб-разработке
Малоизвестные CSS-свойства / Блог компании RUVDS.com / Хабр
Практика использования спецификации CSS Scroll Snap / Блог компании

RUVDS.com / Хабр
Полное руководство по HTML-атрибутам data-* / Блог компании RUVDS.com /

Хабр
How to create a HEART SHAPE using CSS before & after
Как браузер рендерит веб-страницу
Устройство современного веб-браузера Chrome (часть 1/4) / Хабр
JS и его запретные тайны / Хабр
What you should learn to become junior frontend developer in 2019
Веб-компоненты: руководство для начинающих / Хабр/
Evan Wallace on Twitter: "This is wild: using const/let instead of var at the top level can
make JavaScript code run literally 10x slower in @webkit. https://t.co/x73Cwux54r"
Методы обхода защиты приложений VueJS

Как установить капчу на свой сайт
Подключение JavaScript к HTML

Js скрипт, мда звучит коряво, правильнее говорить js сценарий или просто java
script могут быть подключены двумя методами, как внутренний (встроенный) скрипт,
целиком вписанный в html файл, так и внешний сценарий, как правило обитающий в
папочке js на том же уровне, что и css c img-ем.
Встроенный скрипт:
Внешний скрипт: если наш скрипт состоит из более чем двух, трех строк кода,
дабы не загромождать верстку, его стоит разместить снаружи, в своей папке, и
элементарно подключить его к странице.
Максимально близко к </ body> мы пишем - <script src="myscript.js"></script>
Браузер загружает и отображает HTML постепенно.
Особенно это заметно при медленном интернет-соединении:
браузер не ждёт, пока страница загрузится целиком, а
показывает ту часть, которую успел загрузить.
Если браузер видит тег <script>, то он по стандарту обязан
сначала выполнить его, а потом показать оставшуюся часть
страницы.
Такое поведение называют «синхронным». Как правило,
оно вполне нормально, но, как следствие, пока браузер не
выполнит внешний скрипт, он не покажет часть страницы
под ним.
То есть, в таком документе, пока не загрузится и не
выполнится нащ_сценарий.js, содержимое <body> будет
скрыто.
Будьте внимательны, так как мы указали с помощью тега <meta> кодировку utf-8
в HTML-документе, кодировка самих файлов (test.html, myscript.js и myscript2.js)
также должна быть utf-8.
Еще про виды подключения - https://puzzleweb.ru/javascript/1_whereto.php
https://learn.javascript.ru/external-script
Инспектор кода в Chrome (f12)

Надпись - user agent stylesheet - в окне просмотра стилей выделенного элемента
означает что это стили браузера по умолчанию.
list-style-type: decimal; правило перекрывается более приоритетным
селектором.
Например, даже определяя в css файле стиль, для <ol>, задающий те-же
десятичные маркеры что и по умолчанию, мы все равно их
переопределяем/перекрываем.
Инспектор элементов FireFox (f12)

Html и css

Загружено:

Сведения о документе

Описание:

Оригинальное название

Авторское право

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Описание:

Авторское право:

Html и css

Оригинальное название:

Загружено:

Описание:

Авторское право:

Замечание про brackets.

При включении режима

"резолвить", "резолвится" - Слово образовано от английского resolve и означает

Элемент <!DOCTYPE> предназначен для указания типа текущего документа —

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от

Если мы не задаем doctype - ваша страница отображается в режиме quirks -

Техническая информация для браузера в тэге <head>

<meta> определяет метатеги, которые используются для хранения информации

Справа мобилопригодная страница с тегом "viewport", в котором указана область

Элементы, принадлежащие к категории

Элементами метаданных являются: <base>,

<p>... </p> - paragraf - параграф, он же абзац. Создать отступ, “красную строку”,

не прямое начертание. Впрочем есть другая версия - )

Задача данных тегов: выделить в тексте главную или ключевую

Внимательно следите за количеством использования данных тегов.

<u>... </u> - underline - подчеркнуть. Акцентированного для поисковиков варианта

Являются блочными тэгами.

<ul>...</ul> - unordered list - ненумерованный список. Также возможно

<ol>... </ol> - ordered list - нумерованный список.

<ol type="a" start="6" reversed>

<dl>...</dl> - description list - список с подробным описанием.

Более полная структура таблицы выглядит следующим образом :

Блочные и строчные элементы

блочные, которые на строке родителя находятся в одиночестве (у них display

<div>...</div> - division - делитель

Для блочных элементов можно задавать ширину (width), высоту (height),

Есть возможность менять тип элемента, придавать строчному блочный тип и

input - поле ввода однострочного текста

В HTML5 добавлены новые значения:

Значение radio - выбор только одного из предложенных вариантов.

Следует обратить внимание на параметр name обоих кнопок, поскольку он

<p><input type="radio" name="answer"

Значение - file, открытие диалогового окна операционной системы для выбора

● checked - предварительно активированный переключатель или флажок.

textarea - поле ввода многострочного текста

За уголок можно потянуть мышкой и увеличить размер.

● accesskey - переход к полю с помощью сочетания клавиш.

Для <input> и <textarea> , в случае использования “своих” шрифтов, на сайте,

Тег <label> устанавливает связь между определенной меткой, в качестве которой

● accesskey - доступ к элементам формы с помощью горячих клавиш.

Существует два способа связывания объекта и метки. Первый заключается в

select - поле выбора одного из нескольких предустановленных значений

Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося

По умолчанию свойство display для select -inline-block .

● multiple - позволяет одновременно выбирать сразу несколько элементов

Пример раскрывающегося списка

Пример множественного выбора: при зажатой клавише ctrl можно мышкой

option - определяет отдельные пункты списка, создаваемого с помощью

● disabled - заблокировать для доступа элемент списка.

Тег <button> создает на веб-странице кнопки и по своему действию напоминает

Теоретически, тег <button> должен располагаться внутри формы,

● disabled - блокирует доступ и изменение элемента.

Кнопки имеют свои стили по умолчанию установленные в броузере.

fieldset - группирования элементов формы.

<fieldset>....</fieldset> Подробнее - http://htmlbook.ru/html/fieldset

legend - создание заголовка группы элементов формы, которая

Ссылка для звонка по телефону:

Ссылка для отправки электронного письма:

Ссылка для изображения:

Мы можем использовать глобальный атрибут title (существует тэг title и

Еще пример, маленькая картинка - ссылка на себя большую (она является

атрибут href может ссылаться на файлы разных типов, локальные файлы и