С английского языка CSS переводится как Cascading Style Sheets или каскадная таблица стилей. Именно она отвечает за то, как будет сайт и его блоки, страницы выглядеть визуально у нас на ноутбуках, стационарных компьютерах, на планшетах и мобильных телефонах.
По сути без CSS кода, сайт бы выглядел как простая HTML структура, размеченная по основным блокам и частям сайта, такие как header, navigation, sidebar, footer, main - или основная часть с контентной областью.
Обычно CSS указывается в файлах с расширением .css. Например, main.css - здесь можно указать основные или главные стили сайта. Файл mobile.css - здесь указываются мобильные стили или стили, которые начинают работать и применяться к элементам сайта и страницам, при определении браузером, что устройство, с которого открыт был сайт - это мобильный телефон или планшет. На маленьких сайтах или лендингах, css код может записываться прямо в теге <head></head>, обрамляется обычно css код в тег <style></style> и внутри этого тега пишутся уже стили, в соответствии с синтаксисом CSS.
Именно CSS определяет, как будет расположен каждый элемент на странице сайта, каков будет размер и отступы у текста, какие будут применяться и подгружаться шрифты на странице. Будет ли изображение большое или маленькое, будет ли меню ниспадающее или обычное линейное. За это и многое другое отвечает CSS. Давайте рассмотрим, как функционирует и за что отвечает таблица стилей CSS на сайте.
ОСНОВНЫЕ ФУНКЦИИ CSS НА САЙТЕ
Задание цветов элементам, цветов буквам, цифрам, текстам. Например, нужно подсветить и выделить ключевое и важное слово? Или требуется изменить цвет кнопок при наведении мышкой, данная команда на изменение цвета прописывается в css файле.
За расположение блоков сайта, ширину, отступы, размеры блоков, слайдеров, картинок, текстовых областей, зоны меню, зоны футера или хедера, за это тоже отвечает CSS сайта.
Анимации элементов, затемнение или наоборот осветление картинок, создание прозрачности или потускнения у картинки, плавное выкатывание пунктов меню, выделение зон форм захвата другим цветом при наведении - все это задается и прописывается в CSS файлах.
Наверное, Вы заметили, что одни и те же элементы сайта по разному ведут и отображаются на десктопных и на мобильных устройствах. На десктопе слайдер большой может показываться, а на мобильной верстке он может просто исчезнуть (отвечает свойство display: none), или возможно на десктопе картинки и подпись к ним одного размера, а на мобильном экране появляется полоса прокрутки, картинки уменьшаются и текст тоже. Есть замечательные медиа-запросы, @media {.selector: some comand; }. С помощью @media запросов, можно задать размеры экранов, при которых данные медиа запросы работают, и изменяют поведение тех или иных компонентов, блоков и элементов сайта.
Синтаксис медиа-запроса может быть таким:
@media [тип устройства] and ([характеристика]) { /* CSS-правила */ }
@media (min-width: 768px) { ... } /* Ширина экрана больше 768px */
@media (max-width: 1399.98px) { ... } /* Ширина экрана меньше 1400px */
@media (min-width: 576px) and (max-width: 1199.98px) { ... } /* Диапазон ширины */
Например, наиболее часто медиа-запросы прописываются для следующих разрешений экрана:
@media (max-width: 480px) - это небольшие смартфоны с небольшим экраном.
@media (min-width: 481px) and (max-width: 768px) - это смартфоны с большим экраном или небольшие планшеты.
@media (min-width: 769px) and (max-width: 1024px) - средние и большие планшеты.
@media (min-width: 1025px) and (max-width: 1200px) - медиа запросы для ноутбуков и ПК
@media (min-width: 1201px)x) - экраны ноутбуков, стационарных компьютеров.
Современный код CSS3 позволяет делать анимации, формировать дрожание, 2D анимацию или 3D анимацию элементов. Например, при наведении мышью, карточка товара или акции может задрожать или перевернуться, показывая свою заднюю часть с другой надписью.
КРАТКИЙ СИНТАКСИС CSS, СЕЛЕКТОРЫ И КЛАССЫ, VIEWPORT CSS
Перед началом написания HTML кода, в теге head всегда прописывают мета-тег viewport,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Именно данный тег говорит браузеру, что занимай по размерам весь экран браузера, первоначальное увеличение - с коэффициентом 1.0, что значит - показывай изначальный масштаб страницы, не сжимая или не увеличивая ее.
Далее всегда идет работа с классами и селекторами. У каждого блока, элемента, секции на Вашей странице сайта, задается определенный идентификатор, по которому DOM-дерево браузера, сам браузер и таблица стилей понимает, к какому элементу идет обращение.
Например, есть селлектор, #some_selector, некий селектор, и значок # - говорит о том, что данный селектор может быть единственным с таким названием (some_selector) в css файле. Такой селектор используется, чтобы идентифицировать какой-то важный, уникальный элемент на сайте.
<div id="some_selector">Уникальный блок на сайте</div> - по данному селлектору, браузер поймет, что нужно в файле main.css обратиться к селектору уникальному #some_selector и взять инструкции CSS, применимые к этому элементу.
Классы - еще один тип разметки и определения элементов. В отличие от уникального идентификатора решетки - #, классы могут вызываться и повторяться много раз, запись класса в файле например, style.css формируется примерно так:
.wrapper_nav {
width: 100%;
height: 60px;
font-size: 24px;
line-height: normal;
display: flex;
flex-direction: row;
margin-bottom: 10px;
}
В самом файле style.css обычно класс записывается через точку впереди .css_class, и это также позволяет браузеру понять, что в структуре HTML, к элементу с классом css_class нужно применить стили, которые записаны в файле css у данного класса, .css_class
Например, есть блок <div class="css_class">Некий элемент</div>, к нему в файле style.css мы прописываем инструкцию, как будет выглядеть этот некий элемент и какой будет у него цвет
.css_class {
display: block;
background-color: green;
border: 2px solid grey;
font-size: 20px;
}
Обычно в файле .css , который подключается в теге head к сайту, прописывание стилей идет от наиболее важных и ключевых элементов сайта к менее важным. То есть обычно прописывают вначале стили ко всему тегу <html></html>, потом к тегу <body></body>, затем к тегам footer и header, указываются стили меню <nav></nav>, стили и поведение боковой панели сайта <aside></aside> и т.д. Медиа-запросы лучше писать в отдельном файле по мобильной верстке, для удобства редактирования и управления элементами сайта.
ЧТО ТАКОЕ GRID, FLEX ВЕРСТКА?
Grid Layout и Flex Layout - это встроенные в CSS язык, модули для разработки гибкой и адаптивной верстки. До 2010 года в основном использовалась блочная верстка, программистам и верстальщикам надо было постоянно просчитывать размеры блочных элементов при формировании мобильной верстки, чтобы данные элементы не наезжали друг на друга, при изменении экранов мобильных устройств.
Было очень неудобно верстать с помощью блочной верстки, необходимо было писать много строк кода, задавать и проверять постоянно отступы. С разработкой и внедрением flex и grid верстки, данная проблема ушла.
ЧТО ТАКОЕ FLEXBOX ВЕРСТКА?
Flexbox layout - это встроенный модуль, шаблон CSS, позволяющий располагать элементы на экране по гибкой сетке.
Flexbox верстка получила широкое распространение и ее полюбили многие владельцы сайтов и разработчики, благодаря ее адаптивности, простоте, быстрому написанию кода, простоте выравнивания элементов, управлению порядком, высота у контейнеров как правило, устанавливается автоматически.
Для центровки и расположения элементов во flexbox layout существуют две оси, ось X - горизонтальная и ось Y - вертикальная. По этим осям располагаются элементы, они могут сжиматься, расширяться, иметь исходные размеры. Могут подниматься вверх или вниз по оси Y в браузере, или двигаться по оси X вперед и назад. Центрироваться по центру, по левому краю, по правому краю. Могут отображаться согласно установленному в css коде порядку, column или row.
Как правило, формируется внешний контейнер для внутренних блоков и контента. У которого задается свойство display: flex. Внутри данного контейнера элементы могут быть как блочными так и flex-элементами. Расположение и отступы между элементами во флекс-контейнере также задается в соответствии с синтаксисом flexbox верстки.
Для полного изучения свойств данной верстки, рекомендуем обратиться к руководству по Flexbox на CSS-Tricks. Для получения подробных концепций для начинающих и примеров в действии, можно ознакомиться с версткой Flexbox на сайте MDN.
ЧТО ТАКОЕ GRID ВЕРСТКА?
Может применяться к любым XML-документам, например, к SVG или XUL.
