Текст CSS/HTML

Выровнять текст по центру можно двумя способами. Как в первом примере, можно добавить к тегу p класс, и применить к нему свойство text-align со значением center, а затем добавить этот класс там, где это необходимо. Если текст находится в блоке, можно добавить к нему свойства Flexbox CSS, как показано во втором примере.

• Пример
• HTML
• CSS

Пример

Lorem Ipsum

---

Lorem Ipsum

HTML

<!-- Текст по центру с помощью text-align: center; -->
<p class="text-center">Lorem Ipsum</p>

<!-- Текст по центру с помощью Flexbox CSS -->
<div class="text-ex">
  <p class="text-ex-title">Lorem Ipsum</p>
</div>
      

CSS

/* Текст по центру с помощью text-align: center; */
.text-center{
  text-align: center; /* Текст по центру */
  color: #a8d7e1; /* Цвет текста */
}

/* Текст по центру с помощью Flexbox CSS */
.text-ex{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 125px;
  background: #a8d7e1;
}
     

Для того, чтобы сделать текст поверх картинки можно поместить его в div, и добавить свойство background-image. Чтобы текст располагался по центру можно использовать text-align со значением center и применить его к тегу p, либо использовать свойства Flexbox CSS для div, как показано на примере.

• Пример
• HTML
• CSS

Пример

Lorem Ipsum

HTML

<div class="text-ex-image">
  <p>Lorem Ipsum</p>
</div>
      

CSS

.text-ex-image{
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(image.jpg); /* Путь к картинке */
  background-repeat: no-repeat; /* Фон не повторяется */
  background-size: cover; /* Растягиваем  фон по высоте и ширине */
  background-position: center; /* Позиция фона по центру */
  height: 250px; /* Высота блока */
}
     

Чтобы изменить размер шрифта можно применить свойство font-size, значение которого определяет размер текста. В качестве единиц можно применять rem, так как px задают размер текста, не зависящий ни от чего, размеры в em – относительные, они определяются по текущему контексту. Единица rem задаёт размер относительно размера шрифта элемента всей веб-страницы.

• Пример
• HTML
• CSS

Пример

Lorem Ipsum

Lorem Ipsum

HTML

<h3 class="text-ex-h3">Lorem Ipsum</h3>
<p class="text-ex-p">Lorem Ipsum</p>
      

CSS

.text-ex-h3{
  font-size: 2.5rem;
}
.text-ex-p{
  font-size: 2rem;
}
     

Курсивный текст похож на рукописный, и часто требуется для того, чтобы выделить фрагмент текста. Для того, чтобы сделать наклон у текста можно применить свойство font-style со значением italic.

• Пример
• HTML
• CSS

Пример

Lorem Ipsum

HTML

<p class="text-cursive">Lorem Ipsum</p>
      

CSS

.text-cursive{
  font-style: italic;
}
     

Чтобы выделить фрагмент текста, подчеркнув его, можно применить свойство text-decoration со значением underline. Для этого, можно добавить тег span, задать ему класс с необходимым свойством, как на примере.

• Пример
• HTML
• CSS

Пример

Lorem Ipsum

HTML

<p>Lorem <span class="text-underline">Ipsum</span></p>
      

CSS

.text-underline{
  text-decoration: underline;
}
     

Чтобы выделить фрагмент текста, подчеркнув его волнистой линией, например, для указания орфографических или других ошибок, можно применить свойство text-decoration со значением underline. Стиль и цвет линии задаются через свойства text-decoration-style со значением wavy и text-decoration-color. Можно добавить тег span, задать ему класс с необходимыми свойствами, как на примере.

• Пример
• HTML
• CSS

Пример

Lorem Ipsum

HTML

<p>Lorem <span class="text-wavy">Ipsum</span></p>
      

CSS

.text-wavy{
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: #ff6247;
}
     

Чтобы выделить отдельный фрагмент текста в предложении жирным можно использовать тег b, так же существует элемент strong, который сообщает, что выделенный текст является важным и отображает текст жирным. Есть третий способ, выделить текст с помощью свойства font-weight со значением bold.

• Пример
• HTML
• CSS

Пример

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

HTML

<p>Lorem <b>Ipsum</b></p>
<p>Lorem <strong>Ipsum</strong></p>
<p>Lorem <span class="text-bold">Ipsum</span></p>
      

CSS

.text-bold{
  font-weight: bold;
}
     

Для того, чтобы сделать текст полупрозрачны, можно воспользоваться специальным форматом RGBA. Этот формат задает цвет в виде четырех параметров — красного, зеленого, синего, каждый из которых меняется в диапазоне от 0 до 255 и степень прозрачности цвета, которая задается от 0 до 1. Функцию rgba() в качестве значения можно применить к свойству color.

• Пример
• HTML
• CSS

Пример

Lorem Ipsum

HTML

<p class="text-transparent">Lorem Ipsum</p>
      

CSS

.text-transparent{
  color: rgba(255,255,255,0.8);
}
     

Мигающий текст требуется на сайте для того, чтобы привлечь внимание. Чтобы его сделать можно применить свойство animation. Для этого тексту необходимо задать класс и прописать для него бесконечно повторяющуюся анимацию, за это отвечает параметр infinite. Добиться мигания можно с помощью свойства opacity, изменяя прозрачность.

• Пример
• HTML
• CSS

Пример

Lorem Ipsum

HTML

<p class="text-flicker">Lorem Ipsum</p>
      

CSS

.text-flicker {
  animation: flicker 3s infinite; /* Параметры анимации */
}
  @keyframes flicker {
    from { opacity: 1; /* Непрозрачный текст */ }
    to { opacity: 0; /* Прозрачный текст */ }
  }