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 — это размер содержимого и отступов блока, не включая рамки.
Рекомендуемые материалы:
Спецификации: