WebUniverseРозміщення зображень
Пояснення:
Розмістити зображення у свій сайт можна двома способами:
1. Вставити зображення безпосередньо у свій сайт за допомогою одинарного тегу <img>
2. Вставити зображення як фон тегу розміщеного на сторінці, або фон сторінки в стилізації
Розміщуємо зображення на фон усієї сторінки
Використовуємо атрибут(параметр) background-image.
Використовуємо атрибут(параметр) background-repeat.
Розмір зображення на сторінці
За допомогою атрибутів width та height можна змінити розмір зображення
Вирівнювання картинки відносно тексту
align - розміщуємо зображення відносно тексту за допомогою
left | right | middle | top | bottom
Вирівнювання картинки відносно тексту
align - розміщуємо зображення відносно тексту за допомогою
left | right | middle | top | bottom
Створення рамки для картинки або іншого тегу
Властивості border(малює рамку для тегів) та border-radius(заокгруглює рамку)
Типи рамок для стилізації:
Таблиця:
| № | Тема | Приклад коду | Підсумок |
|---|---|---|---|
| 1 | Вставка зображення за допомогою тегу <img> | | <img> вставляє зображення в HTML. Атрибути: src – шлях до картинки, alt – опис |
| 2 | Розмір зображення (width, height) | | width і height задають ширину і висоту картинки. Якщо вказати один – інший масштабується автоматично. |
| 3 | Вирівнювання зображення (align) | | left – вирівнювання по лівому краю, текст обтікає з правої; right – вирівнювання по правому краю, текст обтікає з лівої; middle – по вертикалі по середині тексту; top – верхній край картинки вирівнюється з верхнім краєм тексту; bottom – нижній край картинки вирівнюється з базовою лінією тексту. |
| 4 | Використання зображення як фон (background-image) | | background-image задає фон для елемента. |
| 5 | Повторення фонового зображення (background-repeat) | | repeat – повторюється по горизонталі і вертикалі; no-repeat – не повторюється; repeat-x – тільки горизонтально; repeat-y – тільки вертикально; space – повторюється стільки разів, скільки вміститься, з рівномірним простором; round – зменшується або збільшується для цілих копій без обрізання. |
| 6 | Рамка зображення (border) | | border задає товщину, стиль і колір рамки. |
| 7 | Заокруглення кутів зображення (border-radius) | | border-radius заокруглює кути у px або % для створення округлих кутів. |
| 8 | Перенос рядка та скидання обтікання (<br clear="all">) | | <br clear="all"> використовується для примусового перенесення тексту нижче елементів, що вирівняні зліва або справа (знімає обтікання). |
build info
- compiler
- 2.0.5.1 · 4054EF9BF6C4510A
- built
- 2026-11-08 14:31:25 UTC