Кодирование со стилем.

На этом этапе этой серии статей вы знаете основы HTML и должны уметь создавать простые страницы. В качестве бонуса вы узнали о редакторах кода. Возможно, вы даже сами уже пробовали некоторые из их интересных функций!

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

Решение этой проблемы - сделать вашу страницу привлекательной.

На сегодня все! Увидимся, нэ ... я шучу. Полностью доставил тебя туда.

В Интернете мы используем язык под названием CSS для описания дизайна страницы. Давай узнаем об этом.

«Пришло чертовски время CSS».

- Абрахам Линкольн

CSS

Препараты

CSS расшифровывается как Cascading Style Sheets, но давайте пока не будем об этом заботиться.

Чтобы упростить задачу, мы начнем с очень простой страницы.

Создайте новый файл в редакторе (быстрое напоминание: Ctrl + N в Windows или Cmd + N в macOS) и сохраните его (Ctrl + S или Cmd + S) на рабочем столе. Я назову его index.html, но вы можете дать ему любое имя!

Скопируйте и вставьте этот код в свой файл:

Если вы откроете страницу в своем браузере, она должна выглядеть так:

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

Давайте добавим стиля

Есть два (распространенных) способа добавить CSS на страницу. Либо с помощью внешнего файла CSS (мы поговорим об этом позже), либо в теге HTML с именем <style>.

Этот тег предназначен для того, чтобы сообщить вашему браузеру: «Все внутри моих открывающих и закрывающих тегов - это CSS, а не HTML. Интерпретируйте это как таковое. Пожалуйста. Спасибо."

Давайте добавим этот тег в наш код в конец нашего тега <body>.

Хорошо, но давайте теперь действительно добавим немного стиля

Итак ... Как мы пишем код с помощью CSS?

По сути, вы сообщаете браузеру, какое правило стиля вы хотите применить и к какому элементу. Например, вы можете сказать: «Я хочу, чтобы все мои заголовки уровня 1 (теги <h1>) использовали шрифт Verdana».

В коде CSS это выглядит примерно так:

h1 {
  font-family: Verdana;
}

Часть h1 находится за пределами фигурных скобок. Он называется селектор. Он сообщает браузеру, какие теги относятся к этому правилу стиля.

Часть font-family находится внутри скобок. Он называется свойством. Он сообщает браузеру, о каком правиле стиля идет речь. В этом случае мы хотим указать имя шрифта, используемого для <h1>.

Часть Verdana называется значением. Мы сказали браузеру, что собираемся изменить шрифт тегов <h1>, но он должен знать, какой шрифт мы будем использовать. В этом роль этой ценности.

Пока мы занимаемся этим, мы также собираемся изменить шрифт для всех абзацев (<p>) на Georgia (на мой взгляд). Вы можете догадаться, как мы это сделаем?

Вот решение:

p {
  font-family: Georgia;
}

И последнее, прежде чем мы добавим это на нашу страницу. Наши заголовки уровня 1 будут использовать шрифт Verdana, что отлично, но мы хотим, чтобы заголовки уровня 2 (<h2>) тоже использовали его. Мы могли бы написать еще один блок для h2, как мы это сделали для h1, например:

h2 {
  font-family: Verdana;
}

Но есть способ лучше! Фактически мы можем указать CSS добавить одно и то же правило стиля к нескольким селекторам, используя запятые. Именно так:

h1, h2 {
  font-family: Verdana;
}

Хорошо! Давайте добавим все эти правила в наш тег стиля:

Обновите страницу в браузере. У вас должно получиться вот что:

Вы видите, как изменился шрифт для наших абзацев и заголовков? Поздравляем, вы только что добавили CSS на свою страницу!

Пойдем дальше

Текст по-прежнему трудно читать. Отчасти это связано с тем, что он занимает всю ширину вашей страницы. Из-за этого, когда вы заканчиваете читать строку, вашим глазам требуется слишком много времени, чтобы перейти к началу следующей. Это затрудняет чтение абзацев.

