Css робота з картинками (зображеннями)

Зображення є дуже потужним засобом підвищення ефективності веб-сторінки (якщо, звичайно, з розумом ними користуватися). Правильно відформатована картинка значно підвищує Новомосковскбельность і наочність інформації, представленої на сайті.

Використовуйте атрибути розміру картинки: height, width. Вони задають висоту і ширину картинки і браузер при завантаженні веб-сторінки "знає" скільки місця потрібно відвести під зображення. Якщо ці дані не вказати, то при завантаженні сторінки буде відбуватися "тряска" сторінки, поки вона повністю не завантажиться.

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

У тезі картинки можна задавати за допомогою атрибута border товщину рамки навколо картинки. Але набагато більш гнучке оформлення рамки зображень дає CSS:

none - без рамки;
hidden - невидима рамка;
dotted - точкова рамка;
dashed - штрихова рамка;
solid - лінія;
double - подвійна лінія;
groove - контур рамки заглиблений (3D-ефект);
ridge - контур рамки виступає (3D-ефект);
inset - внутрішня поверхня рамки заглиблена (3D-ефект);
outset - внутрішня поверхня рамки виступає (3D-ефект).

Приклад використання border в картинках: Приклад №13

CSS дозволяє визначати окремі елементи рамок:

border-top - верх рамки;
border-bottom - низ рамки;
border-right - правий бік рамки;
border-left - ліва сторона рамки.

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

Приклад використання окремих сторін border в картинках: Приклад №14

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

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