1. Атрибут style у тега

Ось іще кілька корисних речей про HTML. Після того як веб почав набирати популярності, зростав і попит на те, щоб вебсторінки були оформлені гарно (або дуже гарно). Цю проблему вирішили за допомогою атрибуту style.

Загальний вигляд цього атрибуту має такий формат:


        <tag style="name=value;name2=value2;nameN=valueN">

Як значення атрибута style через крапку з комою перераховуються всі «стилі», які потрібно застосувати до тега.

Вебінар JavaRush

Припустимо, ти хочеш відобразити картинку у вигляді квадрата 100х100, а також зробити її напівпрозорою. Для цього потрібно додати до неї спеціальні стилі:

  • width = 100px;
  • height = 100px;
  • opacity = 0.5;

Тоді HTML-код з цією картинкою набуде вигляду:


       <img src="logo.png" style="width=100px;height=100px;opacity=0.5">

Стилів є сотні, якщо не тисячі. І розробники браузерів постійно вигадують нові. Добре, що ти навчаєшся на Java-розробника, а не на верстальника :)

2. Популярні CSS-стилі

Навряд чи ти у своєму житті писатимеш багато HTML-коду або виправлятимеш його стилі, але все може статися. Наприклад, ти пишеш пару невеликих HTML-сторінок, щоб протестувати свій API. Тому знання основних стилів HTML можуть бути корисними.

Нижче – 10 найпоширеніших стилів для backend-розробників:

# Ім'я приклад Опис
1 width width: 100px ширина елемента в пікселях
2 height height: 50% висота елемента у відсотках (від ширини батька)
3 display display: none відображення елемента (не відображати елемент)
4 visibility visibility: hidden видимість елемента (елемент прихований, але місце під нього резервується)
5 color color: red; колір тексту
6 background-color background-color: smoke; колір фону
7 border Border: 1px solid black; рамка (ширина 1px, колір чорний, суцільна лінія)
8 font font: verdana 10pt шрифт: verdana, розмір 10pt
9 text-align text-align: center; вирівнювання тексту по горизонталі
10 margin margin:2px відступ зовні елемента

Тобі не потрібно запам'ятовувати ці теги – все є в інтернеті. Тим паче, кожен «стиль» має свій набір допустимих значень і свій формат опису значення. Подивися хоча б на border або font.