CSS

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

HTML+CSS

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

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

Значение CSS

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

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

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

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

CSS каскадные таблицы стилей

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

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

Селекторы

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

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

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

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

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

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

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

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

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

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

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

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