Мои стили оформления цитат:
blockquote { position: relative; margin: 1.5em 0; padding: 0.5em 1em; font-style: italic; background-color: #f9f9f9; /* Светлый фон для цитаты */ border-left: 5px solid #ccc; /* Полоса слева */ quotes: "“" "”" "‘" "’";
}
blockquote::before { content: open-quote; font-size: 2em; color: #ccc; /* Цвет кавычек */ position: absolute; left: -10px; top: -10px;
}
blockquote::after { content: close-quote; font-size: 2em; color: #ccc; /* Цвет кавычек */ position: absolute; right: -10px; bottom: -10px;
}
blockquote p { display: inline;
}
blockquote cite { display: block; margin-top: 0.5em; font-style: normal; text-align: right; color: #555;
}Описание:
blockquote:
position: relative; — устанавливает позицию цитаты, чтобы можно было разместить кавычки относительно неё.
margin и padding — добавляют отступы вокруг и внутри цитаты.
font-style: italic; — делает текст цитаты курсивом.
background-color — задаёт светлый фон цитате.
border-left — добавляет вертикальную полосу слева от цитаты.
quotes — определяет символы кавычек.
blockquote::before и blockquote::after:
content: open-quote; и content: close-quote; — вставляют кавычки перед и после цитаты.
font-size: 2em; — увеличивает размер кавычек.
color — определяет цвет кавычек.
position: absolute; — позволяет размещать кавычки относительно блока цитаты.
blockquote p:
display: inline; — устраняет отступы между абзацами внутри цитаты.
blockquote cite:
Отвечает за стилизацию источника цитаты, делает его выравненным по правому краю и нормализует шрифт.
Вы можете добавить этот CSS в файл стилей вашей темы или в секцию «Дополнительные стили» в кастомайзере WordPress. После этого ваши цитаты будут отображаться с кавычками и полосой сбоку.
Вот пример CSS для стилизации тега pre в WordPress:
pre { background-color: #f4f4f4; /* Светло-серый фон */ color: #333; /* Цвет текста */ padding: 15px; /* Внутренний отступ */ border: 1px solid #ccc; /* Граница */ border-radius: 5px; /* Скругленные углы */ overflow-x: auto; /* Добавляет горизонтальную прокрутку при необходимости */ font-family: 'Courier New', Courier, monospace; /* Моноширинный шрифт */ font-size: 14px; /* Размер текста */ line-height: 1.5; /* Высота строки */
}
pre code { background-color: transparent; /* Убирает фон */ padding: 0; /* Убирает внутренние отступы */ color: inherit; /* Наследует цвет текста */ font-size: inherit; /* Наследует размер текста */ font-family: inherit; /* Наследует шрифт */
}Описание:
pre:
background-color: #f4f4f4; — задает светло-серый фон для блока с кодом.
color: #333; — определяет цвет текста (темно-серый).
padding: 15px; — добавляет отступы внутри блока.
border: 1px solid #ccc; — добавляет границу вокруг б
лока.
border-radius: 5px; — скругляет углы блока.
overflow-x: auto; — добавляет горизонтальную прокрутку, если текст не помещается в блок.
font-family: ‘Courier New’, Courier, monospace; — использует моноширинный шрифт для отображения кода.
font-size: 14px; — задает размер текста в блоке.
line-height: 1.5; — устанавливает высоту строки, чтобы текст был более читаемым.
pre code:
Этот блок используется для стилизации вложенного тега code внутри /code
pre.
background-color: transparent; — убирает фон для текста внутри тега code.
padding: 0; — убирает любые внутренние отступы.
color: inherit; — наследует цвет текста от тега /code /pre
.
font-size: inherit; — наследует размер шрифта от тега pre
font-family: inherit; — наследует шрифт от тега pre
Вы можете добавить этот CSS в файл стилей вашей темы или в раздел «Дополнительные стили» в кастомайзере WordPress, чтобы применить стилизацию к тегу
pre на вашем сайте.