Осваиваем искусство сброса стилей

Сбросить все стили

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

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

Введение

В этом практическом занятии мы изучим концепцию сброса всех стилей до значений по умолчанию с использованием свойства all. В конце практического занятия вы четко поймете, как использовать это свойство для сброса всех стилей, как унаследованных, так и не унаследованных, до их исходных значений. Это позволит вам быстро и легко сбросить оформление элемента, не нужно каждый раз отдельно сбрасывать каждое свойство.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") subgraph Lab Skills css/selectors -.-> lab-35233{{"Сбросить все стили"}} end

Сбросить все стили

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

Для сброса всех стилей до их значений по умолчанию используйте свойство all. Это свойство не повлияет на свойства direction и unicode-bidi. Вот пример того, как им пользоваться:

<div class="reset-all-styles">
  <h5>Title</h5>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id
    exercitationem nulla qui repellat laborum vitae, molestias tempora velit
    natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?
  </p>
</div>

.reset-all-styles {
  all: initial;
}

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

Резюме

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