​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

​🧾 Поля - сокращенное свойство

Чтобы сократить код, можно указать все свойства полей в одном свойстве.

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