02. Основы CSS

Каскадные таблицы стилей, шрифты

Каскадные таблицы стилей — это язык стилевого оформления веб-документа. И, кстати, основная причина того, что теги физического форматирования в своём большинстве отошли в прошлое.

Стили можно подключить несколькими способами. В главе «Создание первой веб-страницы» мы использовали в разделе head такую строчку:

<link rel="stylesheet" href="css/style.css" />

Атрибут href сообщает браузеру, что в той же папке, в которой лежит данный документ, существует папка css и вот в ней находится файл style.css, где и лежат стили для данного документа. Создайте папку css в той же директории, где лежит ваш index.html. Теперь перейдите в эту папку и создайте текстовый документ, который переименуйте в style.css.

Разместите текст внутри style.css:

html, body {
	min-width:320px;
	font-size:16px;
	margin:0;
	padding:0;
	height:100%;
}
body {
	font-family:Roboto, Calibri, Arial, sans-serif;
	color:#252525;
}
h1 {
	font-size:36px;
	line-height:48px;
	text-align:center;
	margin-bottom:12px;
}

Вкратце поясню работу этих строк.

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

  • min-width:320px; — сделать минимальную ширину в 320 пикселей.
  • font-size:16px; — размер шрифта по умолчанию в документе сделать 16px.
  • margin:0; — внешний отступ сделать 0.
  • padding:0; — внутренний отступ тоже сделать 0.
  • height:100%; — По высоте занять 100% от возможного.

Как вы поняли из всего этого, минимальная ширина по умолчанию не установлена и пользователь может сжимать содержимое браузера до 0, при этом рано или поздно вёрстка «сломается».

Размер шрифта обычно в браузерах и так 16px, но никто не гарантирует появление завтра нового браузера, где разработчик решит выделиться из общей среды размером шрифта по умолчаню.

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

Внутренний тоже 0, не стоит надеяться на программистов, делающих браузеры.

По высоте изначально селекторы html и body занимают не 100%, как это ни удивительно.

Эти строки по сути сбрасывают настройки основных тегов на наши значения по умолчанию, чтобы мы были уверены, что дальнейшие наши действия будут приводить к равнозначным результатам во всех браузерах.

В следующем блоке мы отдельно для <body> выставляем начальные значения шрифта. Речь идёт об этом куске кода:

body {
	font-family:Roboto, Calibri, Arial, sans-serif;
	color:#252525;
}

Перечень названий шрифтов в параметре font-family означает, что сначала браузер должен попытаться отобразить содержимое при помощи шрифта Roboto. Это нестандартный шрифт как для платформы Windows, так и для Mac OS и Linux. Поэтому далее мы даём шрифты замещения. А именно: Calibri, Arial. Если система пользователя не даёт и их, то мы обращаемся к целому семейству: sans-serif. Sans-serif — это семейство рубленных шрифтов, или шрифтов без засечек, или гротесков. Calibri и Arial тоже без засечек, т.к. они наиболее предпочтительны для чтения с экрана. Кроме того, считается дурным тоном для гротесков указывать гарнитуры-заместители с засечками.

Всего семейств шрифтов насчитывается 5. Из них чаще всего в вебе указываются или sans-serif (гротески), или serif (антиквенные, c засечками, например Times New Roman, Times, Garamond, Georgia).

  • sans-serif — гротески или рубленные (Arial, Geneva, Helvetica, Lucida Sans, Trebuchet, Verdana, Tahoma).
  • serif — с засечками или антиквенные (Garamond, Georgia, New York, Times, Times New Roman).
  • monospace — моноширинные, используются, как правило, для вывода листинга программного кода (Courier, Courier New, Lucida Console, Monaco).
  • cursive — рукописные, используются для заголовоков (Comic Sans MS, Lucida Handwriting, Zapf Chancery).
  • fantasy — декоративные или художественные. Используются для заголовоков (Licious Script, Vivaldi, Coquette, Ingriana).

Последний блок устанавливает стили для заголовка первого уровня.

h1 {
	font-size:36px;
	line-height:48px;
	text-align:center;
	margin-bottom:12px;
}

Уже знакомый нам font-size делает размер шрифта заголовка 36px. Следующая строка задаёт интерлиньяж (или межстрочный интервал) в 48px. text-align:center; говорит, что текст нужно центрировать. margin-bottom:12px; устанавливает нижний отступ равным 12 пикселям.


Дополнительные ссылки