Атрибут стилю HTML - Список різних атрибутів стилю HTML

Огляд атрибутів стилю HTML

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

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

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

Ось список усіх властивостей стилю, за допомогою яких можна впливати та керувати дизайном елементів HTML, що супроводжується практичним прикладом:

1. Колір фону

За допомогою цього властивості CSS ми можемо встановити колір фону для будь-якого елемента HTML, наприклад,

тощо.

Приклад

`My background is blue`

Вихід:

2. Колір

Колір шрифту тексту в HTML-елементі можна керувати, встановивши його атрибут кольору на ім'я потрібного кольору або HEX-код або RGB-код.

Приклад

My font color is blue

Вихід:

3. Колір кордону

Ми можемо встановити колір межі будь-якого елемента HTML, якщо ми хочемо додати до нього рамку.

Приклад

Мій кордон червоний

Вихід:

Як ви бачите у наведеному вище коді, властивість border приймає 3 властивості у такому порядку: "Колір межі у стилі кордону".

4. Фон-зображення

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

Приклад:

Вихід:

5. Передумови - повторіть

Як ви бачите у наведеному вище прикладі, коли зображення встановлюється як фон із використанням властивості background-image; воно за замовчуванням повторює зображення як горизонтально, так і вертикально. Однак деякі зображення, можливо, потрібно буде повторити вертикально або горизонтально, або вони можуть не знадобитися для повторення. Такою поведінкою можна керувати, встановивши потрібне значення щодо властивості background-повтору, і воно може бути використане лише тоді, коли фонове зображення використовується в іншому випадку, воно не додасть значення стилізації, якщо воно використовується як окрема властивість.

Значення "повторити-х" використовується для того, щоб зображення можна було повторити лише горизонтально.

Значення "повторити-у" використовується для того, щоб зображення можна було повторити лише вертикально.

Значення "неповторне" використовується для зупинки будь-якого типу повторення фонового зображення.

Давайте змінимо вищенаведений приклад, щоб покращити фонове зображення.

Приклад

Вихід:

Ми можемо порівняти наведені вище приклади і зрозуміти, що за допомогою фонового зображення ми можемо додати зображення як тло, а з фоновим повтором, ми можемо контролювати повторення фонового зображення.

6. Фон-позиція

За допомогою цього властивості ми можемо визначити положення фонового зображення.

Приклад

Вихід:

7. Поля

CSS надає нам властивості встановлювати поля на всіх чотирьох сторонах елемента HTML або ми можемо додати поля до певної сторони елемента.

Якщо маржа-топ може додати поле до верхньої частини елемента, маржа-праве додасть поле праворуч від елемента, маржа-ліворуч додасть поле зліва від елемента, а поле-нижнє додасть поле донизу елемента. Замість використання цих 4 властивостей ми також можемо використовувати властивість маржі та встановлювати її значення відповідно до нашої вимоги.

Приклад

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

8. Оббивка

Властивість 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. Текст-вирівнювання

Ця властивість використовується для встановлення горизонтального напрямку, у якому ми хотіли б вирівняти текст елемента. Значення можна встановити на центр, праворуч або ліворуч.

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

11. Текст-прикраса

Властивість декорування тексту може бути використана для встановлення декорацій, таких як підкреслення, перехід рядка або накладання тексту над текстом у HTML.

Приклад:

Це підкреслюється

Вихід:

12. Пробіл літер

Як випливає з назви, ця властивість використовується для визначення інтервалу між літерами / символами слова. Для збільшення або зменшення інтервалу між літерами може бути призначене додаткове або негативне значення пікселя.

Приклад:

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

Вихід:

13. Лінія-висота

Висота лінії визначає відстань між вертикальними лініями. Як і міжрядковий інтервал, і для висоти рядка також можна встановити додатне або негативне значення пікселя. Розглянемо приклад нижче, щоб зрозуміти краще:

Приклад:

Цей абзац має невелику висоту рядка.
Цей абзац має невелику висоту рядка.

Вихід:

14. Напрямок тексту

Іноді, якщо вміст веб-сторінки не англійською мовою, а якоюсь іншою мовою, наприклад арабською, яка слідує правому на лівий конвент, нам потрібно буде змінити напрямок тексту. У таких випадках ми можемо змінити напрямок тексту.

Приклад:

Я праворуч ліворуч

Вихід:

15. Текст Тінь

Ця властивість додає тінь тексту.

Приклад:

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

Вихід:

16. Сімейство шрифтів

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

Стиль шрифту: За допомогою властивості стилю шрифту ми можемо додати курсив або косий ефект до тексту.

Приклад:

Це косий стиль.

Вихід:

Вага шрифту: ця властивість визначає вагу шрифту.

Приклад:

Це жирний абзац

Вихід:

Атрибути стилізації, викладені над нашими будівельними блоками з дизайном інтерфейсу та UX. Вони продовжують розвиватися в міру впровадження нових версій CSS.

Атрибут стилю HTML - Список різних атрибутів стилю HTML

Зміст: