Базовый стиль

Мы подробно рассмотрели таргетинг, но нам еще предстоит охватить основы стилей в CSS! Большинство свойств стилей в CSS довольно просты сами по себе, но могут быть немного запутанными для понимания и запоминания во время работы. Например, имена свойств стиля могут иногда казаться весьма произвольными. Чтобы понять подход, лежащий в основе многих свойств стиля, полезно оглянуться назад на исходную (устаревшую) спецификацию CSS1. Это делит свойства стиля на следующие категории:

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

Поскольку стандарт устарел, отнеситесь к нему с долей скептицизма — некоторые вещи с тех пор устарели, а другие были добавлены, — но исходный стандарт CSS разрушает мышление, которое использовалось при разработке основного набора стилей CSS.

Единицы измерения

Существует множество различных модулей, которые вы можете использовать в CSS, и каждый из них полезен в разных обстоятельствах. Как вы видели выше с пикселями, когда вы пишете число в CSS, оно почти всегда имеет суффикс, указывающий, на какую единицу измерения вы ссылаетесь. Если я назначу что-то вроде font-size: 18;, стиль будет недействительным, и браузеры его проигнорируют.

Используйте относительные измерения для текста (в большинстве случаев)

Абсолютные измерения рекомендуются в первую очередь для известных результатов, таких как стили печати. (Да, вы можете определить стили печати отдельно от стилей экрана!) Для экранов рекомендуются относительные измерения, поскольку они будут более интуитивно масштабироваться и их будет легче настроить для разных форматов. Как правило, разработчик устанавливает абсолютные размеры текста в пикселях для корневого элемента (<html>), а затем устанавливает все остальное относительно этого. Затем, если вы хотите сделать шрифт больше или меньше для мобильных форматов или для печати, вам нужно только уменьшить масштаб одного числа, и все остальное подстроится в соответствии с ним.

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

  • px: пиксели. Для экранов с высокой плотностью это переводится в эффективные пиксели на основе разрешения экрана по умолчанию, поэтому оно на самом деле не в пикселях. Также обратите внимание, что это будет меняться в зависимости от размера и эффективной плотности пикселей экрана. Например, эффективные пиксели на экране моего ноутбука меньше, чем на моем внешнем мониторе, что означает, что элементы на веб-странице отображаются на моем ноутбуке в меньшем размере.
  • cm: сантиметры
  • mm: миллиметры
  • _6 дюймов
  • pc: пикас, 1/12 дюйма
  • pt: точки, 1/72 дюйма

Или в относительных единицах:

  • %: процент размера шрифта родительского элемента. Это относительно интуитивно понятно: 100% — это размер родительского размера шрифта. Ниже 100% меньше, а >100% больше.
  • em: относительно размера шрифта элемента; 1em = размер шрифта элемента. Это используется МНОГО для назначения относительных размеров шрифта.
  • rem: относительно размера шрифта корневого элемента, также много используется для назначения размеров шрифта относительно элемента html.
  • ex: относительно x-высоты шрифта. Я буквально никогда не использовал это, и я никогда не видел, чтобы это использовалось на веб-странице. Тем не менее, это доступно, если вы хотите попробовать! (Кроме того, x-height — это то, как это звучит: высота строчной буквы «x» в шрифте. Это значение варьируется от одного шрифта к другому и влияет на удобочитаемость шрифта при небольших размерах и наше восприятие его элегантности. является.)
  • ch: относительно ширины нуля «0» шрифта. Я также никогда не использовал это и не видел, чтобы это использовалось кем-то еще. Это более новый стандарт, поддерживаемый IE 9 и более поздних версий, поэтому его можно безопасно использовать для большинства веб-сайтов.
  • vw: относительно 1% ширины окна просмотра; 100vw = 100% ширины области просмотра. Это ОЧЕНЬ полезно, особенно в сочетании с функцией calc(). Оба они, наряду с vh ниже, были введены в CSS3 и поддерживаются IE9 и выше.
  • vh: относительно 1% высоты области просмотра; 100vh = полная высота области просмотра.
  • vmin: относительно 1% высоты или ширины — в зависимости от того, что меньше. Обратите внимание, что это совместимо с IE9 и выше, но IE9 особенный и вызывает единицу измерения vm вместо vmin.
  • vmax: относительно 1% высоты или ширины — в зависимости от того, что больше. В отличие от vmin, это не поддерживается ни в одной версии IE или MS Edge, поэтому я не рекомендую использовать его, если только вы не ненавидите пользователей Windows и не хотите, чтобы они видели неработающий веб-сайт.

