Цвет текста — CSS

Вы можете установить цвет текста. Для примера возьмём три текста, значение которых нам не важно:

Привет Мир

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Пример:

<h1 style="color:Tomato;">Привет Мир</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Результат тут.

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

📓 #CSS #код

Фоновое изображение — CSS

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

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

Пример.

Фоновое изображение для всей веб страницы можно установить следующим образом:

body {
background-image: url("paper.gif");
}


А этот пример показывает, что плохая комбинация текста и фонового изображения. Текст едва читается:

body {
background-image: url("bgdesert.jpg");
}

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

Примечание: При использовании фонового изображения используйте изображение, которое не нарушает текст.

📓 #CSS #код

​Повторение фона/background-repeat — CSS

По умолчанию свойство background-image повторяет изображение как по горизонтали, так и по вертикали.

Некоторые изображения следует повторять только по горизонтали а некоторые по вертикали, иначе они будут выглядеть странно, вот так.

Пример:

Ссылка на код

Совет: Чтобы повторить изображение по вертикали, установите свойство background-repeat: repeat-y;

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

📓 #CSS #Код

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

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

Пример:

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

Ссылка на код

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

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

📓 #CSS #Код

​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 - Заголовки №2

Большие заголовки

Каждый HTML заголовок имеет размер по умолчанию. Однако вы можете указать размер для любого заголовка с атриутом style, используя CSS свойство font-size.

Пример:

Ссылка на код

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