применение стиля CSS к картинке
Сегодня мы создадим фотогалерею на базе HTML страницы, а навести красоту нам поможет файл style.css.
Приступим! Для начала необходимо создать папку нашего проекта и поместить в нее 9 фотографий с расширением jpg.
Расширение может быть и другим, но для начала лучше будет, чтобы все фото назывались 1.jpg , 2.jpg, 3.jpg… и т.д.
В этой же папке создадим файл фотки.html со следующим содержимым:
<html>
<head>
<title>Как вставить картинку в html</title>
<link rel="stylesheet" href="style.css"> //ссылка на style.css
</head>
<body>
<img src="1.jpg"> //ссылка на фото 1.jpg
<img src="2.jpg">
<img src="3.jpg">
<br>
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
<br>
<img src="7.jpg">
<img src="8.jpg">
<img src="9.jpg">
</body>
</html>Если теперь открыть наш файл с помощью браузера, то мы увидим все наши фотографии в исходных размерах, одну за одной. Порядком и красотой пока не пахнет. Почему? Да потому, что файл style.css который отвечает за красоту еще не создан. Так в чем же дело?Давайте его создадим.
И положим в него вот это:
img{
width:200px; //ширина картинки
height: 200px; //высота картинки
margin: 20px; //отступы от картинки
border-radius: 10%; //закругление
border-width: 10px; //ширина рамки
border-color: red; //цвет рамки
border-style: ridge; //стиль рамкки
box-shadow: 0 0 10px; //тень
}Текст на русском языке после // на программу ни как не влияет, потому что это комментарий. За то он он очень хорошо объясняет какая строчка кода каким образом влияет на внешний вид основного документа фотки.html
Если ты все правильно сделал, то при открытии html страницы картинки выстроятся в три ряда по три картинки в каждом, все он будут одного размера и в рамочке с тенью.
Вуа-ля! Наша фотогалерея готова! Поздравляю!!!