Как создать поле для цитаты с помощью CSS

Development | Amber | Комментировать запись

Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все инструкции по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.

Примечание: Найти все руководства этой серии можно по тегу CSS-practice

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

Сегодня мы разберемся, как с помощью CSS добавить на свой сайт избранную цитату. Вы можете использовать этот раздел, чтобы разместить здесь цитату из любимого произведения, отзыв о вашей работе или сообщение для посетителей вашего сайта. В цитату можно добавить гиперссылку на другую веб-страницу, если хотите.

Всю условную информацию вы можете заменить своей собственной. Методы, которые использованы здесь, можно применить к любым другим проектам, разработанным на CSS и HTML.

Требования

Чтобы следовать этому мануалу, нужно подготовит среду согласно руководству Подготовка проекта CSS и HTML с помощью Visual Studio Code.

Создание правил для оформления цитат

Чтобы создать раздел с избранными цитатами, мы напишем отдельные классы для стилизации контейнера и для стилизации самого текста. Откройте файл styles.css и вставьте в него следующие фрагменты кода:

. . .

/* Section 6: Featured Quote  */

.column-quote {

  width: 90%;

  height: 475px;

  padding: 40px;

  padding-left:70px;

  padding-right: 70px;

  padding-bottom:100px;

  margin:auto;

  margin-bottom:150px;

  border: 20px solid #FEDE00;

}

.quote {

  font-size:80px;

  font-weight:bold;

  line-height: 1;

  text-align: center;

}

Как и весь предыдущий код в этой серии, этот фрагмент начинается с комментария (/* Section 6: Featured Quote */), чтобы отделить этот код от других правил CSS. Затем мы определили класс column-quote, который будет использоваться для стилизации цитат, и указали размер, внутренние границы, поля и внешние отступы контейнера.

Обратите внимание: для внешнего отступа мы установили значение auto, благодаря чему контейнер центрируется по горизонтали в середине страницы. Кроме того, нижний внешний отступ определен отдельно и имеет значение 200 пикселей, чтобы освободить место внизу страницы.

Читайте также: Блоковая модель CSS: настройка контента, внутренних полей, рамок и внешних отступов HTML-элементов

Также мы создали класс quote, который будет стилизовать текст внутри поля цитаты. Обратите внимание, свойству line-height мы установили значение 1, что сокращает расстояние между строками текста (по умолчанию используется значение 1,6). Попробуйте самостоятельно изменить это значение, чтобы определить, какой межстрочный интервал подходит вам больше всего.

Сохраните файл styles.css.

Добавление цитаты на сайт

Откройте файл index.html. Найдите в нем последний закрывающий тег </div> и после него вставьте следующий код:

. . .

<!--Section 6: Featured Quote-->

<div class="section-break"> </div>

<div class="column-quote">

  <p class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

Прежде чем двигаться дальше, давайте рассмотрим наш код подробнее:

• <!–Section 6: Featured Quote–> – комментарий, который отделяет этот фрагмент от остального кода внутри файла index.html.
• Элемент <div class=”section-break”> </div> создает разрыв между разделами и оформляет его согласно классу, который вы определили в предыдущем мануале этой серии. Если вы пропустили его, вы можете добавить такой разрыв в styles.css с помощью CSS-правила .section-break {margin:50px;  height:500px;}. Этот элемент создает пустое пространство между разделами.
• Элемент <div class=”column-quote”> и его закрывающий тег создают контейнер, в который помещена ваша цитата. Контейнер стилизуется согласно классу column-quote.
• Элемент <p class=”quote”>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> вставляет текстовое содержимое в контейнер, созданный предыдущим элементом. Цитата будет оформлена согласно классу quote, который мы ранее добавили в styles.css.

Если вы измените длину текстового содержимого, вы можете отредактировать один из классов в этом разделе, подогнать размер шрифта или контейнера, чтобы текст умещался в поле.

Сохраните файл index.html и перезагрузите страницу в браузере. Теперь на вашем сайте появилась цитата в прозрачном контейнере со сплошным фоном.

Заключение

Сегодня вы создали специальное текстовое поле и настроили его стиль. Если вы хотите разместить здесь гиперссылку на другую страницу веб-сайта, читайте Добавление страниц сайта и ссылка на них с помощью HTML.

В последнем руководстве этой серии мы создадим футер, который фиксируется в нижней части экрана, когда посетитель прокручивает страницу вниз.