Есть вопросы? Задайте их нам! +7(963)972-82-58 addandiam@gmail.com

Добро пожаловать на наш блог Академии дизайна

Каскадные таблицы стилей(CSS) - язык, используемый для описания формы представления (отображения) Web-страниц. Если проще, CSS определяет внешний вид HTML-страницы, ее оформление, стиль. CSS был разработан W3C в 1996 году и стех пор интенсивно развивается и дорабатывается совместно с HTML.

Что такое CSS

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

История развития CSS

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

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

Курсы веб-дизайна в Москве

Хокон Виум Ли был первым, кто предложил CHSS (каскадные таблицы стилей HTML) в октябре 1994 года. Позже Ли и Берт Бос вместе работали над стандартом CSS (буква H была удалена из-за возможности применения стилей к другим HTML-подобным языкам). В то время был основан Консорциум World Wide Web, который взял на себя работу над CSS с Ли и Босом в авангарде. В конце 1996 года была выпущена официальная документация CSS, Cascading Style Sheets Level 1. W3C утвердил два официальных стандарта CSS: CSS 1 и CSS 2, а 7 июня 2011 года - стандарт CSS 2.1. В настоящее время, с выходом HTML 5 появился и действунт новый стандарт - CSS 3

CSS 3

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

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

С другой стороны, хотя горизонтальное размещение относительно легко сделать, вертикальное размещение часто не очень интуитивно понятно. Простые шаги, такие как центрирование элемента по вертикали, часто требуют сложных операций. Кроме того, CSS делает невозможным определение новых диапазонов независимо от текущей позиции. Кроме того, направление стиля для определенной части текста (кроме :first-letter ) - непростая задача.

CSS-фреймворки

CSS Frameworks - это специально созданные библиотеки, задача которых - облегчить определение стиля для веб-сайтов с использованием каскадных таблиц стилей. Примеры таких библиотек: Foundation, Blueprint, Bootstrap и Cascade Framework. Как и в случае разработки и библиотек, CSS Frameworks обычно включаются как внешние файлы .css в HTML. Они предоставляют готовые решения для веб-дизайна.

Синтаксис CSS

Таблица стилей состоит из правил, определяющих стиль для выбранных элементов документа ( HTML , SVG и других). Правило состоит из селектора и объявления. Селектор определяет группу элементов (редко один элемент), которые необходимо объявить. Объявление определяет форматирование и состоит из имени одного из свойств и его значения, записанного после двоеточия. Объявление должно быть заключено в фигурные скобки.

селектор {свойство : значение}

Кроме того, можно группировать как селекторы, так и объявления. Разделяйте сгруппированные селекторы запятыми, а объявления - точкой с запятой:

селектор1 , селектор2 {свойство1 : значение1 ; свойство2 : значение2 ;}

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

Ниже приведен пример правила для HTML, в котором мы назначаем синий текст всем абзацам:

p {цвет : синий ;}

Здесь селектором является p , свойство color и значение blue.

Селекторы, включенные в первую спецификацию CSS, предоставляют возможность описывать целевую группу элементов с помощью:

  • название элемента (например, "h1")
  • класс элемента (например, «.menu_elements»), также в сочетании с именем элемента (например, «img.wyrownane_do_right»)
  • идентификатор элемента (например, "#menu_lewe")
  • предки данного элемента (например, "div # menu_lewe a" будет применяться к ссылкам, содержащимся в элементе div с идентификатором "menu_lewe")
  • состояние ссылки определяется псевдоклассами (:посещено, :ссылка, :активно)
  • другие типографские псевдоклассы (:first-line :first-letter)

Добавление стилей в документ

Документ можно связать с листом, указав связь первого с отдельным документом CSS с помощью элемента link:

<link rel = "stylesheet" href = "style.css" />

Правила CSS также могут быть размещены внутри заголовка документа HTML благодаря элементу style:

<style type = "text / css" >p {color: red;}</style>

Вы также можете добавлять объявления непосредственно к заданному элементу документа с помощью атрибута style :

<p style = "color: red" >Lorem ipsum</p>

Однако последний метод не рекомендуется, так как он затрудняет сохранение однородности внешнего вида.

Модель наследования или каскадности CSS

Название «Каскадные таблицы стилей» происходит от того факта, что когда правила CSS являются взаимоисключающими на внешнй таблице CSS, внутри HEAD и на уровне элемента HTML, стили имеют иерархический приоритет. Предполагалось, что влияние стилей из внешних таблиц может быть изменено стилями, определенными в HEAD документа, и они могут быть изменены правилами, определенными непосредственно в теле документа. Таким образом, стили, определенные «ближе» к форматируемому элементу, имеют приоритет. Порядок, в котором браузер интерпретирует правила форматирования для данного элемента, следующий:

  • таблийа веб-браузера по умолчанию (независимо от автора страницы)
  • таблица пользователя браузера по умолчанию (как указано выше)
  • внешние таблицы стилей и определения стилей в HEAD документа
  • определения style атрибуте style элемента.

Эта модель работы показывает, как работает каскад стилей. Нет необходимости иметь какие-либо конфликты между стилями из разных источников - все стили будут дополнять друг друга, создавая один большой «виртуальный» стиль.