CSS

Изображения и CSS

меню  

   

   Статьи > Изображения и CSS

Сами по себе каскадные таблицы стилей не используются для помещения на Web-страницы основных изображений. Несмотря ни на что, эта задача выполняется посредством тега <img>. Тем не менее, они применяются для управления основными изображениями, для вставки и управления фоновыми изображениями. Следующая разметка выполняет вставку изображения:

   <img src="demo.gif" alt="demo" id="demoimg" >

CSS можно использовать для изменения размера, определения местоположения и штрихования изображения. Например, вместо значений height и width в HTML можно сделать следующее:

   #demoimg {height: 100рх; width: l00px; }

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

Кроме того, избегая определения базовых настроек выравнивания в HTML, вы можете возложить эту задачу на CSS.

   #demoing {float: left;}

Можно устанавливать поля, пользоваться другими возможностями, но чтобы добиться большей точности, есть возможность позиционирования изображения на странице более специфическими средствами CSS:

   #demoimg {position: absolute; left: l00px; top: 50px; z-index: 3;}

Как видно из последнего правила, можно даже задавать значения z-index и помещать изображения поверх других объектов страницы. Наконец, к некоторым изображениям имеет смысл применять стилевые эффекты наподобие границ:

   #demoimg {border-style: double; border-width: 2px; border-color: orange;}

Большинство этих возможностей можно реализовать средствами HTML, хотя в этом случае исполнение будет менее аккуратным; CSS выделяется теми своими функциями, которые связаны с фоновыми изображениями.


На верх Написать письмо WEB-мастеру Печать Добавить в избранное Cделать стартовой