✅ Атрибут стиля HTML - Список различных атрибутов стиля HTML

Обзор атрибута стиля HTML

Обзор атрибута стиля HTML

Для HTML-кода требуется, чтобы атрибут стиля для веб-страниц отображался в веб-браузерах, таких как Chrome, FireFox, IE, чтобы они отображались так, как они предназначены. Теги HTML могут содержать различную информацию, а атрибут style управляет внешним видом информации, содержащейся в блоках HTML, с использованием встроенного стиля.

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

Список атрибутов стиля HTML

Вот список всех свойств стилей, которые можно использовать для влияния и управления дизайном HTML-элементов, сопровождаемый практическим примером:

1. Цвет фона

С помощью этого свойства CSS мы можем установить цвет фона для любого элемента HTML, например,

и т.п.

пример

`My background is blue`

Выход:

2. Цвет

Цвет шрифта текста в элементе HTML можно контролировать, установив для его атрибута color правильное имя цвета, либо код HEX, либо код RGB.

пример

My font color is blue

Выход:

3. Цвет границы

Мы можем установить цвет рамки любого HTML-элемента, если хотим добавить к нему границу.

пример

Моя граница красная

Выход:

Как видно из кода выше, свойство border принимает 3 свойства в следующем порядке: «Border-width border-style border-color».

4. Фоновое изображение

Мы также можем установить изображение в качестве фона, используя свойство background-image следующим образом:

Пример:

Выход:

5. Фон-Повтор

Как вы видите в приведенном выше примере, когда изображение устанавливается в качестве фона, используя свойство background-image; по умолчанию повторяет изображение как по горизонтали, так и по вертикали. Однако некоторые изображения могут нуждаться в повторении по вертикали или по горизонтали, или их может не потребоваться повторять. Этим поведением можно управлять, задав желаемое значение для свойства background-repeat, и его можно использовать только при использовании background-image, иначе оно не добавит никакого значения стиля при использовании в качестве отдельного свойства.

Значение «repeat-x» используется, чтобы позволить изображению повторяться только по горизонтали.

Значение «repeat-y» используется, чтобы позволить изображению повторяться только по вертикали.

Значение «no-repeat» используется для остановки любого вида повторения фонового изображения.

Давайте изменим приведенный выше пример, чтобы улучшить фоновое изображение.

пример

Выход:

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

6. Фоновая позиция

С помощью этого свойства мы можем определить положение фонового изображения.

пример

Выход:

7. Поля

CSS предоставляет нам свойства для установки полей со всех четырех сторон HTML-элемента, или мы можем добавить поля для определенной стороны элемента.

С помощью margin-top можно добавить поле в верхнюю часть элемента, margin-right добавит поле справа от элемента, margin-left добавит поле слева от элемента, а margin-bottom добавит поле в нижней части элемента. Вместо того, чтобы использовать эти 4 свойства, мы также можем использовать свойство margin и установить его значения согласно нашему требованию.

пример

p ( margin-top: 25px; margin-bottom: 75px; margin-right: 50px; margin-left: 100px; ) or p ( margin: 25px 50px 75px 100px; )

8. Заполнение

Свойство padding определяет пространство между содержимым элемента и его границами. Мы можем использовать свойство «padding» или отдельные свойства padding, такие как padding-top, padding-bottom, padding-left, padding-right, чтобы установить отступы сверху, снизу, слева или справа от содержимого элемента.

p ( padding-top: 25px; padding -bottom: 75px; padding -right: 50px; padding -left: 100px; ) or p ( padding: 25px 50px 75px 100px; )

9. Высота и ширина

Высота и ширина - самые основные свойства CSS, используемые для определения высоты и ширины любого элемента HTML. Для них может быть задано значение в пикселях, например, 200 пикселей, или в процентах, например, 10%, 20% и т. Д.

10. Text-Align

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

p ( text-align: center; ) or p ( text-align: left; ) or p ( text-align: right; )

11. Текст-Украшение

Свойство «Оформление текста» можно использовать для установки декораций, таких как подчеркивание, линейное или наложенное на текст в HTML.

Пример:

Это подчеркивание

Выход:

12. Письмо-интервал

Как следует из названия, это свойство используется для определения расстояния между буквами / символами в слове. Ему может быть назначено положительное или отрицательное значение пикселя для увеличения или уменьшения расстояния между буквами.

Пример:

Мои слова перекрываются

Выход:

13. Линия-Высота

Высота линии определяет расстояние между вертикальными линиями. Подобно межбуквенному интервалу, высота строки также может быть установлена в положительное или отрицательное значение пикселя. Давайте рассмотрим пример ниже, чтобы лучше понять:

Пример:

Этот абзац имеет небольшую высоту строки.
Этот абзац имеет небольшую высоту строки.

Выход:

14. Направление текста

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

Пример:

Я справа налево

Выход:

15. Текст Тень

Это свойство добавляет тень к тексту.

Пример:

У меня серая тень

Выход:

16. Font Family

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

Стиль шрифта: с помощью свойства стиля шрифта мы можем добавить курсив или наклонный эффект к тексту.

Пример:

Это косой стиль.

Выход:

Вес шрифта: это свойство определяет вес шрифта.

Пример:

Это жирный абзац

Выход :

Атрибуты стиля, представленные выше наших строительных блоков с UI и UX проектированием. Они продолжают развиваться по мере появления новых версий CSS.

Атрибут стиля HTML - Список различных атрибутов стиля HTML