Как-то так

How To WebDev

​Background-repeat: no-repeat/без повтора — CSS

Отображение фонового изображения только один раз также задается свойством background-repeat.

Пример:

Показать фоновое изображение только один раз,

Ссылка на код

В приведенном выше примере фоновое изображение помещается в том же месте, что и текст. Мы хотим изменить положение изображения, чтобы оно не слишком мешало тексту.

Вы можете сами попробовать код — WebFormatter

📓 #CSS #Код

Прям не терпитс
я начать

How To WebDev

​Background-position/положение фона — CSS

Свойство background-position — используется для указания положения фонового изображения.

Пример:

Указывает, что фоновое изображение должно быть фиксированно.

Ссылка на код

Вы можете сами попробовать код — WebFormatter

📓 #CSS #Код

​Background-attachment/фиксированность фона — CSS

Свойство background-attachment — указывает, должно ли фоновое изображение прокручиваться или быть фиксированным (не будет прокручиваться вместе с остальной частью страницы).

Пример:

Указывает, что фоновое изображение должно быть фиксированно.

Ссылка на код

Вы можете сами попробовать код — WebFormatter.

📓 #CSS #Код

​HTML - Заголовки №1

HTML заголовки - или субтитры, которые вы хотите отобразить на веб странице.

Они определяются с помощью тегов <h1> по <h6>.

<h1> определяет наиболее важный заголовок. <h6> определяет наименее важный заголовок.

Пример:

Ссылка на код

Примечание: Браузеры автоматически добавляют пробелы (поля) до и после заголовка.

📓 #HTML #Код

​HTML - Заголовки №2

Заголовки очень важны.

Поисковые системы используют заголовки для индексации структуры и содержания ваших веб страниц.

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

Заголовок <h1> должен использоваться для основного заголовка, а затем заголовок <h2>, менее важные <h3>, и так далее.

Примечание: Используйте HTML заголовки только для заголовков. Не используйте заголовки для создания текста BIG или bold.

📓 #HTML #Совет

​​​Параграф HTML №1

Параграф всегда начинается с новой строки и обычно представляет собой блок текста.

HTML элемент <p> определяет параграф.

Параграф всегда начинается с новой строки, и браузеры автоматически добавляют некоторые пробелы (поля) до и после параграфа.

Пример:

Ссылка на код

📓 #HTML #Код

​Параграф HTML №2

HTML Отображение

Вы не можете быть уверены, как будет отображаться HTML.

Большие или маленькие экраны, а также измененные размеры окон будут создавать различные результаты.

С помощью HTML вы не можете изменить отображение, добавив дополнительные пробелы или дополнительные строки в свой HTML код.

Браузер автоматически удалит все лишние пробелы и строки при отображении страницы:

Пример:

Ссылка на код

📓 #HTML #Код

​Параграф HTML №3

HTML Горизонтальная линия

Тег <hr> определяет тематический разрыв на HTML странице и чаще всего отображается в виде горизонтального линии.

Элемент <hr> используется для разделения содержимого (или определения изменения) на HTML странице:

Пример:

Ссылка на код

Тег <hr> - это пустой тег, что означает, что у него нет конечного тега.

📓 #HTML #Код

​Параграф HTML №4

HTML Разрыв строк

HTML элемент <br> — определяет разрыв строк.

Если вы хотите начать текст с (новой строки), не начиная новый параграф, установите тег <br>:

Пример:

Ссылка на код

📓 #HTML #Код

​Параграф HTML №5

HTML <pre>

Элемент <pre> — определяет предварительно отформатированный текст.

Текст находящийся внутри элемента <pre> отображается в фиксированной ширине шрифта (обычно курсив), и он сохраняет пробелы и разрывы строк

Пример:

Ссылка на код

📓 #HTML #Код

​Свойство Border — CSS

CSS свойство border — определяет границы вокруг элемента HTML:

Совет: Вы можете определить границу почти для всех HTML элементов.

Пример:

Использование свойства CSS border.

 {
    border: 1px solid powderblue;
}

📓 #CSS #Код

​Свойство Padding — CSS

CSS свойство padding — определяет отступ (пробел) между текстом и рамкой.

Пример:

Использование свойств CSS border и padding.

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

📓 #CSS #Код

​Отдельные стороны — CSS Border

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

В CSS также есть свойства для указания каждой из границ отдельно (верхняя, правая, нижняя и левая):

Пример:

p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

📓 #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-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

Свойство 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 #Код

​🧾 Свойство margin — CSS

Свойство margin — используется для создания очищение пространства вокруг элемента.
Свойство margin устанавливает размер поля (вокруг элемента).

В CSS с помощью свойства margin вы имеете полный контроль над полями. В CSS есть свойства для установки полей с каждой стороны элемента по часовой стрелке: top сверху, right справа, bottom сверху и left слева.

margin — Сокращенное свойство для установки свойств полей в одной декларации
margin-bottom — Устанавливает нижние поле элемента
margin-left — Устанавливает левое поле элемента
margin-right — Устанавливает правое поле элемента
margin-top — Устанавливает верхнее поле элемента

📂 #CSS #Совет
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS