Основы CSS для визуально привлекательных веб-страниц

CSSCSSBeginner
Практиковаться сейчас

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом практическом занятии мы изучим основы программирования на CSS (Cascading Style Sheets). В рамках практического занятия будут рассмотрены основы синтаксиса CSS, селекторы, свойства и значения. По завершении практического занятия у вас будет твердый фундамент в программировании на CSS и вы сможете создавать визуально привлекательные веб-страницы.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/DynamicStylingGroup -.-> css/animations("Animations") css/CSSPreprocessorsGroup -.-> css/mixins("Mixins") subgraph Lab Skills css/selectors -.-> lab-35168{{"Основы CSS для визуально привлекательных веб-страниц"}} css/display_property -.-> lab-35168{{"Основы CSS для визуально привлекательных веб-страниц"}} css/animations -.-> lab-35168{{"Основы CSS для визуально привлекательных веб-страниц"}} css/mixins -.-> lab-35168{{"Основы CSS для визуально привлекательных веб-страниц"}} end

Альтернативный текст

В ВМ уже предоставлены index.html и style.css.

Для создания анимации сменяющегося текста следуйте шагам:

  1. Создайте элемент <span> с классом "alternating" и идентификатором "alternating-text", чтобы хранить текст, который будет меняться:
<p>I love coding in <span class="alternating" id="alternating-text"></span>.</p>
  1. В CSS определите анимацию под названием alternating-text, которая будет скрывать элемент <span>, установив display: none:
.alternating {
  animation-name: alternating-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes alternating-text {
  90% {
    display: none;
  }
}
  1. В JavaScript определите массив различных слов, которые будут меняться, и используйте первое слово для инициализации содержимого элемента <span>:
const texts = ["Java", "Python", "C", "C++", "C#", "Javascript"];
const element = document.getElementById("alternating-text");

let i = 0;
element.innerHTML = texts[0];
  1. Используйте EventTarget.addEventListener() для определения слушателя событий для события 'animationiteration'. Это вызовет обработчик событий каждый раз, когда завершается итерация анимации. В обработчике событий используйте Element.innerHTML, чтобы отобразить следующий элемент в массиве texts в качестве содержимого элемента <span>:
const listener = (e) => {
  i = i < texts.length - 1 ? i + 1 : 0;
  element.innerHTML = texts[i];
};

element.addEventListener("animationiteration", listener, false);

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по Альтернативному тексту. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.