p { height: 200px; width: 300px; } |
Можно задавать ширину и высоту в любых единицах измерения CSS. Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Изза этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow: auto к стилю элемента.
Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <img>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, означает, что рисунок будет растянут на всю ширину вебстраницы. Добавление только одного атрибута width или height сохраняет пропорции и соотношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.
|
|
Фон элемента background
backgroundcolor: #ff0;
backgroundimage: url(img/photo.jpg); backgroundposition: top; (bottom | left | right) backgroundrepeat: repeatx; (repeaty | norepeat) backgroundattachment: fixed;
● backgroundcolor задает цвет фона, который можно задавать любым из трех способов задания цветов.
● backgroundimage используется для того, чтобы в качестве фона можно было установит изображение. Для этого необходимо в значении свойства указать путь к изображению в скобках url.
● backgroundposition указывает где будет располагаться фоновое изображение. Может иметь значения: top, bottom, left, right. backgroundrepeat определяет, нужно ли повторять фоновое изображение. repeatx изображение повторяется по горизонтали, repeaty по вертикали, norepeat изображение не повторяется. По умолчанию у этого свойства установлено значение repeat, что означает, что изображение будет повторяться по горизонтали и по вертикали.
● backgroundattachment определяет, будет ли изображение прокручиваться вместе с содержимым элемента. По умолчанию, оно установлено как scroll, что означает, что изображение будет прокручиваться, а при значении fixed, изображение будет оставаться неподвижным.
Существует короткая форма записи, в которой можно записать все перечисленные значения в одну строку, разделяя значения пробелом. Если пропускать какиелибо значения, то будут подставляться значения по умолчанию.
background: #ff0 url(img/photo.jpg) top repeatx;