Теория урока

40. Цитаты в HTML

Цитату можно выделить двумя тегами: <blockquote> и <q>. <blockquote> - отображается как блок с отступами слева и справа по 40px (от браузера зависит). Тег <q> отображает текст в кавычках. Эти теги рекомендую заменять стилями CSS.

Код HTML

<blockquote>Цитата</blockquote>
<q>Цитата</q>

Выделение текста кавычками стилями CSS

Способов не так много. Пример одного из них:

Код HTML

<span class = "q">Цитата</span>

Код CSS

.q {
    quotes: '"' '"';
}
.q:before {
    content: open-quote;
}
.q:after {
    content: close-quote;
}

Похожие уроки и записи блога

Акцентирование (выделение) текста в HTMLРазметка текста

Знакомимся с Flexbox в CSSЗнакомство с Flexbox

Универсальные атрибуты в HTMLРазметка текста

Свойство background для работы с фономЦвета и фон

Единицы измерения длины в CSSЕдиницы измерения

Перенос строки и разделительная линия в HTMLРазметка текста

Добавляем градиент к фону элементаЦвета и фон

Что такое HTML?Знакомство с HTML

Первое знакомство с HTMLЗнакомство с HTML

Предыдущий урок «39. Тест по акцентированию текста в HTML» Следующий урок «41. Тест по цитатам в HTML»

HTML

CSS

Браузер

Вернуть расположение блоков

Код HTML

Код CSS

Браузер×

Задание

Восстановить код

Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков и участие в рейтинге среди пользователей), вам нужно авторизоваться. Это можно сделать пройдя обычную регистрацию с использованием почты или в пару кликов, если у вас есть один из аккаунтов: ВКонтакте, GitHub, Google, Яндекс или Telegram.

Напишите цитату отображаемую как выровненный блок с отступами слева и справа
Напишите цитату, которая выделяется кавычками

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.

Необходимо авторизоваться, чтобы проверить задание
Это займет не больше минуты.