В документе HTML мы только определяем, что на сайте в каком-то месте будет изображение, а размер изображения, его координаты на сайте, рамку и обтекание текста будут прописываться в файле style.css.
Размер изображения.
Чтобы понять нагляднее, создайте два файла index.html и style.css.
В файле index.html элементарно пропишем путь к картинке, как мы это делали в прошлом уроке.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel= "stylesheet" type= "text/css" href= "style.css" />
<title>Изображения</title>
</head>
<body>
<img src="images/img1.jpg">
</body>
</html>
А в файле style.css задаём размер.
Размер изображения можно задать в пикселях, тогда он (размер) будет фиксированным, и в процентах, тогда он будет резиновым. При этом, если мы указываем только ширину, то высота выставляется автоматически, зависимо от пропорций изображения.
img {
width: 300px;
}
Если мы укажем высоту, то автоматически выставится ширина изображения.
img {
height: 150px;
}
Ну а если мы укажем и высоту и ширину, то изображение будет иметь те размеры, которые мы указали.
img {
width: 300px;
height: 150px;
}
Рамка изображения.
Рамку для изображения можно сделать с помощью свойства border.
Рамке можно задать толщину, стиль и цвет (как мы делали рамку для таблицы).
img {
width: 300px;
height: 150px;
border: 1px solid #000;
}
Закруглённые углы.
Для закругления углов используется свойство border-radius.
img {
width: 300px;
height: 150px;
border: 1px solid #000;
border-radius: 10px;
}
Тень от изображения.
Чтобы создать эффект тени, используется свойство box-shadow.
Первое значение - это сдвиг тени по оси X.
Второе значение – это сдвиг тени по оси Y.
Третье значение – размытие тени. Если этот параметр не указывается, то по умолчанию тень не будет размытой.
Четвёртое значение – растяжение тени. По умолчанию тень того же размера, что и элемент.
Пятое значение – цвет тени. Цвет тени можно задать как в RGB-формате так и в RGBA-формате. По умолчанию цвет чёрный.
img {
width: 300px;
height: 150px;
border: 1px solid #000;
border-radius: 10px;
box-shadow:5px 5px 10px #2B1015;
}
Обтекание изображения текстом.
Для наглядности в index.html добавьте текст.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel= "stylesheet" type= "text/css" href= "style.css" />
<title>Изображения</title>
</head>
<body>
<img src="images/img1.jpg">
<p>Это текст, который обтекает изображение справа.</p>
<p>Для наглядности напишем несколько абзацев</p>
<p>Абзац первый</p>
<p>Абзац второй</p>
<p>Абзац третий</p>
<p>А этот абзац обтекает изображение уже снизу.</p>
</body>
</html>
Если мы хотим, чтобы изображение располагалось слева, а текст обтекал его справа, используем свойство float , значением которого будет left.
А для того, чтобы текст не прилипал к изображению, используем свойство margin-right.
img {
width: 300px;
height: 150px;
border: 1px solid #000;
border-radius: 10px;
box-shadow:5px 5px 10px #2B1015;
float: left;
margin-right: 20px;
}
Изображения в качестве фона.
Чтобы использовать изображение в качестве фона для всей страницы, используем свойство background для селектора html. В значении прописываем путь к изображению. Правилом хорошего тона является вместе с изображением задавать ещё и цвет фона на случай, если картинка вдруг не загрузится.
html {
background: #D2BFB0 url(images/img1.jpg);
}
Повторяемость фонового изображения.
По умолчанию фоновое изображение повторяется как по горизонтали так и по вертикали. Чтобы это отменить для свойства background пишем значение no-repeat.
html {
background: #D2BFB0 url(images/img1.jpg) no-repeat;
}
Чтобы картинка повторялась только по горизонтали, пишем:
background: repeat-x;
по вертикали:
background: repeat-y;
Расположение фонового изображения.
Картинка в левом верхнем углу: background: left top;
В правом верхнем углу: background: right top;
В левом нижнем углу: background: left bottom;
В правом нижнем углу: background: right bottom;
По центру: background: center;
По центру вверху: background: center top;
По центру внизу: background: center bottom;
Фиксация фонового изображения.
По умолчанию фоновое изображение прокручивается вместе с контентом.
Чтобы его зафиксировать, свойству background задаём значение fixed.
html {
background: #D2BFB0 url(images/img1.jpg) no-repeat center fixed;
} | 
