Привет! В этой статье ты узнаешь что такое css, для чего он нужен, как ускорить работу с css. Статья рассчитана на людей, которые только недавно решили влиться в тему Веб-дизайна. Если вы знаете, что такое Flex и Grid я не думаю что эта статья будет вам полезной. Приятного прочтения!
CSS Это?
Css ( Cascading Style Sheets ) — Каскадные таблицы стилей. Звучит весьма непонятно. Давайте скажу проще. До этого я говорил, что существует язык разметки документа HTML, спрашивается, зачем тогда нужен какой-то непонятный CSS? Действительно, раньше стили CSS могли и вовсе не применяться, но сейчас без них никуда. CSS позволяет разместить элементы документа куда угодно, добавить адаптив под разные разрешения экрана, добавить разные шрифты, задавать фон сайта, и даже добавить анимацию! Это ли не круто?
Давайте для примера я покажу как выглядит сайт на чистом HTML:
Сайт, с использованием css:
Вот так на простом примере можно увидеть как сильно может повлиять наличие css на внешний вид страницы.
Я бы сказал, что HTML и css это Инь-Ян. Никто не будет создавать сайт без Css, но и без HTML тоже ничего не выйдет.
Ближе к делу
Мы разобрали для чего нужен CSS так давайте же начнем его изучение.
Виды таблиц стилей
Существует три вида таблиц стилей:
- Внешняя таблица стилей
- Внутренние стили
- Встроенные стили
Внешняя таблица стилей это файл, имеющий расширение .css, который содержит исключительно стили, HTML-кода там нету. Помните в прошлой статье мы говорили про тег <head></head>? В этом теге и подключается таблица стилей, с помощью тега <link>, выглядит это так:
Как видите, все максимально просто!
Внутренние стили. Тут нам уже не нужно создавать отдельный документ .css, достаточно создать тег <style></style> внутри <head> и писать там все нужные нам стили. Выглядит это так:
Хмм, а зачем тогда создавать отдельный документ какой-то, если можно писать все в одном спросите вы. Стоит понимать, что стили могут быть огромные, так-же, как и документ HTML, и если вы допустите ошибку при верстке то будет очень сложно разобраться где это произошло. Поэтому настоятельно рекомендую писать css в отдельном документе.
Встроенные стили. Пишутся вообще прямо в необходимом теге:
Такой вариант вряд-ли можно назвать правильным. Разве что в случае, если необходимо поправить несколько маленьких объектов, но не более. Страшно представить, что будет, если использовать такой метод для стилизации всей страницы.
Стили лучше всего писать в отдельном документе, который имеет расширение .css! Так будет гораздо понятнее и вам, и тем кто будет разбирать вашу верстку.
Запоминаем основы
Если вы хоть чуть-чуть знаете английский то это просто замечательно! Вам гораздо легче будет выучить основы css! Давайте с простого:
- Фоновый цвет — background-color
- Цвет(например для текста) — color
- Размер шрифта — font-size
- Прозрачность — opacity
- Ширина — width
- Высота — height
Представим что у нас есть некий объект с классом block, применив к нему стили, указанные выше, его ширина станет 200px, высота 100px, размер шрифта 25px, и задний фон будет красный.
Так, а что такое классы? Это атрибут, который позволяет определить равные стили с одинаковым именем класса. Это как вообще?
Допустим у нас из примера выше есть класс .block который носит некоторые стили, эти стили мы можем применить и на другой объект, добавив к нему класс .block
А что такое id
А вот id уже нельзя применять для нескольких тегов, иначе может произойти ошибка. Вот как то так.
Как писать стили быстро?
Сейчас уже мало кто пишет стили не используя при этом препроцессоры. Что такое препроцессор? Это некая программа, которая ускоряет вашу работу. Так в чем же плюсы Sass/Scss?
- Вложенность. Позволяет вкладывать правила CSS друг в друга, что значительно ускоряет процесс работы.
2. Переменные. Это очень полезная вещь. Представьте, что вам часто нужно использовать красный цвет, и вместо того, чтобы постоянно писать color: red, вы можете сохранить в переменной этот цвет а потом просто указывать ее название, вот так: color: $col-red. Теперь изменив значение переменной, мы можем поменять совершенно все цвета, где использовалась эта переменная.
Есть еще много преимуществ препроцессоров, и если изучить эту технологию как следует, вы сможете гораздо быстрее работать, а при устройстве на работу, если вы скажете что вы умеете использовать scss и sass, это будет значительным плюсом в вашу сторону!