HTML, Excel, Word, SEOОсновы CSS ⇒ Форматирование картинок

Основы CSS

Учебник CSS
· Что такое CSS?
· Структура html-страницы
· Шрифт: размер и гарнитура
· Выравнивание и пробелы
· Начертание шрифта
· Оформление ссылок
· Форматирование списков
· Классы
· Изображения
· Справочник атрибутов CSS

Более полно и подробно каскадные стили CSS3 рассмотрены в разделе "Основы CSS3".


 
Сабмит сайта в каталоги

Форматирование картинок


Изображения являются очень мощным средством повышения эффективности веб-страницы (если, конечно, с умом ими пользоваться). Правильно отформатированная картинка значительно повышает читабельность и наглядность информации, представленной на сайте.


Используйте атрибуты размера картинки: height, width. Они задают высоту и ширину картинки и браузер при загрузке веб-страницы "знает" сколько места нужно отвести под изображение. Если эти данные не указать, то при загрузке страницы будет происходить "тряска" страницы, пока она полностью не загрузится.


Не пренебрегайте атрибутом alt, который содержит текстовое описание картинки. Сейчас этот атрибут очень активно используется поисковыми системами для поиска по изображениям. Если правильно описать картинку, то можно получить дополнительный приток посетителей, которые просматривают изображения с сайтов (а таких становится все больше и больше).


В теге картинки <img> можно задавать при помощи атрибута border толщину рамки вокруг картинки. Но гораздо более гибкое оформление рамки изображений дает CSS:


Пример использования border в картинках: Пример №13

HTML-код страницы:


CSS файл:



CSS позволяет определять отдельные элементы рамок:

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


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

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


CSS файл:



Как видите, любые форматирования рамок можно комбинировать, чтобы одновременно форматировать несколько рамок. Обратите внимание на класс img2 - в котором сначала заданы базовые значения для всех сторон рамки, а потом указано форматирование для сторон, где оно отличается от основного.



В начало страницы



В начало страницы