Для цитат есть специальные теги, советую использовать именно их: страница будет чуть понятнее поисковым роботам и программам чтения с экрана.
Цитаты внутри текста
Пример: Аркадий Мильчин и Людмила Чельцова. Справочник издателя и автора
Цитаты внутри текста верстают тегом q. Тег оборачивает содержимое в кавычки. Советуем сразу отключить это в ЦСС и расставлять кавычки вручную. Так проще работать с вложенными кавычками: когда внутри цитаты есть слова в кавычках, используют другой вид кавычек. Ещё кавычки не потеряются при копировании текста, в отличие от ЦСС‑кавычек.
Пример: Аркадий Мильчин и Людмила Чельцова. Справочник издателя и автора
<p>
М. М. Бахтин писал: <q>«Тришатов рассказывает подростку о своей любви к музыке и развивает перед ним замысел оперы: „Послушайте, любите вы музыку? Я ужасно люблю… Если бы я сочинял оперу, то, знаете, я бы взял сюжет из ,Фауста‘. Я очень люблю эту тему“»</q>.
<p>
q {
/* Отключаем ЦСС-кавычки */
quotes: none;
/* Стилизуем по вкусу */
font-style: italic;
}М. М. Бахтин писал: «Тришатов рассказывает подростку о своей любви к музыке и развивает перед ним замысел оперы: „Послушайте, любите вы музыку? Я ужасно люблю… Если бы я сочинял оперу, то, знаете, я бы взял сюжет из ,Фауста‘. Я очень люблю эту тему“»
.
Блочные цитаты
Для блочных цитат‑врезок используют тег blockquote:
<p>…</p>
<blockquote>
«Клиент ставит задачу профессионалу. Он заказывает услугу и ждёт хороший сервис»
</blockquote>
<p>…</p>
blockquote {
margin: 1em 0 0.7em; /* У тега есть маржины по умолчанию, переопределим на свои */
font-size: 30px;
color: rgb(5, 80, 255);
}
В бюро применяется принцип «исполнитель понимает задачу».
«Клиент ставит задачу профессионалу. Он заказывает услугу и ждёт хороший сервис»
Человеческие отношения построены на ожиданиях, и первым делом нужно узнать — чего же именно ждёт клиент.
Подпись к цитате
Подпись можно сверстать любым тегом. Название источника цитаты лучше обернуть в тег cite для оптимизации в поисковиках.
Для удобства позиционирования, цитату с подписью помещают в обёртку. По смыслу подойдёт тег figure и его figcaption.
Получится чуть громоздко, зато надёжно и универсально, а все теги подходят по смыслу, что хорошо для поисковиков и программ чтения с экрана:
<p>…</p>
<figure class="quote">
<blockquote>
«Клиент ставит задачу профессионалу. Он заказывает услугу и ждёт хороший сервис»
</blockquote>
<figcaption class="quote-caption">
Артём Горбунов. <cite>«Что такое профессиональная этика?»</cite>
</figcaption>
</figure>
<p>…</p>
.quote {
/* Перебьём стандартные отступы figure */
margin: 1em 0 0.7em;
}
.quote blockquote {
margin: 0;
font-size: 30px;
color: rgb(5, 80, 255);
}
.quote-caption {
margin-top: 18px;
font-size: 14px;
}
/* По умолчанию тег cite добавляет курсив, почистим */
cite {
font-style: inherit;
}
В бюро применяется принцип «исполнитель понимает задачу».
«Клиент ставит задачу профессионалу. Он заказывает услугу и ждёт хороший сервис»
Человеческие отношения построены на ожиданиях, и первым делом нужно узнать — чего же именно ждёт клиент.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.