​Параграф 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

​🧾 Значение авто — CSS margin

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

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

Пример:

div {
width: 300px;
margin: auto;
border: 1px solid red;
}

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

​🧾 Значение наследовать — CSS margin

Пример ниже позволяет полю слева, быть унаследованным от родительского элемента:

Ссылка на код

📂 #CSS #Код
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS

​🧾 Поля — разрушить — CSS margin

Верхнее и нижнее поле элемента, иногда бывают разрушены в единое поле, равной по величине из двух полей.

Что не произойдет с левым и правым полями! Только с верхним и нижним полями!

Посмотрите следующий пример:

Ссылка на код

В примере выше, элемент <h2> имеет поле снизу 50px. Элемент <h3> имеет поле сверху 20px.

Здравый смысл предполагает, что вертикальное поле между элементами <h2> и <h3> может быть в общей сложности 70px (50px + 20px). Но в связи с разрушением поля по факту, поле будет в размере 50px

📂 #CSS #Код
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS

​🧾 Отступы внутри — CSS

CSS overflow

CSS свойство padding — используются для создания пространства вокруг содержимое элемента внутри определенных границ.

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

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

📂 #CSS #Код
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS

​🧾 Отступы в CSS — все стороны

CSS имеет свойства для указания заполнения для каждой стороны элемента:

padding-top — отступ сверху
padding-right — отступ справа
padding-bottom — отступ снизу
padding-left — отступ слева

Все свойства padding могут иметь следующие значения:

размер - задает отступ в px, pt, cm, и т.д.
% - устанавливает отступы в процентах от ширины содержащего элемента
inherit - задает, что отступ должен быть унаследован от родительского элемента

Внимание: Отрицательные значения не допускаются.

В следующем примере задаются различные отступы для всех четырех сторон элемента <div>:

Ссылка на код

📂 #CSS #Код
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS

​🧾 Отступы в CSS - сокращенное свойство

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

Свойство padding является сокращенным свойством для следующих свойств отступа:

padding-top
padding-right
padding-bottom
padding-left

Итак, вот как это работает.

Если свойство padding имеет четыре значения:

padding: 25px 50px 75px 100px;
Отступ сверху 25px
Отступ справа 50px
Отступ снизу 75px
Отступ слева 100px

Пример:

div {
padding: 25px 50px 75px 100px;
}

📂 #CSS #Код
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS

​🧾 Отступ и ширина — CSS margin

CSS свойство width — определяет ширину области содержимого элемента. Область содержимого, это часть находится внутри элементов padding, border и margin (Бокс Модель).

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

В следующем примере элементу <div> присваивается ширина 300px. Однако фактическая отображаемая ширина элемента <div> будет равна 350px (300px + 25px левого отступа + 25px правой отступа):

div {
width: 300px;
padding: 25px;
}

Для того чтобы ширина была 300 пикселей, независимо от количества отступов, вы можете использовать свойство box-sizing. Этот элемент заставляет сохранять свою ширину; если вы увеличиваете отступ, доступное пространство содержимого будет уменьшаться. Вот пример:

div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}

height — Устанавливает высоту элемента
max-height — Устанавливает максимальную высоту элемента
max-width — Устанавливает максимальную ширину элемента
min-height — Устанавливает минимальную высоту элемента
min-width — Устанавливает минимальную ширину элемента
width — Устанавливает ширину элемента

📂 #CSS #Совет
▬▬▬▬▬▬▬▬
\ HowToWebDev

​🧾 CSS - height и width

Установка высоты и ширины

Свойства height и width используются, чтобы установить высоту и ширину элемента.

Свойства height и width могут быть установлены автоматически auto по умолчанию. Означает, что браузер вычисляет высоту и ширину, значение размера указано в px, cm и т.п., или в процентах (%) содержащего блока.

Пример:

 {
   height: 200px;
   width: 50%;
   background-color: powderblue;
}

Примечание: Свойства height и width не содержат отступы, границы и поля; они устанавливают высоту и ширину площадки внутри отступов, границ и полей для элемента!

📂 #CSS #Совет
▬▬▬▬▬▬▬▬
\ HowToWebDev

​🧾 Установка максимальной ширины — CSS

Свойство max-width используется, чтобы установить максимальную ширину элемента.

Свойство max-width может быть указано значение размера в px, cm, т.п., или в процентах (%) из содержащего их блока, или значение none по умолчанию - значит, что нет максимальной ширины.

Проблема с элементом <div> выше происходит, когда окно браузера меньше ширины элемента 500 пикселей. После чего, браузер добавляет горизонтальную полосу прокрутки на странице.

Вместо этого используйте свойство max-width, в данной ситуации улучшает управляемость браузера маленьких окон.

Совет: Изменить окно браузера меньше, чем 500 пикселей в ширину, чтобы увидеть разницу между двумя контейнерами!
Этот элемент имеет высоту 100 пикселей и максимальной шириной 500 пикселей.

Примечание: Значение max-width переопределяет свойство width.

В следующем примере показан элемент <div> высота 100 пикселей и максимальная ширина 500 пикселей:

div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}

📂 #CSS #Совет
▬▬▬▬▬▬▬▬
\ HowToWebDev

​🧾 Синтаксис изображения — HTML

HTML тег <img> — используется для встраивания изображения в веб страницу.

Изображения технически не вставляются на веб-страницу; изображения связаны с веб страницами. Тег <img> создает удерживающее пространство для ссылочного изображения.

Тег <img> пуст, он содержит только атрибуты и не имеет закрывающего тега.

Тег <img> имеет два обязательных атрибута:

src — Указывает путь к изображению
alt — Задает альтернативный текст для изображения

Синтаксис:

<img src="url" alt="альтернативный текст">

📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾 Атрибут src — HTML

Атрибут src — обязательный, указывает путь (URL) к изображению.

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

Пример:

<img src="img_chania.jpg" alt="Цветы в Ханье">

📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev