Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.03.2024, 09:05
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 77

Как тут правильно вынести стили из 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. И попутно вопрос, не для этого раздела, но может кто-то подскажет решение. Надо сделать так, чтобы появление картинок происходило плавно, как и их скрытие. Появление картинок, так сказать резким скачком, а исчезновение плавное. Всем спасибо.
Вложения:
Тип файла: zip Из инета.zip (490.8 Кб, 1 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 31.03.2024, 11:16
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,698

У вас чего т о не хватает
Есть два div (с лишней <)
<<div class="container">
  <div class="image-stack">

Но только один
</div>


Не нашел закрывающей скобки для
@supports (display: grid) {

Браузер наверно тоже не нашел.
Ответить с цитированием
  #3 (permalink)  
Старый 31.03.2024, 12:24
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 77

Спасибо за найденные ошибки. < в 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;
}

но всеравно не хочет работать.

Последний раз редактировалось III, 31.03.2024 в 12:37.
Ответить с цитированием
  #4 (permalink)  
Старый 31.03.2024, 17:49
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,698

Вроде все отображается (из вашего 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;
}

Но я не нашел элементов с такими классами
Ответить с цитированием
  #5 (permalink)  
Старый 31.03.2024, 18:41
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 77

Спасибо за участие, в том -то и проблема, что я не знаю, как отдельном файле со стилями представить вот эти картинки
<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.

Последний раз редактировалось III, 31.03.2024 в 19:15.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно добавить в javascript несколько стилей css? trixter5 Javascript под браузер 3 04.04.2013 23:20
как правильно отслеживать вставку html() bombascter jQuery 15 20.11.2012 09:47
как правильно подключить файл? betonka Events/DOM/Window 10 10.04.2011 21:53
Как правильно послать XML в POST запросе LowCoder AJAX и COMET 10 15.07.2009 23:20