Как тут правильно вынести стили из HTML в отдельный файл стилей ?
Всем привет. Нашел в инете нужный мне пример показа и скрытия изображений через определенные промежутки времени и с определенной длительностью показа. Хочу вынести стили изображений из HTML в отдельный файл стилей. Не получается вынести стили картинок, которые появляются и исчезают. Код YTML
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Плавное появление и исчезновение изображений</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<style>
.myImg {
display: none; /* Скрыть изображение по умолчанию */
transition: opacity 2s; /* Плавное изменение прозрачности за 2 сек */
</style>
<body>
<<div class="container">
<div class="image-stack">
<img class="green" src="pictures/зеленый.png">
<img class="black" src="pictures/черный.png">
<img <img style="margin-top: -32.8em;margin-left: 25em;transform: scale(0.5);" class="myImg" src="pictures/роза.png" alt="Роза" data-appear-time="2000" data-disappear-time="15000">
<img <img style="margin-top: -32.8em;margin-left: -45em;transform: scale(0.8);" class="myImg" src="pictures/brevno.gif" alt="Бревно" data-appear-time="4000" data-disappear-time="7000">
<img <img style="margin-top: -32.8em;margin-left: -15em;transform: scale(0.5);" class="myImg" src="pictures/лютик.png" alt="Лютик" data-appear-time="6000" data-disappear-time="9000">
</div>
<script>
const images = document.querySelectorAll('.myImg');
function showImages() {
images.forEach(img => {
const appearTime = img.getAttribute('data-appear-time');
const disappearTime = img.getAttribute('data-disappear-time');
setTimeout(() => {
img.style.display = 'inline'; // Показать изображение
img.style.opacity = 1; // Установить полную непрозрачность
setTimeout(() => {
img.style.opacity = 0; // Установить прозрачность на 0
}, disappearTime - appearTime); // Изменить прозрачность через указанное время
}, appearTime); // Появиться через указанное время
});
}
window.onload = showImages; // Вызвать функцию showImages после загрузки страницы
</script>
</body>
</html>
Это стили, которые я пытаюсь сделать
body {
margin: 0;
}
.container {
width: 100%;
margin: 0 auto;
max-width: 1064px;
}
.image-stack::after {
content: ' ';
display: table;
clear: both;
}
.green {
float: left;
z-index: -1; // говорит браузеру сделать это изображение сверху
}
.black {
float: left;
z-index: -1; // говорит браузеру сделать это изображение сверху
}
.myImg {
float: left;
z-index: 2;
}
.brevno {
float: left;
z-index: 2;
}
.roza {
float: left;
z-index: 2;
}
.lutik {
float: left;
z-index: 2;
}
@supports (display: grid) {
.image-stack {
display: grid;
position: relative; // необходимо, чтобы перекрытие работало
grid-template-columns: repeat(12, 1fr);
}
.myImg {
display: none; /* Скрыть изображение по умолчанию */
transition: opacity 2s; /* Плавное изменение прозрачности за 2 сек */
}
.green {
width: 1064px;
height: 510px;
grid-column: 4 / -1;
grid-row: 1;
margin-top: 9em;
margin-left: 0em;
}
.black {
grid-column: 4 / -1;
grid-row: 1;
margin-top: 6.2em;
margin-left: 0em;
}
.brevno {
grid-row: 1;
grid-column: 1;
transform: scale(0.8);
position: relative;
margin-top: 32em;
margin-left: -45em;
display:none;
}
.roza {
grid-row: 1;
grid-column: 1;
transform: scale(0.8);
position: relative;
margin-top: -32em;
margin-left: -45em;
}
.lutik {
grid-row: 1;
grid-column: 1;
transform: scale(0.8);
position: relative;
margin-top: -32em;
margin-left: -15em;
}
.green и .black отображаются правильно, а всё остальное не отображается. Что делаю не так? С подобными вариантами дел не имел. Во вложении файл со стилями в HTML. И попутно вопрос, не для этого раздела, но может кто-то подскажет решение. Надо сделать так, чтобы появление картинок происходило плавно, как и их скрытие. Появление картинок, так сказать резким скачком, а исчезновение плавное. Всем спасибо. |
У вас чего т о не хватает
Есть два div (с лишней <) <<div class="container"> <div class="image-stack"> Но только один </div> Не нашел закрывающей скобки для
@supports (display: grid) {
Браузер наверно тоже не нашел. |
Спасибо за найденные ошибки. < в HTML убрал. Сделал так.
body {
margin: 0;
}
.container {
width: 100%;
margin: 0 auto;
max-width: 1064px;
}
.image-stack::after {
content: ' ';
display: table;
clear: both;
}
.green {
float: left;
z-index: -1; // говорит браузеру сделать это изображение сверху
}
.black {
float: left;
z-index: -1; // говорит браузеру сделать это изображение сверху
}
.myImg {
float: left;
z-index: 2;
}
.brevno {
float: left;
z-index: 2;
}
.roza {
float: left;
z-index: 2;
}
.lutik {
float: left;
z-index: 2;
}
@supports (display: grid) {
.image-stack {
display: grid;
position: relative; // необходимо, чтобы перекрытие работало
grid-template-columns: repeat(12, 1fr);
}
}
.myImg {
display: none; /* Скрыть изображение по умолчанию */
transition: opacity 2s; /* Плавное изменение прозрачности за 2 сек */
}
.green {
width: 1064px;
height: 510px;
grid-column: 4 / -1;
grid-row: 1;
margin-top: 9em;
margin-left: 0em;
}
.black {
grid-column: 4 / -1;
grid-row: 1;
margin-top: 6.2em;
margin-left: 0em;
}
.brevno {
grid-row: 1;
grid-column: 1;
transform: scale(0.8);
position: relative;
margin-top: 32em;
margin-left: -45em;
display:none;
}
.roza {
grid-row: 1;
grid-column: 1;
transform: scale(0.8);
position: relative;
margin-top: -32em;
margin-left: -45em;
}
.lutik {
grid-row: 1;
grid-column: 1;
transform: scale(0.8);
position: relative;
margin-top: -32em;
margin-left: -15em;
}
но всеравно не хочет работать. |
Вроде все отображается (из вашего zip). Правда не знаю правильно или нет, т.к не знаю, как должно)
Единственное, что у вас в стилях есть
.brevno {
grid-row: 1;
grid-column: 1;
transform: scale(0.8);
position: relative;
margin-top: 32em;
margin-left: -45em;
display:none;
}
.roza {
grid-row: 1;
grid-column: 1;
transform: scale(0.8);
position: relative;
margin-top: -32em;
margin-left: -45em;
}
.lutik {
grid-row: 1;
grid-column: 1;
transform: scale(0.8);
position: relative;
margin-top: -32em;
margin-left: -15em;
}
Но я не нашел элементов с такими классами |
Спасибо за участие, в том -то и проблема, что я не знаю, как отдельном файле со стилями представить вот эти картинки
<img <img style="margin-top: -32.8em;margin-left: 25em;transform: scale(0.5);" class="myImg" src="pictures/роза.png" alt="Роза" data-appear-time="2000" data-disappear-time="15000"> <img <img style="margin-top: -32.8em;margin-left: -45em;transform: scale(0.8);" class="myImg" src="pictures/brevno.gif" alt="Бревно" data-appear-time="4000" data-disappear-time="7000"> <img <img style="margin-top: -32.8em;margin-left: -15em;transform: scale(0.5);" class="myImg" src="pictures/лютик.png" alt="Лютик" data-appear-time="6000" data-disappear-time="9000"> Стили из html я убираю и переношу в отдельный файл. А как в этом отдельном файле этим картинкам присвоить перенесённые стили? Названия стилей ,brevo, roza, lutik написаны просто для того, чтобы знать куда вставлять правильные данные этих трех картинок. Или я что-то не понимаю и неправильно делаю? Во Вложенном файле всё работает, по тому что от него работают только данные для картинок <img class="green" src="pictures/зеленый.png"> <img class="black" src="pictures/черный.png"> , а для картинок brevno, roza и lutik стили работают, те что прописаны в HTML. |
| Часовой пояс GMT +3, время: 16:34. |