Мои стили оформления цитат:
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 на вашем сайте.
Метки: cite, pre
Добавить комментарий