В сторону о доступности

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

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

Пока вы создаете полностью адаптивный веб-сайт, который может корректно обрабатывать масштабирование, вы будете соответствовать стандартам доступности. См. Стандарт W3C для доступности изменения размера текста, если у вас есть какие-либо сомнения по этому поводу!

В сторону о том, почему я продолжаю упоминать совместимость с IE

Исторически сложилось так, что Microsoft очень медленно соответствовала последним веб-стандартам в своих браузерах, хотя со временем это постепенно улучшалось. Кроме того, поскольку Microsoft исторически связывала браузер Internet Explorer (а теперь и Microsoft Edge) с Windows без тщательного процесса обновления пользователей до последней версии браузера с течением времени, пользователи IE исторически использовали устаревшие браузеры дольше, чем другие пользователи. Браузер, такой как Chrome, просто обновляется в фоновом режиме по умолчанию, а другие браузеры отлично подходят для запроса обновления пользователем. Таким образом, когда я упоминаю о совместимости с IE9 и выше или с IE11 и выше, вы можете предположить, что все остальные основные браузеры были согласованы задолго до Microsoft.

Свойства шрифта

Это свойства, которые вы используете для настройки шрифта:

  • font-style: определяет, является ли шрифт курсивным или обычным. Также вариант: «наклонный», но не используйте его. Он программно наклоняет шрифт, чего никогда не следует делать. Семейства шрифтов получают специально созданные курсивные стили, а программно наклонный шрифт никогда не выглядит элегантно. Обратите внимание, например, что символы, выделенные курсивом, отличаются от «обычных» символов, и это часть того, что выделяет курсивный текст и делает его таким особенным.
  • font-variant: обычные или маленькие заглавные буквы. Вы почти никогда не захотите использовать это. По тем же причинам, по которым вы не хотите использовать наклонный текст, вам следует избегать маленьких заглавных букв, если только вы не используете шрифт со специальным вариантом маленьких заглавных букв.
  • font-weight: обычный, полужирный, светлый или 100, 200,…900. Так вы определяете жирность текста. Для простого шрифта вы можете использовать только обычный и полужирный шрифт, но многие современные шрифты имеют несколько жирностей. Наиболее распространенные веса шрифта (и связанное с ним свойство CSS): тонкий (100), светлый (300), обычный (400), полужирный или средний (600), полужирный (700) и черный (900).
  • font-size: насколько велик или мелок шрифт. Это может быть определено во многих различных единицах, как абсолютных, так и относительных! Мы подробнее остановимся на единицах измерения в следующий раз, но для простоты давайте пока поговорим о размере в пикселях. Если вам нужен предварительный просмотр различных параметров единиц, посетите страницу W3Schools о единицах CSS.
  • font-family: разделенный запятыми список имен семейств шрифтов, который назначает резервные варианты семейств шрифтов для использования браузерами. На заре Интернета вы не могли встраивать шрифты в веб-сайты, поэтому вам приходилось полагаться на установленные пользователями шрифты, которые различаются от компьютера к компьютеру, особенно на компьютерах с Windows и Mac. Например, если вашим предпочтительным шрифтом был Helvetica (доступен на компьютерах Mac), вы можете указать Arial в качестве второго варианта, поскольку Helvetica по умолчанию не установлена ​​на компьютерах с Windows. Обратите внимание: если в названии шрифта есть пробел, его следует заключить в кавычки. Даже в современной сети, если вы встраиваете шрифт, хорошо иметь список запасных вариантов на случай, если что-то случится с вашими файлами шрифтов или если вы встраиваете шрифт, ссылаясь на фрагмент кода из проекта Google Fonts ( ЧТО ЗАМЕЧАТЕЛЬНО, ВЫ ДОЛЖНЫ ПРОВЕРИТЬ ЭТО), на случай, если случится апокалипсис и хостинг Google выйдет из строя. Также обратите внимание, что в качестве окончательного варианта вы можете указать браузеру, хотите ли вы, чтобы он использовал шрифт с засечками или без засечек.
  • font: свойство, которое вы можете использовать, чтобы определить все это сразу, а также высоту строки — в сокращении. Вы можете использовать его в начале своих определений шрифтов CSS, когда вы определяете значения по умолчанию, а затем вы можете переопределить его более детальными стилями для таких элементов, как заголовки или для определенных виджетов. Для этого значение для каждого определения стиля шрифта выше определяется с пробелом между ним и следующим, в точном порядке списка выше, с line-height, одним из свойств текста, вставленным после размера шрифта с / между шрифтом -размер и высота строки. Например, font: italic normal normal 14px/18px Helvetica, 'Hevetica Neue', Arial, sans-serif; Как видите, это не особенно разборчиво, поэтому я не рекомендую часто использовать его в коде.

