Настройка кавычек с использованием CSS

Стилизованные кавычки

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

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

Введение

В этом практическом занятии мы изучим свойство quotes в CSS, которое позволяет нам настраивать кавычки, используемые для встроенных цитат. Мы узнаем, как использовать это свойство для определения собственных символов открывающей и закрывающей кавычек и применить их к элементам <q> в нашем HTML. В конце этого практического занятия вы будете лучше понимать, как добавить индивидуальный стиль в оформление своих веб-страниц.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") subgraph Lab Skills css/selectors -.-> lab-35245{{"Стилизованные кавычки"}} end

Стилизованные кавычки

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

Для настройки встроенных кавычек измените свойство quotes внутри элемента <q>.

Например:

<p><q>Do or do not, there is no try.</q> – Yoda</p>

можно оформить в виде кавычек-кареток с использованием CSS:

q {
  quotes: "“" "”";
}

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

Резюме

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