Skip to content

Latest commit

 

History

History
229 lines (155 loc) · 11.6 KB

03. Стилизуем вёрстку через ЦСС.md

File metadata and controls

229 lines (155 loc) · 11.6 KB
Raw

Стилизуем вёрстку через ЦСС

Чистая вёрстка это понятно, но как самому стилизовать элементы? Для этого используется ЦСС.

Сегодня мы будем говорить про стилизацию страницы, но для начала — разберем прошлое задание.

Мой ответ:

Вёрстка лёгкая и без сюрпризов:

  • title для заголовка вкладки,
  • main как основной тег,
  • nav для блока с навигацией,
  • header для первого этажа,
  • section для остальных,
  • h1, h2, h3 для заголовков,
  • ul, li для списков (кстати, ul это unordered list, а li — list item),
  • aside для дополнительного контента.

Про main и header / nav / footer в нём хорошо сказано в спефицикации HTML:

The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or application’s main function is that of a search form).

Уточню, что мой ответ не может быть единственно правильным. Если у вас есть вопросы, почему так или иначе — задавайте в чат.

Про семантику заголовков

По заголовкам есть небольшая заметка: поисковики очень придирчивы, по сути они читают страницу через заголовки. Есть несколько правил:

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

Заголовки — про семантику, а не про стиль.

Если вам нужно сделать текст с большим шрифтом, то застилизуйте span или другой элемент.

Пример как плохо: на странице района у Калинки есть карточки жилых комплексов и объектов.

Они выделены h3 — это приемлимо, но дальше идут блоки h2 «Согласие на обработку персональных данных клиентов — физических лиц» и «Связаться» — это вообще не имеет никакого отношения к контенту.

Кстати, для СЕО я использую расширение SEO META in 1 CLICK. Название дурацкое, но свою задачу выполняет.

Атрибуты ХТМЛ

Но один сюрприз в моей вёрстке есть: у меня рабочая навигация, у тега a есть нечто href="#whoami", а у section — id="whoami". Что это такое?

У тегов есть атрибуты — специальные значения для конкретного элемента.

Давайте попробуем с картинками: у тега img (htmlreference) есть атрибут src (source) — адрес и alt — описание.

<img src="https://placeimg.com/640/480/arch" alt="Фотография зданий" />
Фотография зданий Пример

У ссылок есть атрибут href — адрес, куда ссылка ведёт. Почему у меня ссылка была <a href="#whoami">? Потому что # это ссылка на блок с айди: у меня же есть <section id="whoami">.

Атрибуты у тегов лучше смотреть на том же htmlreference.io.

Стилизация

Мы подобрались к венцу урока: стилизации через ЦСС. Что такое вообще ЦСС (CSS)? Это Cascading Style Sheets, если примитивнее — правила стилизации элементов.

В ЦСС есть два основных концепта: селекторы и правила. Селекторами мы выбираем элемент, а правилами описываем его поведение.

Кстати, какой справочник по ЦСС? Конечно же, cssreference.io.

Селекторы

Селекторы это адрес элементов — например, мы можем обратиться ко всем параграфам или картинкам. Как?

p {
}

img {
}

Но как обратиться к конкретным элементам? Для этого у тегов есть атрибут class и селектор .class. Либо id и #id — но стилизовать по айди это признак дурного тона.

Правила

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

p {
  color: red;
}

Правил очень много, вот список категорий:

Как их все запомнить? Только через практику. В этом уроке мы разберем типографику и бэкграунды элементов, а в следующем — боксовую модель, флексбоксы и позиционирование.

Типографика в ЦСС

Правил на типографику не так уж много:

  • color: цвет текста, указывается либо в hex либо в rgb() значениях,
  • font-family: семейство шрифта,
  • font-size: размер шрифта (в пикселях),
  • font-style: стиль шрифта (normal, italic или oblique),
  • font-weight: жирность шрифта от 100 до 900, шаг в 100 (110 нет, 200 — да),
  • line-height: высота строки относительно размера шрифта (например, 1.4),
  • text-align: выравнивание текста в блочном элементе: left (по-умолчанию), center или right,
  • text-shadow: тень текста.

Бэкграунды в ЦСС

Бэкграундов и того меньше, на cssreference отличная подборка с демками: cssreference.io/backgrounds.

А где это всё писать?

Есть два способа связать ХТМЛ и ЦСС.

Через тег <style>:

В <head> можно объявить тег <style></style> и там писать ЦСС:

...
<head>
  <style>
    p {
      background-color: #282C34;
    }

    a {
      color: #C678DD;
    }
  </style>
</head>
<body>
  ...
</body>

В отдельном файле .css

Либо вы пишите ЦСС в отдельном файле с расширением .css и затем подключаете через <link rel="stylesheet" href="">, где href это путь к файлу.

- index.html
- styles.css

Как выглядит styles.css:

p {
  background-color: #282c34;
}

a {
  color: #c678dd;
}

Так выглядит index.html:

...
<head>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  ...
</body>

Что за ./? Это относительный путь: точка означает текущую директорию, а слэш / это разделитель.

Если бы мы положили styles.css в отдельную директорию css, то путь был бы ./css/styles.css.

Задача

Вы должны научиться стилизовать.

Возьмём вчерашнюю страницу и поэкспериментируем с её стилями:

  • у header должен быть розовый бэкграунд (#FD739C) и белый цвет текста,
  • заголовки h1 и h2 должны быть с шрифтами без засечек (например, Arial или Helvetica),
  • размер основного шрифта должен стать в 22 пикселя с высотой строки в 34.

Про стиль кода

Стиль кода — один из первичных навыков разработчика. Если вы пишете плохой, неоптимизированный код — ничего страшного, если его можно прочесть. Я давно писал пост об этом в своём телеграм-канале.

Как понять, какой код понятный? В вёрстке используется codeguide.co.

К счастью, в джаваскрипт-мире есть prettier — утилита, которая сама форматирует код. Больше никаких споров о точках с запятыми!

Кстати, в Вскод автоматическое форматирование кода при сохранении — это очень удобно.

Итог

Этот урок — примитивный ЦСС. Мы не затронули блочную модель, флексбоксы и позиционирование — это будет в следующих уроках.

Сейчас ваша задача научиться стилизовать текст и немного бэкграундов.

Не забывайте задавать вопросы в чате — там обязательно помогут 💪🏻

Помните: нет глупых вопросов, есть лишь страх их задавать.