Давайте посмотрим на это в действии! Как мы могли бы структурировать стили, например, для набора заголовков и текста абзаца?

<h1>Playing with Font Properties</h1>
<h2>I'm a 2nd-level heading</h2>
<p>Paragraph text gets the default font-size unless you override it. You can always override browser defaults; nearly every major web destination does so.</p>

Очень-прямой-но-несколько-ужасный способ написать наши стили будет примерно таким:

h1 {
  font-size: 26px;
  font-family: Helvetica, 'Hevetica Neue', Arial, sans-serif;
  font-weight: 600;
}
h2 {
  font-size: 18px;
  font-family: Helvetica, 'Hevetica Neue', Arial, sans-serif;
  font-weight: 300;
}
p {
  font-size: 14px;
  font-family: Helvetica, 'Hevetica Neue', Arial, sans-serif;
  font-weight: 400;
}

Посмотрите на это в действии в этом пин-коде.

Есть некоторые проблемы с вышеизложенным:

  • Это очень многословно.
  • Это дублирование. Обратите внимание, как вы повторяете font-family снова и снова. Теперь представьте себе все остальные элементы HTML, которые мы рассмотрели в предыдущей статье. HTML и CSS были бы ужасны, если бы вам приходилось писать один и тот же стиль снова и снова.
  • В связи с предыдущими двумя пунктами: он не использует преимущества «каскадной» части каскадных таблиц стилей (CSS).
  • Шрифт элемента <p> по умолчанию равен 400 (обычный), поэтому мы просто пишем дополнительный код, который не делает ничего полезного в этой строке.

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

html {
  font-size: 14px;
  font-family: Helvetica, 'Hevetica Neue', Arial, sans-serif;
}
h1 {
  font-size: 26px;
  font-weight: 600
}
h2 {
  font-size: 18px;
  font-weight 300;
}

Или, если вы хотите использовать сокращенное свойство:

html {
  font: 14px Helvetica, 'Hevetica Neue', Arial, sans-serif;
}
h1 {
  font-size: 26px;
  font-weight: 600
}
h2 {
  font-size: 18px;
  font-weight 300;
}

В качестве альтернативы, если вы используете относительные единицы, такие как бэр или эм (см. ниже):

html {
  font: 14px Helvetica, 'Hevetica Neue', Arial, sans-serif;
}
h1 {
  font-size: 1.9rem;
  font-weight: 600
}
h2 {
  font-size: 1.3rem;
  font-weight 300;
}

Посмотрите последний пример в действии на codepin.

Свойства текста

Свойства текста расширяют наши возможности по манипулированию текстом не только буквами, но и позволяют инженеру управлять оформлением, преобразованием, выравниванием текста и даже расстоянием между буквами и словами. По сути, как мы можем управлять группами текста помимо того, как отображается каждая отдельная буква?

