CSS

CSS – это формальный язык, отвечающий за описание внешнего вида документа (HTML, XHTML, XML). Расшифровка аббревиатуры Cascading Style Sheets дословно означает «каскадные таблицы стилей». Сегодня работа большинства сайтов построена на связке HTML+CSS.

code-6635389

Немного истории

Изначально разработчики применяли только язык HTML. Используя разметку, они выделяли параграфы, заголовки, изменяли начертание текста. Сейчас этих возможностей объективно мало, поэтому и появилась технология, которая помогает форматировать и при этом сохранять содержание и структуру. Необходимость ее разработки была упомянута консорциумом W3C еще 90-е годы прошлого века. Первый стандарт CSS1 был принят в 1996 году. Согласно ему, можно было менять цвет, параметры шрифта, выравнивания, отступы, атрибуты текста. В 1998 году вышел CSS2, который добавил возможностей использования блочной верстки, генерируемого содержания, звуковых таблиц и др. А с выходом версии CSS3 еще больше увеличились возможности стилей. Теперь для создания анимированных элементов не нужно применять JavaScript. Спецификацию поделили на модули, и каждый из них стал развиваться самостоятельно. С 2011 года разрабатываются модули CSS4.

Значение CSS

Если говорить простыми словами, то HTML структурирует контент, а CSS – форматирует и помогает сделать его более привлекательным. Фактически отделяется содержание страницы и ее внешний вид.

Разберем по пунктам, зачем нужны каскадные таблицы стилей:

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

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

code-2-3983230

Структура языка

Так, что же такое CSS? Это набор правил внешнего оформления документа. Формирование каждого правила происходит из селектора и блока объявлений.

Селекторы

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

«Тег.Класс {свойство: значение;}»

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

С помощью идентификатора задается уникальное имя элемента для изменения стиля или обращения посредством скрипта. Запись имеет следующий вид:

«#Идентификатор {свойство: значение;}»

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

Блок объявлений

Данный элемент CSS состоит из парной комбинации и имеет вид «свойство: значение». Записывается всегда в фигурных скобках и через двоеточие, а заканчивается точкой с запятой. CSS нечувствителен к пробелам и регистру. Разработчик сам выбирает способ записи, который ему удобен: в строчку или столбиком с отступами. Если для одного селектора указаны разные значения по одному свойству, то в приоритете будет всегда нижняя запись.

Практическая интеграция CSS

Существует несколько способов для связи CSS и HTML:

  • использование атрибута style внутри тега. В таком случае селектор указывать не нужно;
  • добавление тега <style> с атрибутом type=»text/css»;
  • подключение внешней таблицы стилей: <link rel=»stylesheet» href=»директория style.css» type=»text/css»/>.

Последний вариант является наиболее популярным, так как разработчик имеет доступ ко всем преимуществам разделения формы и содержания, которые предполагает CSS.