Press shift question mark to access a list of keyboard shortcuts
Этот скринкаст является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
расшифровка
Текст везде. Без этого Интернет не был бы таким полезным местом.
Существует множество различных CSS-свойств для оформления текста, и в этом видео мы рассмотрим большинство из них в той или иной форме.
Их немало, поэтому лучше начать! Поскольку есть так много вещей, которые нужно охватить, в этом эпизоде будут продемонстрированы некоторые из них, но отчасти это всего лишь обзор инструментов в коробке.
Свойства текста
Существует множество свойств CSS, которые управляют визуальным отображением текста, но только семь из них на самом деле начинаются со слова «текст».
Это:
text-align-
text-decoration -
text-indent -
text-overflow -
text-rendering -
text-shadow -
text-transform
Мы подробно рассмотрели text-align« Эпизоде 10: justify » ; он используется для управления выравниванием текста на экране и часто устанавливается leftrightcenter
text-decorationnoneunderline Для создания эффекта вычеркивания также можно задать underlineoverlineline-through
text-indent Я часто использую это с большим отрицательным значением, чтобы отделить текст от страницы, чтобы он был визуально скрыт, но все еще существует в документе для вспомогательных устройств, таких как программы чтения с экрана.
text-overflow Мы можем стилизовать этот переполненный текст clip
text-rendering Установка для text-renderingoptimiseLegibility Поддержка не очень хорошая, и, очевидно, могут возникнуть некоторые побочные эффекты от ее использования, поэтому я бы рекомендовал проверить их, прежде чем делать.
text-shadowbox-shadow Он принимает четыре свойства: x-offset и y-offset управляют положением тени; радиус размытия определяет, насколько мягкая тень, и, наконец, цвет задает цвет тени.
text-transform Он может быть использован для установки всех букв в верхний регистр, нижний регистр или заглавных букв первой буквы каждого слова. Один из моих баг-медведей — нахождение МНОГО ВСЕХ СЛОВ, написанных в HTML, — гораздо более гибко управлять этим визуальным стилем вместо CSS.
Свойства шрифта
Существует целый ряд других вещей, которыми мы можем манипулировать и стилизовать текст, а также есть ряд CSS-свойств для font
font-family Это может быть установлено как «стек», и браузер выберет первый шрифт в списке, который он может загрузить успешно.
font-size
font-stylefont-weight font-weight Это значение кратно 100 в диапазоне от 100 до 900. font-weight:normalfont-weight:bold
В CSS3 есть несколько довольно причудливых новых настроек вариантов font
Наконец, есть сокращенное свойство для fontfontline-height Синтаксис имеет довольно специфический порядок, который я никогда не могу запомнить, поэтому я склонен не использовать это свойство очень часто. Тем не менее, это полезно для установки font-familyfont-sizeline-height
p {font: 12px/24px 'Avenir', 'Arial', sans-serif;}
Другие свойства
Мы рассмотрели некоторые детали свойств text-font-
Мы посмотрели на line-height« Эпизоде 12: line-height » . Это свойство контролирует интервалы над и под строками текста. Мы также можем контролировать расстояние между отдельными буквами с помощью letter-spacing Это может быть установлено на большое положительное значение, чтобы увеличить расстояние, или на маленькое или отрицательное значение, чтобы все сжать.
Мы также можем контролировать интервал между словами с помощью свойства word-spacingword-wrap
Также возможно управлять поведением пустого пространства, используя свойство white-space Это полезное свойство для управления визуальным выводом предварительно отформатированного текста, такого как фрагменты кода — то, что я делаю совсем немного.
Таким образом, у нас есть довольно полный список всех вещей, связанных с текстом. Это не самый захватывающий список свойств CSS, с которыми я когда-либо сталкивался, но так как контент важен, возможность контролировать то, как наш текст отображается для читателя, невероятно важна. Надеюсь, в этом списке для вас появилось несколько новых вещей; Я знаю, что определенно нашел несколько вещей, которых не видел прежде, когда собирал этот эпизод!