Мы собираемся уменьшить ширину содержимого страницы. Для этого давайте добавим новое правило, на этот раз для тега <body>!

body {
  width: 65%;
}

Здесь несколько вещей:

  • body - наш селектор, как и раньше p или h1, h2. Поскольку мы хотим уменьшить ширину всего содержимого страницы, мы применяем наше правило к <body>.
  • width это наша собственность. В CSS свойство, управляющее шириной, называется width. Это чистый гений.
  • 65% - наша ценность. Он сообщает браузеру: я хочу, чтобы <body> занимал 65% ширины его родительского тега (ну, это вроде то, что он сообщает, но пока мы будем упрощать). Его родительский тег <html>, который занимает 100% ширины страницы, <body> займет 65% ширины страницы. Я знаю, это непросто, но не волнуйтесь, мы все это попрактикуемся в следующих статьях.

Давайте добавим это к нашему существующему коду:

Вот как сейчас выглядит наша страница:

Видите, насколько он читабельнее? CSS - это круто.

Ok! Последнее правило CSS на сегодня!

Давайте добавим больше места между строками абзаца. Это сделает их еще более читабельными. Что мы действительно хотим сделать, так это сделать наши строки больше: увеличение высоты строки при сохранении того же размера текста заставит их выглядеть более разнесенными! Свойство стиля, управляющее высотой линии, называется… line-height.

p {
  font-family: Georgia;
  line-height: 1.4;
}

Мы даем ему значение 1,4. Это означает, что высота строки будет в 1,4 раза больше размера текста, используемого в абзаце. Если это непонятно (и должно быть, потому что это свойство на самом деле довольно сложное), попробуйте другие значения и посмотрите, как это изменит результат!

Мы добавим это новое правило стиля в наш код:

Перезагрузив нашу страницу, мы получим:

Строки наших абзацев более разнесены, что делает их еще более удобными для чтения.

В заключение или не в заключение (спойлер: в заключение)

Красота CSS

Я буду честен здесь. CSS настолько мощный, насколько может быть сложным. На сегодняшний день эта статья, вероятно, самая сложная для понимания из этой серии, если у вас никогда не было возможности программировать раньше. Не стесняйтесь сообщать мне в комментариях, если что-то непонятно, я постараюсь помочь!

Вы, возможно, уже заметили, что самое замечательное в CSS - это то, что ваш контент (HTML) полностью отделен от вашего дизайна (CSS). Это означает, что две страницы могут иметь один и тот же код в HTML, но разные CSS, и они будут выглядеть совершенно по-разному!

CSS Zen Garden - замечательный сайт, который доводит эту идею до крайности. Основная идея состоит в том, что все, кто размещает там свои страницы, используют один и тот же HTML-код. Они просто используют другой CSS.

Это означает, что этот, этот и этот основаны на одном и том же HTML-коде. Просто они не используют один и тот же CSS. Как видите, для посетителя все они выглядят совершенно по-разному! По сей день я все еще и, вероятно, всегда буду впечатлен этим!

Так что же дальше?

В следующей статье мы узнаем о макете в CSS. В основном, как перемещать контент на странице. На данный момент контент идет сверху вниз, каждый тег за другим, по вертикали. Например, в правой части страницы ничего нет. О, и было бы неплохо, если бы содержимое страницы было выровнено по центру, не так ли (хорошо, позвольте мне дать вам совет: посмотрите margin: auto;))? В CSS есть много способов сделать это. Вот что мы узнаем.

Да, и последнее: когда вы прочитаете следующую статью (в которой мы узнаем о макете), у вас действительно будут довольно приличные основы создания веб-страниц. Я подумываю об организации небольшого конкурса в следующем посте, где вы могли бы прислать мне свои страницы, и я бы представил свои пять любимых! Что вы думаете? Сейчас это просто идея, и я, вероятно, расскажу об этом подробнее в следующем выпуске.

Увидимся в следующий раз!

Следующая статья доступна здесь!

Примечание. Этот пост является частью серии.

Как обычно, не стесняйтесь поделиться этой статьей, если она вам понравилась!