АСМР Уроки — CSS Введение

Опубликовано автором

Видео с ВК

Этимология CSS

CSS (Cascading Style Sheets) «каскадные таблицы стилей». Формальный язык описания дизайна Веб-страниц. Созданным, обычно на HTML или XHTML. Умеет применяться к XML-документам, таким как, к SVG или XUL.

Использование CSS

    Применяется Веб-дизайнерами для:

  1. Задания цветов;
  2. Шрифтов;
  3. Стилей;
  4. Расположения отдельных элементов.

Основной задачей CSS, является разграничение верстки и дизайна веб-документа. То есть, теперь, для того, чтобы изменить структуру документа, например: добавить текстовые блоки, заголовки, таблицы и ссылки – используется старый добрый HTML. А вот для того, чтобы отредактировать их внешний вид, например изменить цвет, положение, начертание, гарнитуру, размер – используется отдельный язык – CSS. Таким образом упрощается и оптимизируется графический дизайн веб-документов.

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

CSS — одна из множества технологий, сертифицированных консорциумом «W3C» и названная ими «Стандарты Web», как ответ на необходимость стандартизировать для Веб-Дизайнеров, WEB-разработку в 1990-х годах. В 1990-х браузеры имели, зачастую — свои стили для веб-документов, и это не позволяло достаточно эффективно заниматься дизайном.

В 1994 году Термин «каскадные таблицы стилей» был придуман лично Хоконом Ли. После чего, вместе с Бертом Босом онначал развивать CSS.

К середине 1990-х (W3C) заинтересовался в CSS, и декабрём 1996 года издал рекомендацию CSS1.

Уровень 1 (CSS1)

    Рекомендация принята 17 декабря 1996г, а скорректирована 11 января 1999г. Возможностей этой рекомендации:

  1. Параметры шрифтов. Задание гарнитуры и размера шрифта, а также – стиля: (Обычный, курсивный, полужирный);
  2. Цвета. Определение цвета текстов, фона, рамок и других элементов web-страницы;
  3. Атрибуты текста. Задание межсимвольного интервала, расстояния между словами, высоты строки (Межстрочных отступов);
  4. Выравнивание для текста, картинок, таблиц и др. элементов;
  5. Свойства блоков. Например — высота, ширина, внутренние и внешние отступы, рамки. Средства позиционирования элементов.

Уровень 2 (CSS2)

Рекомендация принята 12 мая 1998г. Основана она на CSS1, с соблюдением обратной совместимости.

    Добавление к функциональности:

  1. Блочная вёрстка. Управление размещением элементов по веб-странице;
  2. Типы носителей. Установка разных стилей для разных носителей. Таких как — монитор, принтер или карманный компьютер;
  3. Звуковые таблицы стилей. Определение голоса и громкости для звуковых носителей, для слепых посетителей сайта;
  4. Страничные носители. Установка разных стилей для элементов на чётных и нечётных страницах;
  5. Расширенный механизм селекторов;
  6. Указатели;
  7. Генерируемое содержимое. Добавление содержимого, отсутствующего в исходном веб-документе, до или после нужного элемента;
  8. Сегодня W3C не поддерживает CSS2. Рекомендуется использовать — CSS2.1.

Уровень 2 — Ревизия 1 (CSS2.1)

Рекомендация принята 7 июня 2011г.

CSS2.1 базируется на CSS2. Исправлены ошибки, изменены некоторые части спецификации, а другие вовсе удалены, но могут быть добавлены в CSS3 в будущем.

Уровень 3 (CSS3)

Каскадные таблицы стилей. Третье поколение. Активно разрабатываемая спецификация CSS. Является формальным языком, реализованным при помощи языка разметки. Самая масштабная редакция на сегодня. Основной особенностью CSS3 называют — возможность создания анимированных элементов не используя JavaScript, а также поддержка линейных и радиальных градиентов, теней, сглаживаний и прочего.

Обычно используется как инструмент описания и оформления дизайна веб-страницы, написанной на языке HTML и XHTML. Также, способен применяться к любым XML-документам. Таким как SVG и XUL.

    Разрабатываемая версия и список всех модулей:

  1. В отличие от предшественников, спецификация разбита по модулям, разработка и развитие которых производится независимо. CSS3 основан на CSS2.1. CSS3 дополняет существующие свойства и значения и добавляет новые;
  2. Нововведения, например — закруглённые углы блоков, трансформация, введение переменных.

Видео из ОК: