Эмоционально верстаем: CSS

Эмоционально верстаем: CSS

Больше вкусностей найдешь на моем канале - https://telete.in/emotional_robot


Продолжаем цикл статей "Эмоционально верстаем". Если кто пропустил начало, оно здесь.

Как я говорил, самая главная составляющая любого сайта, его скелет - это HTML. Нам предоставляется огромный набор из тегов и атрибутов, которые позволяют верстать макеты сайтов. Однако, с одними тегами и атрибутами далеко не уедешь в плане красоты макета. Как задать ширину и длину блока? Как воткнуть два элемента в одну строку, разделив их границами? Как задать цвет фона и текста? Как воткнуть кастомные шрифты? Что нужно написать для красивого отображения макета при различных размерах экрана? Ответ один - каскадные таблицы стилей, или CSS.

Что такое CSS


И где там наша Википедия? А вот она:

CSS (/siːɛsɛs/ англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

Тут особо объяснять нечего. У нас есть написанный на языке HTML документ, и для описания его внешнего вида мы используем другой язык. Проблема в том, что поначалу трудно запомнить CSS свойства, которыми часто придется пользоваться, так как их довольно много. Плюс возникают различные нюансы при росте числа стилей - если делать все в лоб и в одном файле, довольно быстро начнется хаос, который разгребать придется очень долго. Об этих нюансах и способах организации стилей мы поговорим в других статьях.

Где описывать стили для документа


Напоминаю, что все примеры я описываю в своем публичном репозитории, который можно найти по этому адресу. Пример для этой статьи расположен в директории "src/css-example".

Открываем файл "index.html" и сразу ищем внутри тега "<head></head>" тег "<style></style>". Да, это первый способ описания стилей, прямо в том документе, для которого они предназначены. Давайте разбираться, что творится внутри этого тега.

Первое, что мы видим:

* {

      margin: 0;

      padding: 0;

}

Как ни странно, у каждого браузера есть свои дефолтные стили, которые выливаются в различные кривости. Например, у тега <body></body> внезапно может появиться внешний отступ сверху на 8 пикселей (margin-top: 8px), или у другого тега верхнего уровня. Из-за чего вверху сайта будет небольшая белая полоса. Чтобы быстренько избавиться от дефолтных стилей, мы пишем символ "*", затем в фигурных скобках обнуляем все отступы (margin - внешние отступы, padding - внутренние отступы). Звездочка означает применить стили ко всем тегам.

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

Способы описания стилей

1) Описание стилей для тегов. Посмотрите внимательно на некоторые записи ниже стилей со звездочкой. Они выглядят так: header { ... }, aside { ... }, nav { ... } и так далее. Таким образом мы описываем стили для конкретных тегов. В чем подвох? В том, что эти стили будут применяться для любых тегов, то есть, если в документе будет два тега "article", то стили, написанные как "article { ... }", применятся для обоих тегов. Это не всегда подходит, поэтому существуют более юзабельные способы.

2) Описание стилей для классов. В прошлой статье я попросил вас запомнить универсальный атрибут, с помощью которого можно задать стили тегу. Имя ему - class. Он работает аналогично предыдущему способу - стили, написанные для класса, будут применяться для всех тегов, у которых будет указан этот класс. Преимущество в том, что теперь вы сами управляете, для каких именно элементов необходим набор стилей, добавляя атрибут class="className".

Откройте файл "pages/3.html" и посмотрите на этот кусок кода:

<q>Простота — предел совершенства</q> - <span class="red-color">Леонардо да Винчи Каприо</span>

В теге "<span></span>" указан атрибут " class="red-color" ". Этот же класс указан у второго тега "<span></span>" ниже:

<q>Дико плюсую</q> - <span class="red-color">Какой-то челик</span>

Описав стили для класса "red-color", мы зададим внешний вид сразу двум тегам. Таким образом, не придется писать одинаковые стили разным элементам.

Стили для классов описываются так:

.red-color {

  color: red;

}

Ставится впереди точка, затем имя класса, затем также в фигурных скобках задаются стили. В данном примере мы установили красный цвет текста ("color: red;").

3) Описание стилей для уникального идентификатора. И самый простой способ задания стилей - конкретному элементу. Для этого внутри нужного тега указываем атрибут "id":

<div id="page-container">

Затем для описания стилей именно этому элементу используется следующий синтаксис:

#page-container {

      position: relative;

      min-height: 100vh;

}

В начале ставится символ "#", затем аналогично задаются стили.

Итого: описывать стили можно конкретному элементу (атрибут "id"), набору элементов (атрибут "class") или целым тегам (div, p, a и так далее). Кстати, все эти "#blabla", ".tututu", "div", "aside" называются селекторами.

Стили отдельным файлом


В файле "index.html" мы увидели пример описания стилей внутри тега "<style></style>". В принципе, это нормальный вариант для простых сайтов, которые состоят максимум из 4-5 страничек. Но такие сайты, скорее всего, либо в глубоком забвении, либо существуют как тренировочные, аналогично нашему примеру. В реальной жизни сайты всегда сложные, и чтобы стили в каждом документе не копипастить из одного тега "<style></style" в другой, существуют самостоятельные файлы для размещения в них стилей с расширением "css".

Откройте файл "css/style.css". Внутри вы найдете тот же код, что и внутри тега "<style></style>" в файле "index.html". В чем прикол отдельного файла?

Откройте файл "pages/1.html" и найдите внутри тега "<head></head>" следующую строчку:

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

Именно таким способом подключаются внешние файлы со стилями. Вообще, тег "<link />" подключает не только стили. Более подробно о нем можете прочесть тут. Там же описаны все атрибуты, которые ему доступны.

Фишка в том, что таким образом вы можете подключить одну и ту же таблицу стилей в любом документе. Именно это происходит в файлах "pages/2.html" и "pages/3.html". Главное - не забывайте указывать атрибуты "class" и "id" нужным элементам, а то вы стили подключите, а применяться им не к чему будет.

Итого: самый лучший вариант описания стилей - в отдельных файлах "*.css" с последующим их подключением к нужным документам.

Итого

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

Читать о всех CSS свойствах можно в уже знакомом вам htmlbook.ru, но для полноты картины предложу еще два хороших справочника: html5book.ru и learn.javascript.ru. Читайте, что делает каждое свойство, выбирайте и запоминайте те, которыми будете пользоваться (как минимум, изучите внимательно background (со всеми вытекающими, по типу "background-color" или "background-image"), color, margin, padding, width, height, border, border-radius, float, position, font). Смотрите на код в моем репозитории и гуглите те вещи, которые непонятны (например, в чем разница между процентами и "vh"), или пишите мне. Пусть это будет домашнее задание, потому что вы должны учиться самостоятельно искать информацию, этот навык такой же важный, как умение кодить.

Дальше мы будем разбираться с различными вариантами верстки макетов.



Создано с помощью Tgraph.io