Сборник тонкостей CSS — оформление текста и CSS-таблицы — Тренажёр HTML Academy

Продолжаем собирать тонкости, коих осталось не много. В этой статье поговорим об остатках текстовых свойств и о том как работают таблицы, которые изначально и не таблицы вовсе.

Оформление текста

На самом деле, мало чего интересного осталось. Первым на рассмотрение свойство отвечающее за падающую тень текста text-shadow. Мы уже разбирали и тень блока box-shadow, и фильтр падающей тени drop-shadow(), и вот, наконец, дошли до тени текста.

Больше всего работа text-shadow похожа на фильтр drop-shadow() — тень повторяет контуры текста и не поддерживает растяжение. Синтаксис записи тоже абсолютно идентичен — первые два значения отвечают за смещение по горизонтали и по вертикали соответственно, третий отвечает за размытие и наконец указывается цвет тени.

text-shadow: 5px -5px 0px #333333;

Далее в части вспоминаем про подключение шрифтов через @font-face, которое мы разбирали в начале «среднего уровня» тренажёров. Правда, здесь нам показали, что за «шрифт» можно выдать набор SVG фигур, как бы, упакованных в шрифтовой формат. Я такое даже пару раз видел во время работы и насколько знаю, многие конструкторы примерно так и загружают свои «библиотеки иконок».

Следующее свойство letter-spacing отвечающее за расстояние между символами. Принимает числовое значение — положительные увеличивают расстояние между символами, отрицательные уменьшают. По умолчанию равно нулю — базовое расстояние между символами.

По умолчанию, перенос строки происходит только по словам, но с помощью свойства overflow-wrap или его альтернативной записью, как написано в тренажёре, word-wrap — можно задать перенос по символам используя значение break-word — «ломать слово». По умолчанию же значение normal.

Очень специфичное свойство text-overflow, отвечающее за то, как будет выглядеть текст в конце непереносимой строки, например, очень длинное слово не поместилось, а overflow-wrap: normal;. По умолчанию имеет значение clip — текст просто обрезается, но можно задать значение ellipsis и придать более красивый вид — слово обрежется раньше, но в конце строки появится многоточие.

Далее, на мой взгляд, немного архаичное свойство text-indent, отвечающее за смещение начала первой строки абзаца. Та самая «красная строка» задаётся через это свойство. Мы его уже использовали, правда в других целях — задавали значение -1000px, чтобы скрыть текст над спрайтами.

Пару уроков отведено псевдоэлементам ::first-letter и ::first-line, которые мы уже немного разбирали в части про селекторы. Лишним не будет, кончено, но на мой взгляд они тоже малоприменимы.

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

Свойство column-count принимает числовое значение этих столбцов и текстовый блок автоматически разделяется на них. Честно признаюсь, я какое-то время делал это все отдельным текстовыми блоками во флекс-контейнере!

Другой вариант задать не число колонок, а минимальную ширину колонки с помощью свойства column-width — браузер автоматически разделит текст на максимально доступное количество колонок указанной ширины.

Последнее свойство из семейства — column-gap, отвечающее за расстояние между колонками. По умолчанию имеет значение 1em, но можно задать любое в пикселях, пунктах и других абсолютных единицах.

Испытания

Испытаний целых три штуки и все крайне простые. С текстом особо ничего, видимо, не придумать. Первое испытание на тени:

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

Третье испытание тоже лёгкое — сделать из текста логотип, используя свойство overflow-wrap и парочку других из пройдённой части.

CSS-таблицы

Честно говоря, меня немного разочаровала истина — я думал, таблицы на CSS будут как-то принципиально отличаться от таблиц в HTML, но по сути нет. Хрен знает чего я вообще ждал, сам не понимаю, но я себе каким-то образом завысил ожидания.

Таблицы на CSS это когда не табличным элементам мы задаём табличное поведение через свойство display. Формально, практически любую структуру можно завернуть в таблицу.

У меня сразу же появились вопросы:

1. А в чем смысл? Почему не сверстать заранее таблицу в HTML если она нужна? Количество символов будет примерно таким же.
2. Что по поводу семантики? Дерево div’ов с табличными свойствами лучше чем табличные теги? Как к этому относятся поисковики?
3. Зачем вообще был придуман этот велосипед?

Частично я сам себе отвечу — чтобы перенести все построения в CSS и управлять из одного места свойствами типа colspan и подобными. Но вот вопрос про семантику открытый.

В остальном, можно описать CSS таблицы так — каждому табличному тегу есть свой аналог в виде значения свойства display. Первую половину части мы просто рассматриваем каждый вариант отдельно строя таким образом таблицу.

• display: table; — аналогичен тегу <table>, обозначающий таблицу;
• display: table-row; — аналогичен тегу <tr>, строка таблицы;
• display: table-cell; — аналогичен тегу <td>, ячейка таблицы;
• display: table-caption; — аналогичен тегу <caption>, заголовок таблицы;
• display: table-header-group; — аналогичен <thead>, группа строк шапки;
• display: table-footer-group; — аналогичен <tfoot>, группа строк нижней части таблицы;
• display: table-row-group; — аналогичен <tbody>, просто группа строк;

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

В HTML для этого есть одиночный тег <col>, который указывается в самом начале сразу после тега <table> и каждый такой тег отвечает за столбец. Им можно задать атрибут width, который и будет влиять на всю таблицу, точнее на все ячейки в этом столбце.

<table>
  <col width="20%"> <!-- Первый столбец – ячейки 1.1 и 1.2 -->
  <col width="80%"> <!-- Второй столбец – ячейки 2.1 и 2.2 -->
  <tr>
    <td>1.1</td> <td>2.1</td>
  </tr>
  <tr>
    <td>1.2</td> <td>2.2</td>
  </tr>
</table>

Столбцы можно группировать с помощью тега <colgroup>, которой тоже можно задать атрибут width, а все <col> внутри этого тега получат равные доли ширины.

Так вот, в CSS таблицах есть аналоги и этим тегам:

• display: table-column; — аналогичен <col>;
• display: table-column-group; — аналогичен <colgroup>;

Все табличные свойства при этом начинают работать, включая специфичные для таблиц типа border-collapse и border-spacing. То есть дальнейшая стилизация идет как с обычной таблице.

Кстати один урок в части посвящен тому, что таблицу можно сделать блочно-строчной с помощью значение inline-table. Понятия не имею где это можно применить, но даже такое можно сделать.

Еще отдельно отмечу то как оформлена часть, она мне напомнила часть про двумерные трансформации — явный реверанс в сторону РПГ или ДНД, тут мы тоже собираем инвентарь. Кажется мелочью, а даже такую пресную информацию делает увлекательной! Мое уважение составителю!

Испытания

На них придётся чутка посидеть, они не то чтобы сложные, но в голове кирпичики сложить придётся, чтобы понять чего и куда. В первом заблокирован HTML и только с помощью CSS надо превратить список в таблицу:

Второе испытание на табличные свойства и работу с рамками и отступами в таблице, плюс вспоминаем псевдоклассы:

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

Вам огромное спасибо за ваше внимание! Увлекательного вам обучения!

Ссылки на мои социальные сети, там анонсы постов, некоторые мои короткие записи, мыслишки и всякое на отвлечённые темы:

Заходите куда удобно вам и подписывайтесь! Еще раз спасибо за внимание!