Skip to main content

Текст по ширине страницы, красная строка, заголовки, оформление таблиц.

Далее мы применим довольно большой кусок css кода который оформит нам сразу несколько элементов:

  • Оформление абзацев (красная строка, текст по ширине)
  • Оформление таблиц (ширина 100%, отступы 5 px, чересстрочное выделение цветом)
  • Оформление заголовков

Пример оформления заголовков:

Заголовок H2

Заголовок H3

Пример оформления текста по ширине страницы и красной строки:

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

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

Пример оформления таблицы:








CSS Код:

Как внедрить код css на наш сайт описывается в следующей статье.

.detail__text,
.static-detail,
.free-block {
  /*Оформление абзацев (красная строка, текст по ширине)*/
  & p {
    text-align: justify;
    text-indent: 1.5em;
  }
  /*Оформление таблиц (ширина 100%, отступы 5 px, чересстрочное выделение цветом)*/
  & table {
    width: 100%;
    border-collapse: collapse;
    border-width: 1px;
    border-spacing: 5px;
    & td,
    & th {
      padding: 1em;
      border: 1px solid var(--border-color);
    }
    & tr:nth-child(even) {
      background-color: var(--disabled-color-light);
    }
  }
  /* Оформление заголовков */
  & h2 {
    padding-bottom: .5em;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 20%;
      height: 5px;
      background: var(--primary-color);
      z-index: 1;
    }
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: var(--light-gray-color);
    }
  }
  & h3 {
    border-bottom: 1px solid var(--light-gray-color);
    padding-bottom: .5em;
    position: relative;
    display: inline-block;
    &::before {
      background-color: var(--primary-color);
      border-radius: 50px;
      bottom: -5px;
      content: "";
      height: 10px;
      left: 0;
      position: absolute;
      width: 10px;
    }
    &::after {
      border-bottom: 2px solid var(--primary-color);
      bottom: -1px;
      content: "";
      height: 0;
      left: 0;
      position: absolute;
      width: 30%;
    }
  }
}

Для оформления этих элементов никаких дополнительных классов применять не нужно!

Back to top