Что такое CSS: суть технологии

Вновь рад приветствовать всех своих читателей! В этой статье мы поговорим о том, что такое CSS, для чего была разработана данная технология и как именно она упрощает нашу работу над сайтами. Каждый владелец интернет-ресурса просто обязан понимать и знать ответы на эти вопросы. Это, безусловно, поможет в продвижении сайта.

Что такое CSS

Итак, чтобы всем было понятно, начну с самого начала. Сегодня, пожалуй, каждый пользователь интернета знает, что любая страница абсолютно каждого сайта это не что иное, как программный html код (что такое html).

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

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

И до каких-то пор эта ситуация всех устраивала. Но с развитием всемирной паутины требования к дизайну сайтов, а также к внешнему виду элементов на их страницах, становились все более жестче. На интернет-ресурсах стали появляться различные группы кнопок, разделы меню и подменю. Ссылки стали делить на ссылки в тексте статей, ссылки в подвале сайта и ссылки в сайдбаре (что такое сайдбар).

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

И само собой количество элементов, которые нуждались в индивидуальном оформлении, вовсе не ограничивалось только ссылками, кнопками и картинками. Это я лишь привожу примеры, на самом деле, этих групп элементов может быть намного больше (что такое гиперссылка).

В результате ужесточения требований к дизайну сайтов html коды страниц превращались в огромные и нечитабельные файлы. Что в свою очередь приводило не только к замедлению работы сайтов, но и к различным программным конфликтам и сбоям. Именно это и предопределило создание CSS.

Что такое CSS

Что такое CSS

Прежде всего, это набор программных атрибутов (свойств) различных объектов сайта, который позволяет создавать индивидуальные стили отображения для отдельных групп элементов сайта. Если дословно, то CSS это Cascading Style Sheets, что в переводе на наш родной язык означает каскадные таблицы стилей. Если вдруг кто-то сейчас меня не понимает, не пугайтесь, все объясню.

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

В случае отсутствия CSS технологии на сайте для каждой ссылки нам необходимо будет прописывать:

1. Синий цвет

1
 color="#3341f9"

2. Подчеркивание при наведении курсора

1
 a:hover {text-decoration: underline;}

Можете себе представить? Вот это все нужно было бы прописывать каждый раз в html коде возле каждой ссылке в тексте! Как думаете, ускоряет это работу сайта? Нет, конечно.

А что нам позволяет сделать CSS? А CSS позволяет нам создать стиль отображения ссылок, указать в нем необходимые параметры (цвет, размер, подчеркивание, выделение и т.д.). И каждый раз, когда нам нужно будет вывести ссылку в тексте, можно будет просто ссылаться на уже готовый стиль.

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

И заметьте, в моем примере, параметров отображения ссылки всего два. А если бы их было, скажем, пять. Представляете теперь всю необходимость и важность CSS? Переоценить данную технологию действительно сложно.

Где хранятся стили CSS

Ну вот мы, наконец, разобрались, что такое CSS и как все это дело работает. А где собственно хранятся все созданные стили? Ответ прост — в отдельном файле, который находится на самом сайте.

Дело в том, что технология CSS встраивается в шаблон сайта еще во время его создания, а точнее во время его верстки. И алгоритм работы стилей, и сами стили внешнего вида, и файл, в котором они хранятся, разрабатываются на этапе верстки (что такое верстка сайта).

Поскольку у меня блог на WordPress, я покажу вам на примере этой системы, где находится файл со стилями (что такое WordPress). В административной панели управления сайтом необходимо пройти в раздел «Внешний вид» => «Редактор». И в правой части экрана можно будет увидеть все файлы сайта, искомой файл со стилями должен быть в нижней части списка:

Что такое CSS

Как вы, наверное, заметили, файл стилей обычно называется style.css. Но хочу отметить, что иногда верстальщики создают для сайта не один, а сразу несколько файлов стилей. Обычно это необходимо для интернет-ресурсов с очень серьезным, разнообразным и многофункциональным дизайном.

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

Кстати, отсутствие CSS далеко не единственный минус, который может быть в шаблоне сайта. Поверьте, шаблон играет очень важную роль в продвижении интернет-ресурса. О том, каким должен быть качественный шаблон и что нужно учесть при его выборе, я скоро напишу отдельный пост. Чтобы не пропустить его, вы можете подписаться на новые статьи моего блога.

Плюсы CSS

Теперь предлагаю перечислить те преимущества и плюсы, которые позволяет получить CSS. А они, уверяю вас, весьма серьезны.

1. Оптимизация программного кода сайта. Представители поисковых систем уже не раз говорили, что роботам нужно помогать разбираться в коде. И чем больше на страницах сайта будет кода, тем сложнее роботу понять, что есть что. А CSS позволяет минимизировать объем кода на странице.

Кстати, за этот аргумент говорит и то, что поисковые системы рекомендуют реализовывать на сайтах микроразметку. Кто еще не знает, что это такое можете почитать — что такое микроразметка.

2. Ускорение работы сайта. Скорость загрузки интернет-ресурса также серьезно влияет на его продвижение. Второй плюс вытекает из первого — чем меньше программного кода на странице, тем быстрей эта страница будет загружаться.

3. CSS позволяет вносить изменения сразу на всех страницах сайта. Если вы вдруг захотите изменить внешний облик каких-либо элементов на своем интернет-ресурсе, вам не нужно будет идти на каждую страницу и вносить изменения для каждого отдельного объекта.

Достаточно будет просто внести соответствующие корректировки в файл стилей. После чего изменения автоматически вступят в силу на всех страницах сайта (что такое веб-страница).

4. И последнее важное преимущество CSS — это более гибкие возможности организации дизайна. Раньше, когда верстальщики шаблонов работали над дизайном сайта, они всегда думали о том, что нужно оптимизировать программный код страниц. Нужно не забывать о том, что сайт должен быть шустрым.

Теперь же при наличии CSS файла, экономить код ради дизайна отдельных элементов не требуется. Что и позволяет реализовывать самые смелые идеи и решения.

Ну что же друзья, на это моя статья, что такое CSS подошла к концу.

Всем удачи! build_links(); ?>

С уважением, ShowFLinks(); // Отступ от блока echo "

"; // Вывод ссылок echo $client_lnk->ShowLinks(); ?> Андрей Наседкин.

Блог: stroika-saitov.ru.

Также полезные статьи для вас:

Что такое мессенджер

Классные расширения для браузера Яндекс и Google Chrome

Гуамское ущелье и поселок Мезмай

Кто такой контент-менеджер сайта

Как закрепить запись на главной странице сайта WordPress

Как настроить браузер для удобного использования

Что такое траст сайта и где его взять

«

»

2 комментария

  1. Петр Кожевников говорит:

    в 00:09

    CSS — великая вещь, в одном месте написал и на других страницах прописывать не надо. CSS развивается, несколько лет назад введен новый продвинутый стандарт CSS.

    Ответить
  2. Петр Кожевников говорит:

    в 00:12

    Очень понятным и доступным языком написана статья. Я с самого начала недолюбливаю CSS, может из за того что синтаксис отличен от html. Ваша статья побудила меня плотнее заняться изучением CSS.

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: