How To WebDev

​🧾 Значение наследовать — CSS margin Пример ниже позволяет полю слева, быть унаследованным от родительского элемента: Ссылка на код 📂 #CSS #Код ▬▬▬▬▬▬▬▬ \ HowToWebDev // Задачи HTML CSS

​🧾 Значение авто — CSS margin Вы можете установить для свойства margin значение auto элемент будет находится в центре внутри контейнера по горизонтали. Элемент примет положение указанной ширины, а остальное поле будет разделена поровну, между левым и правым полями. Пример: div { width: 300px; margin: auto; border: 1px solid red; } 📂 #CSS #Совет ▬▬▬▬▬▬▬▬ \ HowToWebDev // Задачи HTML CSS

​🧾 Поля - сокращенное свойство Чтобы сократить код, можно указать все свойства полей в одном свойстве. Свойство margin сокращенное свойство для следующих индивидуальных свойств полей: margin-top — Поле сверху margin-right — Поле справа margin-bottom — Поле снизу margin-left — Поле слева Пример:

 {
   margin: 100px 150px 100px 80px;
} 

Вот как это работает: Если, свойство margin имеет четыре значения. margin: 25px 50px 75px 100px; Поле сверху 25px Поле справа 50px Поле снизу 75px Поле слева 100px 📂 #CSS #Совет ▬▬▬▬▬▬▬▬ \ HowToWebDev // Задачи HTML CSS

​🧾 Свойство margin — CSS Свойство margin — используется для создания очищение пространства вокруг элемента. Свойство margin устанавливает размер поля (вокруг элемента). В CSS с помощью свойства margin вы имеете полный контроль над полями. В CSS есть свойства для установки полей с каждой стороны элемента по часовой стрелке: top сверху, right справа, bottom сверху и left слева. margin — Сокращенное свойство для установки свойств полей в одной декларации margin-bottom — Устанавливает нижние поле элемента margin-left — Устанавливает левое поле элемента margin-right — Устанавливает правое поле элемента margin-top — Устанавливает верхнее поле элемента 📂 #CSS #Совет ▬▬▬▬▬▬▬▬ \ HowToWebDev // Задачи HTML CSS

​Цвет границ CSS — border-color Свойство border-color используется для установки цвета четырех границ. Примечание: Если border-color не устанавливается, у него отсутствует элемент цвета. Пример: Демонстрация различных цветных границ: p.one { border-style: solid; border-color: red; } p.two { border-style: solid; border-color: green; } p.three { border-style: dotted; border-color: blue; } 📓 #CSS #Код

​Ширина границ CSS— border-width Свойство border-width задает ширину всех четырех границ. – Ширина может быть установлена размером в ( px, pt, cm, em, т.п.) или с помощью одного из трех предопределенных значений:thin (тонкий), medium (средний), или thick (толстый). Пример Демонстрация различной ширины границ: p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: dotted; border-width: 2px; } p.four { border-style: dotted; border-width: thick; } 📓 #CSS #Код

​Определенный цвет границ — CSS Свойство border-color может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы и левой границы): Пример: p.one { border-style: solid; border-color: red green blue yellow; /* красный сверху, зеленый справа, синий снизу и желтый слева */ } Цвет HEX Цвет границы также можно задать с помощью шестнадцатеричного значения (HEX): Пример: p.one { border-style: solid; border-color: #ff0000; /* красный */ } 📓 #CSS #Код

​Отдельные стороны — CSS Border В предыдущих постах на канале вы узнали, что для каждой стороны можно задать разные границы. В CSS также есть свойства для указания каждой из границ отдельно (верхняя, правая, нижняя и левая): Пример: p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } 📓 #CSS #Код

​Свойство Padding — CSS CSS свойство padding — определяет отступ (пробел) между текстом и рамкой. Пример: Использование свойств CSS border и padding.

 {
    border: 1px solid powderblue;
    padding: 30px;
}

📓 #CSS #Код

​Свойство Border — CSS CSS свойство border — определяет границы вокруг элемента HTML: Совет: Вы можете определить границу почти для всех HTML элементов. Пример: Использование свойства CSS border.

 {
    border: 1px solid powderblue;
}

📓 #CSS #Код

​Параграф HTML №5 HTML <pre> Элемент <pre> — определяет предварительно отформатированный текст. Текст находящийся внутри элемента <pre> отображается в фиксированной ширине шрифта (обычно курсив), и он сохраняет пробелы и разрывы строк Пример: Ссылка на код 📓 #HTML #Код

​Параграф HTML №4 HTML Разрыв строк HTML элемент <br> — определяет разрыв строк. Если вы хотите начать текст с (новой строки), не начиная новый параграф, установите тег <br>: Пример: Ссылка на код 📓 #HTML #Код

​Параграф HTML №3 HTML Горизонтальная линия Тег <hr> определяет тематический разрыв на HTML странице и чаще всего отображается в виде горизонтального линии. Элемент <hr> используется для разделения содержимого (или определения изменения) на HTML странице: Пример: Ссылка на код Тег <hr> - это пустой тег, что означает, что у него нет конечного тега. 📓 #HTML #Код

​Параграф HTML №2 HTML Отображение Вы не можете быть уверены, как будет отображаться HTML. Большие или маленькие экраны, а также измененные размеры окон будут создавать различные результаты. С помощью HTML вы не можете изменить отображение, добавив дополнительные пробелы или дополнительные строки в свой HTML код. Браузер автоматически удалит все лишние пробелы и строки при отображении страницы: Пример: Ссылка на код 📓 #HTML #Код

​Параграф HTML №1 Параграф всегда начинается с новой строки и обычно представляет собой блок текста. HTML элемент <p> определяет параграф. Параграф всегда начинается с новой строки, и браузеры автоматически добавляют некоторые пробелы (поля) до и после параграфа. Пример: Ссылка на код 📓 #HTML #Код

​HTML - Заголовки №2 Большие заголовки Каждый HTML заголовок имеет размер по умолчанию. Однако вы можете указать размер для любого заголовка с атриутом style, используя CSS свойство font-size. Пример: Ссылка на код 📓 #HTML #Код

​HTML - Заголовки №2 Заголовки очень важны. Поисковые системы используют заголовки для индексации структуры и содержания ваших веб страниц. Пользователи часто просматривают страницу по ее заголовкам. Важно использовать заголовки, чтобы показать структуру документа. Заголовок <h1> должен использоваться для основного заголовка, а затем заголовок <h2>, менее важные <h3>, и так далее. Примечание: Используйте HTML заголовки только для заголовков. Не используйте заголовки для создания текста BIG или bold. 📓 #HTML #Совет

​HTML - Заголовки №1 HTML заголовки - или субтитры, которые вы хотите отобразить на веб странице. Они определяются с помощью тегов <h1> по <h6>. <h1> определяет наиболее важный заголовок. <h6> определяет наименее важный заголовок. Пример: Ссылка на код Примечание: Браузеры автоматически добавляют пробелы (поля) до и после заголовка. 📓 #HTML #Код

​Background-attachment/фиксированность фона — CSS Свойство background-attachment — указывает, должно ли фоновое изображение прокручиваться или быть фиксированным (не будет прокручиваться вместе с остальной частью страницы). Пример: Указывает, что фоновое изображение должно быть фиксированно. Ссылка на код Вы можете сами попробовать код — WebFormatter. 📓 #CSS #Код

​Background-position/положение фона — CSS Свойство background-position — используется для указания положения фонового изображения. Пример: Указывает, что фоновое изображение должно быть фиксированно. Ссылка на код Вы можете сами попробовать код — WebFormatter 📓 #CSS #Код