К свойствам текста относятся:

  • word-spacing: сколько пробелов должно быть между словами в элементе, в дополнение к интервалу по умолчанию. По умолчанию установлено значение normal. Вы можете использовать единицы измерения, описанные в следующем разделе, для увеличения/уменьшения интервала между словами.
  • letter-spacing: сколько пробелов должно быть между буквами в элементе, в дополнение к интервалу по умолчанию. По умолчанию установлено значение normal. Вы можете использовать единицы измерения, описанные в следующем разделе, для увеличения/уменьшения межбуквенного интервала.
  • text-decoration: варианты здесь: underline, overline, line-through и blink. Пожалуйста, пожалуйста, никогда не используйте blink, если вы действительно не хотите использовать сыр и без того дрянной веб-сайт. Это довольно часто использовалось в 90-х годах, и это было немного интенсивно.
  • vertical-align: Как выравнивается текст по вертикали? baseline (значение по умолчанию, которое вы почти всегда будете использовать для текста), middle, sub, super, text-top, text-bottom, top или bottom? Мы углубимся в них чуть позже
  • text-transform: Преобразует заглавные буквы текста в элементе. Возможные варианты: capitalize (каждое слово в заглавном регистре), uppercase (каждая буква прописная), lowercase (каждая буква строчная), а по умолчанию — none.
  • text-align: горизонтальное выравнивание. Варианты: left, center, right и justify. Дизайнер во мне будет настоятельно советовать вам не использовать text-align: justify. Когда люди читают, они используют «тряпку» — неровную сторону текстового блока — чтобы понять, где они находятся от строки к строке. Когда вы «выравниваете» текст, вы выравниваете этот край, что затрудняет чтение текста. Кроме того, как правило, когда это делается в книгоиздании, это очень тщательный процесс, в котором интервал распределяется между буквами и пробелами между словами. Однако браузеры не так хороши в этом, и пространство просто распределяется между словами, поэтому justify в конечном итоге создает огромные пробелы между словами в некоторых строках, что делает ваш текст намного труднее для чтения, не говоря уже о неудобном и непрофессионально!
  • line-height: высота каждой строки текста. Чаще всего это определяется в относительных единицах, em, и в этом случае размер зависит от размера текста элемента.

Вертикальное выравнивание имеет множество вариантов! К счастью, для большинства текстов вы просто используете базовую линию, чтобы убедиться, что базовая линия (воображаемая линия, на которой сидят буквы, но некоторые символы, такие как y, j, q и p, имеют «нисходящие элементы», которые опускаются ниже) совпадают по всему тексту в элементе, независимо от размера шрифта. Однако, как только мы перейдем к блочным моделям, вы обнаружите, что есть и другие случаи, когда люди используют display: inline-block для создания макетов, в которых вы можете вертикально выравнивать такие элементы, как текст. Однако мы собираемся рассмотреть inline-block более подробно чуть позже, потому что а) у него есть много нюансов, заслуживающих отдельного поста, и б) им злоупотребляют, как правило, люди, которые никогда не изучали более базовые тактики позиционирования. !

Есть намного больше!

Я рассмотрел только небольшую часть стилей CSS, которые вы можете использовать, но на следующей неделе мы рассмотрим больше. А пока небольшое домашнее задание:

  1. Настройте набор HTML-элементов с заголовками, абзацами и т. д. по желанию. Стилизуйте их, используя стили шрифта со значениями в пикселях для изменения размера. Затем попробуйте установить размер шрифта для html-элемента в пикселях, а другие — в единицах em или rem. Сравните их, чтобы увидеть, насколько легко/сложно настроить размер шрифта вашего документа.
  2. Добавьте свойства текста, такие как text-align, line-height и text-decoration.
  3. Зайдите на один из ваших любимых веб-сайтов и проверьте, как они устанавливают размеры шрифта на сайте. Что они делают хорошо? Что они делают плохо?