Стилизация текста в CSS

Введение

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

В этой лаборатории вы получите практический опыт работы с наиболее распространенными свойствами CSS для стилизации текста. Вы научитесь изменять цвет текста, регулировать размер шрифта, делать текст жирным, выравнивать его и управлять интервалами между строками. Мы будем работать с двумя файлами: index.html, который содержит контент, и style.css, куда вы будете записывать свои CSS-правила. Вы можете видеть свои изменения в реальном времени, переключившись на вкладку Web 8080 в лабораторной среде.

Приступим!

Установите свойство color для цвета текста

На этом шаге вы научитесь изменять цвет текста с помощью свойства CSS color. Это свойство может принимать названия цветов (например, red, blue), шестнадцатеричные значения (например, #FF0000), значения RGB и другие.

Сначала найдите файл style.css в файловом проводнике слева от WebIDE. Щелкните по нему, чтобы открыть в редакторе.

Теперь добавим правило для изменения цвета текста абзаца. Мы будем использовать селектор p для нацеливания на все элементы абзаца. Добавьте следующий код в ваш файл style.css:

p {
  color: #2980b9;
}

После добавления кода сохраните файл style.css. Чтобы увидеть результат, нажмите на вкладку Web 8080 в верхней части интерфейса. Вы должны увидеть, что цвет текста абзаца изменился на оттенок синего.

Примените свойство font-size в пикселях

На этом шаге мы отрегулируем размер нашего текста с помощью свойства font-size. Это свойство контролирует размер шрифта. Хотя существует множество единиц измерения, которые вы можете использовать (например, em, rem, %), мы начнем с пикселей (px), которые обеспечивают фиксированный размер.

Сделаем текст абзаца немного крупнее для лучшей читаемости. Вернитесь к файлу style.css и добавьте свойство font-size к существующему правилу p.

Ваше правило селектора p теперь должно выглядеть следующим образом:

p {
  color: #2980b9;
  font-size: 18px;
}

Сохраните файл и снова переключитесь на вкладку Web 8080. Вы заметите, что текст внутри абзаца стал крупнее, чем раньше.

Используйте свойство font-weight для жирного текста

На этом шаге вы научитесь управлять жирностью текста с помощью свойства font-weight. Это свойство может принимать ключевые значения, такие как normal или bold, или числовые значения от 100 до 900.

Сделаем заголовок (h1) более выразительным, явно задав его вес. Хотя заголовки часто по умолчанию жирные, определение этого в вашем CSS обеспечивает единообразие. Мы также сделаем текст абзаца жирным.

Измените ваш файл style.css. Сначала добавьте новое правило для элемента h1. Затем добавьте свойство font-weight к вашему существующему правилу p.

h1 {
  font-weight: bold;
}

p {
  color: #2980b9;
  font-size: 18px;
  font-weight: bold;
}

Сохраните файл и проверьте вкладку Web 8080. Вы увидите, что текст абзаца теперь жирный.

Реализуйте свойство text-align для центрирования

На этом шаге мы будем использовать свойство text-align для управления горизонтальным выравниванием текста. Это свойство может принимать значения, такие как left, right, center или justify. Это отличный способ позиционировать заголовки и другие блочные текстовые элементы.

Давайте отцентрируем основной заголовок нашей страницы. Для этого мы добавим свойство text-align к нашему правилу h1 в style.css.

Обновите правило h1 в вашем файле style.css, добавив text-align: center;:

h1 {
  font-weight: bold;
  text-align: center;
}

После сохранения файла обновите вкладку Web 8080. Заголовок <h1>, "Welcome to CSS Text Styling", теперь должен быть идеально отцентрирован в верхней части страницы.

Добавьте свойство line-height для интервалов

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

Использование безразмерного значения для line-height является распространенной лучшей практикой, поскольку оно создает интервал, пропорциональный размеру шрифта элемента. Например, line-height равный 1.6 означает, что интервал будет в 1.6 раза больше размера шрифта.

Добавим вертикальный интервал к нашему абзацу. Перейдите в ваш файл style.css и добавьте свойство line-height к правилу p.

Ваше окончательное правило p должно выглядеть следующим образом:

p {
  color: #2980b9;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
}

Сохраните файл и просмотрите результат на вкладке Web 8080. Вы заметите, что абзац теперь гораздо легче читать, с более комфортным интервалом между строками.

Резюме

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

В этой лабораторной работе вы практиковались в использовании:

• color: для изменения цвета текста.
• font-size: для управления размером текста.
• font-weight: для регулировки жирности текста.
• text-align: для установки горизонтального выравнивания текста.
• line-height: для управления вертикальным интервалом между строками текста.

Эти фундаментальные навыки являются основой для создания хорошо спроектированного и читаемого веб-контента. Не стесняйтесь экспериментировать с различными значениями и свойствами в файле style.css. Продолжайте исследовать, чтобы стать более опытным в CSS!