С английского языка 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 ВЕРСТКА?
Grid Layout в CSS - это продвинутый инструмент верстки и расположения элементов и блоков страницы в браузере, по сетке. Читая код css в файле css, браузер понимает, как вы задали расположение тех или иных элементов.
Есть row grid - это когда расположение элементов страницы (слайдеры, портфолио, блоки текстов, табы и тд) - идет по рядам. С помощью grid css можно задать порядок расположения элементов в ряде, указать, сколько частей страницы в браузере займет тот или иной элемент, одну часть, две части или например, 3 части из 5 возможных.
Есть column grid - это когда браузер видит вашу команду в css о расположении элементов по колонкам вниз.
В обоих случаях прописываются команды grid-template-columns и grid-template-rows, где можно задавать размеры в пикселях, процентах или использовать специальную единицу измерения fr (fractional unit) - дробная единица или часть, например, вы можете указать, что весь header займет 5fr, то есть всю длину ряда, а блок с телефоном например 1fr, то есть 1/5 части от всего пространства в блоке header сайта.
Если нужно подвинуть, сделать отступ элементов друг от друга, вывести красиво и гармонично сетку товаров, то есть замечательное свойство - gap, column-gap и row-gap, именно они позволяют создать промежутки между элементами, можно указать в пикселях (px) и в процентах от контейнера, в котором помещаются те или иные элементы.
Удобные свойства выравнивания элементов относительно родительского контейнера и самих себя, позволяют не использовать блочную команду float. Что дает более высокую точность позиционирования элемента, легкую адаптивность и кросс-браузерность. Выполняется выравнивание с помощью команд - align-items и justify-content.
В общем и целом, grid css, flex css можно комбинировать, получая действительно качественный результат, красиво сверстанные страницы, которые будут легко и корректно адаптироваться к любым мобильным экранам. Что очень важно в эпоху мобильного интернета.
Больше данных и раскрытия понятий и терминов читайте в нашей энциклопедии.
Может применяться к любым XML-документам, например, к SVG или XUL.
