By Qiryn
Сегодня, пожалуй, каждый пользователь интернета знает, что любая страница абсолютно каждого сайта это не что иное, как программный html код.
Именно с помощью программного кода наши браузеры понимают, что именно находится на странице сайте – где заголовок, где текст, где кнопки, где поля для ввода данных и т.д. Другими словами html позволяет разобрать страницу сайта по запчастям и дает понять, что где и как нужно показать.
До появления CSS технологии html код отвечал не только за содержание страниц, но и за оформление всех элементов на ней. К примеру, он мог содержать в себе информацию о размере шрифта заголовка, о выделении ссылок другим цветом при наведении курсора, о размере шрифта подзаголовков, о цвете ссылок на странице, и так далее.
И до каких-то пор эта ситуация всех устраивала. Но с развитием всемирной паутины требования к дизайну сайтов, а также к внешнему виду элементов на их страницах, становились все более жестче. На интернет-ресурсах стали появляться различные группы кнопок, разделы меню и подменю. Ссылки стали делить на ссылки в тексте статей, ссылки в подвале сайта и ссылки в сайдбаре.
Естественно каждой отдельной группе элементов сайта необходимо было придать свой индивидуальный стиль и внешний вид. Нужно было сделать так, чтобы кнопки основного меню отличались от кнопок подменю, чтобы ссылки в тексте статей были не похожи на ссылки в подвале сайта, чтобы на одних страницах изображения имели контур, а на других он отсутствовал.
И само собой количество элементов, которые нуждались в индивидуальном оформлении, вовсе не ограничивалось только ссылками, кнопками и картинками. Это я лишь привожу примеры, на самом деле, этих групп элементов может быть намного больше.
В результате ужесточения требований к дизайну сайтов html коды страниц превращались в огромные и нечитабельные файлы. Что в свою очередь приводило не только к замедлению работы сайтов, но и к различным программным конфликтам и сбоям. Именно это и предопределило создание CSS и CSS суть.
Что такое CSS
CSS суть. Прежде всего, это набор программных атрибутов (свойств) различных объектов сайта, который позволяет создавать индивидуальные стили отображения для отдельных групп элементов сайта. Если дословно, то CSS это Cascading Style Sheets, что в переводе на наш родной язык означает каскадные таблицы стилей.
Возьмем опять же обычные ссылки на сайте. К примеру, мы хотим, чтобы все ссылки, расположенные в тексте статьи, имели синий цвет, плюс подчеркивались при наведении курсора.
В случае отсутствия CSS технологии на сайте для каждой ссылки нам необходимо будет прописывать:
- Синий цвет
color=”#3341f9″ - Подчеркивание при наведении курсора
a:hover {text-decoration: underline;}
Можете себе представить? Вот это все нужно было бы прописывать каждый раз в html коде возле каждой ссылки в тексте. Как думаете, ускоряет это работу сайта? Нет, конечно.
А что нам позволяет сделать CSS? А CSS позволяет нам создать стиль отображения ссылок, указать в нем необходимые параметры (цвет, размер, подчеркивание, выделение и т.д.). И каждый раз, когда нам нужно будет вывести ссылку в тексте, можно будет просто ссылаться на уже готовый стиль.
Понимаете? Нам не нужно будет каждый раз для каждой ссылки указывать все параметры отображения. Достаточно будет просто указать стиль, согласно которому необходимо показать ту или иную ссылку.
Где хранятся стили CSS
Ну вот мы, наконец, разобрались, что такое CSS и как все это дело работает. А где собственно хранятся все созданные стили? Ответ прост — в отдельном файле, который находится на самом сайте.
Дело в том, что технология CSS встраивается в шаблон сайта еще во время его создания, а точнее во время его верстки. И алгоритм работы стилей, и сами стили внешнего вида, и файл, в котором они хранятся, разрабатываются на этапе верстки.
В административной панели управления сайтом необходимо пройти в раздел «Внешний вид» => «Редактор». И в правой части экрана можно будет увидеть все файлы сайта, искомой файл со стилями должен быть в нижней части списка. Файл стилей обычно называется style.css. Но хочу отметить, что иногда верстальщики создают для сайта не один, а сразу несколько файлов стилей. Обычно это необходимо для интернет-ресурсов с очень серьезным, разнообразным и многофункциональным дизайном.
Отсутствие в шаблоне CSS файла сегодня считается плохим стилем веб-программирования. Но, справедливости ради нужно сказать, что таких сайтов в современном интернете практически не осталось. Обычно только новички блогосферы умудряются где-то находить старые шаблоны, на которых еще не реализована и не внедрена технология CSS.
Кстати, отсутствие CSS далеко не единственный минус, который может быть в шаблоне сайта. Поверьте, шаблон играет очень важную роль в продвижении интернет-ресурса.
Плюсы CSS
Теперь предлагаюрассмореть CSS суть и перечислить те преимущества и плюсы, которые позволяет получить CSS. А они, уверяю вас, весьма серьезны.
Оптимизация программного кода сайта – CSS суть. Представители поисковых систем уже не раз говорили, что роботам нужно помогать разбираться в коде. И чем больше на страницах сайта будет кода, тем сложнее роботу понять, что есть что. А CSS позволяет минимизировать объем кода на странице. Кстати, за этот аргумент говорит и то, что поисковые системы рекомендуют реализовывать на сайтах микроразметку.
Ускорение работы сайта. Скорость загрузки интернет-ресурса также серьезно влияет на его продвижение. Второй плюс вытекает из первого — чем меньше программного кода на странице, тем быстрей эта страница будет загружаться.
CSS позволяет вносить изменения сразу на всех страницах сайта. Если вы вдруг захотите изменить внешний облик каких-либо элементов на своем интернет-ресурсе, вам не нужно будет идти на каждую страницу и вносить изменения для каждого отдельного объекта. Достаточно будет просто внести соответствующие корректировки в файл стилей. После чего изменения автоматически вступят в силу на всех страницах сайта.
И последнее важное преимущество CSS — это более гибкие возможности организации дизайна. Раньше, когда верстальщики шаблонов работали над дизайном сайта, они всегда думали о том, что нужно оптимизировать программный код страниц. Нужно не забывать о том, что сайт должен быть шустрым.
Теперь же при наличии CSS файла, экономить код ради дизайна отдельных элементов не требуется. Что и позволяет реализовывать самые смелые идеи и решения.
