Ширина и высота: width и height

p { height​:​ ​200px; width​:​ ​300px; }

 

Можно задавать ширину и высоту в любых единицах измерения CSS. Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из­за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow: auto к стилю элемента.

Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <img>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, означает, что рисунок будет растянут на всю ширину веб­страницы. Добавление только одного атрибута width или height сохраняет пропорции и соотношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

Фон элемента ­ background

background​­​color​:​ ​#ff0;

background​­​image​:​ url​(​img​/​photo​.​jpg​); background​­​position​:​ top​;​ ​(​bottom ​|​ left ​|​ right) background​­​repeat​:​ repeat​­​x​;​ ​(​repeat​­​y ​|​ ​no​­​repeat) background​­​attachment​:​ ​fixed;

 

● background­color ­ задает цвет фона, который можно задавать любым из трех способов задания цветов. 

● background­image используется для того, чтобы в качестве фона можно было установит изображение. Для этого необходимо в значении свойства указать путь к изображению в скобках url. 

● background­position ­ указывает где будет располагаться фоновое изображение. Может иметь значения: top, bottom, left, right. background­repeat определяет, нужно ли повторять фоновое изображение. repeat­x ­ изображение повторяется по горизонтали, repeat­y ­ по вертикали, no­repeat ­ изображение не повторяется. По умолчанию у этого свойства установлено значение repeat, что означает, что изображение будет повторяться по горизонтали и по вертикали. 

● background­attachment ­ определяет, будет ли изображение прокручиваться вместе с содержимым элемента. По умолчанию, оно установлено как scroll, что означает, что изображение будет прокручиваться, а при значении fixed, изображение будет оставаться неподвижным. 

Существует короткая форма записи, в которой можно записать все перечисленные значения в одну строку, разделяя значения пробелом. Если пропускать какие­либо значения, то будут подставляться значения по умолчанию.

background​:​ ​#ff0 url(img/photo.jpg) top repeat­x;

 


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: