На этой странице

Основы CSS


CSS (Cascading Style Sheets — каскадные таблицы стилей) — язык описания внешнего вида документа , написанного с использованием языка разметки .

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

До появления CSS оформление Web – страниц осуществлялось исключительно средствами HTML , непосредственно внутри содержимого документа . Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа . За счёт этого нововведения ста ло возможным лёгкое применение единого стиля оформления для массы схожих документов , а также быстрое изменение этого оформления .

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


CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название (стандарты Web) . В 1990 – х годах стала ясна необходимость стандартизировать Web , создать какие-то единые правила , по которым программисты и Web – дизайнеры проектировали бы сайты . Так появились языки HTML 4.01 и XHTML , и стандарт CSS .

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

Термин (каскадные таблицы стиле) был предложен Хоконом Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS .

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

В середине 1990-х Консорциум Всемирной паутины (W3C) стал проявлять интерес к CSS , и в декабре 1996 года была издана рекомендация CSS1 .

CSS1


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

Параметры шрифтов : – Возможности по заданию гарнитуры и размера шрифта , а также его стиля — обычного , курсивного или полужирного .

Цвета : – Спецификация позволяет определять цвета текста , фона , рамок и других элементов страницы .

Атрибуты текста : – Возможность задавать межсимвольный интервал , расстояние между словами и высоту строки (то есть межстрочные отступы).

Выравнивание для текста , изображений , таблиц и других элементов .

Свойства блоков , такие как высота , ширина, внутренние (padding) и внешние (margin) отступы и рамки . Также в спецификацию входили ограниченные средства по позиционированию элементов , такие как float и clear .

CSS2


Рекомендация W3C, принята 12 мая 1998 года . Основана на CSS1 с сохранением обратной совместимости за несколькими исключениями . Добавление к функциональности :

Блочная вёрстка : – Появились относительное , абсолютное и фиксированное позиционирование . Позволяет управлять размещением элементов по странице без табличной вёрстки .

Типы носителей : – Позволяет устанавливать разные стили для разных носителей (например монитор , принтер , КПК) .

Звуковые таблицы стилей : – Определяет голос , громкость и т. д. для звуковых носителей (например для слепых посетителей сайта) .

Страничные носители : – Позволяет , например , установить разные стили для элементов на чётных и нечётных страницах при печати .

Расширенный механизм селекторов .

В настоящее время W3C больше не поддерживает CSS2 и рекомендует использовать CSS2.1

CSS2.1


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

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

CSS3


CSS3 (Cascading Style Sheets 3 — каскадные таблицы стилей третьего поколения) — активно разрабатываемая спецификация CSS . Представляет собой формальный язык , реализованный с помощью языка разметки . Самая масштабная редакция по сравнению с CSS1 , CSS2 и CSS2.1 . Главной особенностью CSS3 является возможность создавать анимированные элементы без использования JS , поддержка линейных и радиальных градиентов, теней , сглаживания и прочее .

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

CSS4


Разрабатывается W3C с 29 сентября 2011 года .

Модули CSS4 построены на основе CSS3 и дополняют их новыми свойствами и значениями . Все они существуют пока в виде черновиков (working draft) .

Поддержка CSS браузерами


Наиболее полно поддерживающими стандарт CSS являются работающие на движках Gecko (Mozilla Firefox и др.) , WebKit (Safari , Arora , Google Chrome) и Presto (Opera)Web – браузеры .

Бывший самый распространённый браузер Internet Explorer 6 поддерживает CSS не полностью .

Вышедший спустя семь лет Internet Explorer 7 значительно улучшил уровень поддержки CSS , но всё ещё содержал значительное количество ошибок .

В Internet Explorer 8 используется новый движок , который полностью поддерживает CSS 2.1 и частично — CSS 3 .

Различные блоковые модели


В стандартах CSS от Консорциума W3C используется модель , в которой свойство width определяет ширину содержимого блока , не включая в неё отступы и рамки . Ранние версии Internet Explorer (4 и 5) реализовали собственную модель , в которой width определяет расстояние между рамками блока , включая отступы (padding) и рамки (border) . Кроме Internet Explorer 5 , эту модель также понимают браузеры Netscape 4 и Opera 7 . Поддержка стандартной модели W3C появилась в IE только в шестой версии .

В разрабатываемом стандарте CSS3 для решения этой проблемы введено свойство box-sizing со значениями content-box для указания на использование стандартной модели W3C и border – box для использования модели IE 5 .

В браузере Mozilla при поддержке этого свойства под собственным рабочим названием -moz-box-sizing ввели ещё одно значение — padding-box , таким образом создав третью блочную модель , в которой width — это размер содержимого и отступов блока , не включая рамки .

Рекомендуемые материалы:

Спецификации: