История создания css – Странности CSS, о которых полезно знать / RUVDS.com corporate blog / Habr — Вебджем.рф

Содержание

История CSS

CSS – это широкий спектр технологий, который одобрен консорциумом WЗС и получил такое название, как «Web Стандарты». В 1990 г. возникла необходимость стандартизировать их в какие-то определенные единые правила, благодаря которым веб-дизайнеры и программисты проектировали бы сайты. Именно так и появились такие языки, как XHTML, HTML 4.01 и стандарт CSS.

В самом начале 1990 года, для того, чтобы отображать веб-страницы, разные браузеры обладали своими собственными стилями. Развитие HTML было очень быстрым и он был способен удовлетворять на тот момент все существовавшие потребности по оформлению информации, именно поэтому тогда и не получил широкого признания CSS.
И лишь Хокон Виум Ли в 1994 году предложил для HTML документов использование концепции «каскадные таблицы стилей». В то далекое время браузеры имели ограничение в функционале. А в 1990 году язык HTML, который создал Тим Бернерс-Ли, полагал сделать не визуальное, а структурное отображение документов.

Один из основателей Netscape, Марк Андреесен, в 1994 году 13 октября сообщил, что доступна для тестирования от Netscape Navigator первая версия. И за три дня до проведения тестирования, норвежский программист, сейчас он является сотрудником компании Opera Software, Хокон Виум Ли публикует черновой вариант CSS. На сегодняшний день он имеет слишком мало схожего с принятыми современными стандартами, но именно тогда был заложен общий смысл.
Самым первым, кто откликнулся на такую идею, был Берт Бос. В те времена он и создал новый браузер Argo. В визуальном оформлении была возможность использовать не только язык CSS, и консорциуму WЗС предоставили около 9 стилей языков.
В ноябре 1994 года в Чикаго на Веб-конференции, как и планировалось, был предоставлен первый черновик CSS. Дебаты различного политического характера и разрешение некоторых технических вопросов продолжались в течение двух лет, но 1996 года 17 декабря W3C официально зарекомендовал CSS1.

Уровень развития первый (CSS1).
На данном этапе имеется возможность задавать гарнитуру и размер шрифта, а еще изменять его стиль: обычный, курсив или полужирный. Благодаря спецификации имеется возможность определять рамки, фоны, цвета текста и другие элементы страницы. Можно задавать расстояние между словами, межстрочные отступы и межсимвольный интервал. А также производить выравнивание текста, таблиц, изображений. Имеются свойства внутренних и внешних отступов и рамок, ширины, высоты и блоков. А также входили в данную спецификацию ограниченные средства по позиционированию различных элементов, например, clear и float.
Самый первый браузер для использования являлся Microsoft Internet Explorer 3. Вышел 1996 года в августе, он то и поддерживал новый принятый стандарт. Microsoft Internet Explorer 3 понимает отлично все свойства текста, шрифта, фона, цвета, но использование блочной модели происходило лишь частично.
Уровень развития второй(CSS2).
Рекомендация от консорциума W3C, которую приняли 1998 году 12 мая. Она основана на CSS1, а также сохранила обратную совместимость с добавлением некоторых функций, а именно:
1) Возникло фиксированное, абсолютное и относительное позиционирование. С помощью чего появилась возможность управлять размещением элементов без табличной верстки по странице.
2) Для разных носителей возможность устанавливать разными стилями.
3) Для звуковых носителей появилась возможность определять громкость и голос.
4) Позволяет устанавливать на нечетных и четных страницах во время печати различные элементы.
5) Расширился механизм селекторов.
6) Возможность добавлять содержимое, которое не содержится в исходном документе.
На данный момент W3C не поддерживает CSS2 и настоятельно рекомендует применять CSS2.1.
Уровень второй, ревизия первая (CSS2.1).
Рекомендация принята 2011 года 7 июня. Она основывается на CSS.2. Исправлены ошибки и удалены некоторые функции.

Уровень третий (CSS3).
Очень сильно расширены функции. Введены нововведения, начиная от мелочей, заканчивая трансформацией, а также введение новых переменных.

. кс соурс история история css’ . история css’ кс соурс история

Комментирование и размещение ссылок запрещено.

Очерки истории CSS / RUVDS.com corporate blog / Habr

Размышляя об HTML и CSS, вы, наверное, представляете себе их как технологии, которые всегда были вместе. Однако, через годы после того, как в 1989-м Тим Бернерс-Ли создал World Wide Web, CSS ещё и в помине не было. Первоначальные концепции, на которых построен веб, совершенно не предусматривали способов стилизации сайтов.

Вот небезызвестный пост из архивов старых рассылок. Его написал Марк Андриссен в 1994-м. Он приложил руку к созданию браузеров Mosaic и Netscape. В этом материале Андрессен отмечает, что так как не существует способа стилизации веб-сайтов с использованием HTML, единственное, что он может сказать веб-разработчикам, которые задают ему вопросы о графическом дизайне, было: «извиняюсь, но вы попали».

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

Поиск языка стилизации

Во времена появления WWW существовало множество идей, касающихся того, как, в теории, можно оформлять веб-страницы. Однако, в глазах Бернерса-Ли это была далеко не самая важная задача. Дело в том, что его работодатели в CERN были, в основном, заинтересованы в веб как в цифровом каталоге, в котором, например, могли публиковать работы их сотрудники. Вместо некоего стандарта тогда существовало несколько конкурирующих языков для макетирования веб-страниц, созданных различными разработчиками, среди которых были Пэй-Ян Вэй, Андриссен и Хокон Виум Ли.

Например, Пэй-Ян Вэй создал графический браузер ViolaWWW в 1991-м. Он встроил собственный язык стилей прямо в браузер, стремясь к тому, чтобы сделать этот язык официальным стандартом для веб. До такого уровня этот язык так и не добрался, но это вдохновило разработчиков других технологий. Среди этих технологий вполне могли оказаться и те, у которых был шанс дорасти до уровня стандарта.

Браузер ViolaWWW сразу после релиза

Тем временем Андриссен, в собственном браузере Netscape Navigator, пошёл другим путём. Вместо того, чтобы создавать отдельный язык, предназначенный для стилизации веб-страниц, он просто расширил HTML, включив в него нестандартные теги, которые можно было использовать для целей веб-дизайна. К несчастью, это было незадолго до того, как веб-страницы потеряли семантическое значение и выглядело это примерно так:

<MULTICOL COLS="3" GUTTER="25">
  <P><FONT SIZE="4" COLOR="RED">This would be some font broken up into columns</FONT></P>
</MULTICOL>

Программисты быстро поняли, что такой подход долго не протянет. Существовало множество альтернативных идей, вроде RRP, языка стилей, который характеризовался краткостью, или PSL96, языка, который поддерживал функции и условные выражения. Если вам любопытно взглянуть на эти технологии, почитайте данную публикацию Зака Блума, который исследовал древние способы стилизации веб-страниц.

Идея, которая привлекла всеобщее внимание, впервые была озвучена Хоконом Виумом Ли в октябре 1994-го. То, что он предложил, называлось каскадными таблицами стилей — Cascading Style Sheets, или просто CSS.

Почему мы пользуемся CSS

CSS жив до сих пор благодаря его простоте, особенно в сравнении с некоторыми его ранними конкурентами.

window.margin.left = 2cm
font.family = times
h2.font.size = 24pt 30%

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

CSS был, однако, уникальным в одном важном аспекте. А именно, он позволял применять стили каскадно. Эта особенность отражена в его названии. «Каскадное» применение стилей означает, что стили могут наследовать и переопределять другие стили, которые были объявлены ранее, следуя довольно сложной иерархии, которую называют специфичностью. Прорыв, однако, заключался в том, что CSS поддерживал наличие нескольких таблиц стилей на одной и той же странице.

Обратите внимание на процентное значение в вышеприведённом фрагменте кода. Это, на самом деле, очень важная особенность. Ли полагал, что пользователи и дизайнеры будут задавать стили в разных таблицах. Затем браузер будет играть роль посредника между этими двумя списками стилей и урегулировать «споры» при рендеринге страниц. Это процентное значение показывают лишь то, какой «вес» придаётся конкретному параметру, заданному дизайнером. Чем это значение меньше — тем выше вероятность того, что оно будет переопределено пользователем. Когда Ли впервые рассказывал о CSS, он даже показал слайдер, который позволял ему переключаться в браузере между стилями пользователя и разработчика.

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

Скоро после того, как Ли опубликовал своё первое предложение, он нашёл соратника в лице Берта Боса. Бос создал браузер Argo, и, в ходе работы, собственный язык стилей, некоторые фрагменты которого в итоге вошли в CSS. Эти двое начали работать над более детальной спецификацией и в итоге обратились за помощью в недавно созданную рабочую группу по HTML в W3C.

Это заняло несколько лет, но к концу 1996-го, вышеприведённый пример кода изменился и стал выглядеть так:

html {
  margin-left: 2cm;
  font-family: "Times", serif;
}

h2 {
  font-size: 24px;
}

Так появился CSS.

Проблема с браузерами

В то время как CSS был всё ещё всего лишь черновиком стандарта, в Netscape уже были встроенные презентационные HTML-элементы вроде multicol, layer и жуткого тега blink. При работе над Internet Explorer, с другой стороны, было решено включить в него некоторые возможности CSS. Однако, поддержка их была нестабильной, и, в те времена, полной ошибок. Это означало, что в ранние годы, после того, как CSS уже пять лет играл роль официальной рекомендации, всё ещё не было браузеров с полной поддержкой CSS.

Ситуацию изменил один интересный случай.

Когда Тантек Селик присоединился к команде разработки Internet Explorer для Macintosh в 1997-м, эта команда была довольно маленькой. Через год он стал ведущим разработчиком движка рендеринга, тогда же его команду уменьшили вдвое. Microsoft, по вполне очевидным причинам, больше интересовала Windows-версия Internet Explorer, и команду Macintosh практически бросили на произвол судьбы. В результате, начиная с разработки версии 5 в 2000-м, Селик и его команда решили сосредоточиться на том, чем раньше никто плотно не занимался, а именно — на поддержке CSS.

Internet Explorer

На завершение работы над 5-й версией IE у команды ушло около двух лет. В это время Селик часто общался с членами W3C и веб-дизайнерами, использующими разрабатываемый его командой браузер. Когда всё встало на свои места, команда разработки IE для Mac проверила, всеми возможными способами, правильность выбранного ей направления. И, наконец, в марте 2002-го они выпустили IE 5 для Macintosh — первый браузер с полной поддержкой CSS Level 1.

Переключение типа документа

Но учитывайте, что в Windows-версии IE CSS работал с ошибками, и там использовалась блочная модель, отличающаяся определёнными странностями. Она применялась для описания того, как вычисляются размеры элементов, и того, как затем эти элементы выводятся на экран. Internet Explorer поддерживал атрибуты вроде border или padding, но пространство под них выделялось внутри элемента. В то же время, официальная спецификация CSS предлагала, чтобы эти значения добавлялись к ширине и высоте элементов. То же самое делалось и в IE 5 для Mac. Если вы экспериментировали когда-нибудь с box-sizing, вы точно знаете — в чём тут разница.

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

Всем известны теги объявления типа документа (doctype). Они располагаются в самой верхней части HTML-документов:

<!DOCTYPE html>

Но в былые времена выглядело это так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

Это пример типа документа, соответствующего стандартам. Самое важное тут — //W3C//DTD HTML 4.0//EN. Когда веб-дизайнер добавляет это на свою страницу, браузер знает о том, что выводить страницу надо в стандартном режиме (standards mode), и CSS будет соответствовать спецификации. Если тега doctype нет, или он устарел, браузер переключится в режим совместимости (quirks mode) и будет рендерить страницу в соответствии со старой блочной моделью, со всеми её недостатками, оставшимися в своём исходном виде. Некоторые разработчики специально, ради использования старой блочной модели, устанавливали соответствующий тип документа.
Режимы отображения документа

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

Хак для блочной модели

Осталось понять ещё одну вещь. Переключение типа документа хорошо работало в современных браузерах для вывода старых веб-сайтов, но не в старых браузерах (особенно в IE) для работы с более новыми веб-сайтами. Тогда и появился так называемый Box Model Hack, остроумное решение проблемы, которое предложил Селик. Тут применялся практически никогда не используемый атрибут CSS voice-family для того, чтобы обмануть браузеры и позволить использовать в одном и том же классе несколько значений ширины и высоты. Селик предложил разработчикам сначала ставить ширину, которая применялась при использовании старой блочной модели, затем закрывать тег с использованием voice-family, а далее — давать ширину для новой блочной модели. Выглядело это так:

div.content { 
  width: 400px; 
  voice-family: ""}""; 
  voice-family: inherit;
  width: 300px;
}

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

Первопроходцы дизайна, основанного на стандартах

В 2001-м вышел Internet Explorer 6. Он, в итоге, стал главной проблемой веб-разработчиков, но он шёл с весьма впечатляющей поддержкой CSS и стандартов. Не говоря уже о том, что его рыночная доля составляла порядка 80%.

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

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

В те времена два крупных и известных сайта, с промежутком в несколько месяцев, подверглись серьёзному редизайну. Речь идёт о веб-ресурсах Wired и ESPN.

Дуглас Боуман был ответственен за веб-дизайн журнала Wired. В 2002-м он и его команда проанализировали ситуацию и пришли к выводу, что ни один серьёзный сайт пока не использует CSS. Боуман почувствовал почти что долг перед веб-сообществом, перед теми, кто обращается к Wired в поиске самых свежих новостей из мира высоких технологий. Он полагал, что сайт Wired должен использовать последние стандарты в области HTML и CSS и подтолкнул команду к тому, чтобы сделать дизайн сайта с нуля. В сентябре 2002-го они завершили работу и показали новый сайт. Он даже прошёл валидацию.

Обновлённый сайт Wired

Разработчики из ESPN показали новый сайт всего через несколько месяцев, используя множество таких же подходов, даже если рассматривать всё в очень общих чертах. Эти сайты сделали крупную ставку на CSS, на технологию, о которой некоторые думали, что долго она не продержится. Но они выиграли. Если вы спросите любого, кто работал над этим редизайном, он даст вам список сильных сторон CSS длиной в простыню. Среди плюсов CSS — возможность быстрее и эффективнее менять дизайн, возможность повторного использования стилей, и, что самое важное, дело в том, что CSS отлично подходит для веба. Эти возможности так увлекли дизайнеров, что на сайте Wired, в самом начале, даже ежедневно меняли цвет.

Обновлённый сайт ESPN

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

Итоги

В следующем году, а именно, в 2003-м, Джеффри Зельдман опубликовал книгу Designing with Web Standards, которая стала чем-то вроде настольного справочника для веб-дизайнеров, желающих делать своё дело основываясь на стандартах. Благодаря этой книге дизайнеры могли отказаться от техник «старой школы» и увидеть возможности CSS. Годом позже Дейв Шеа запустил CSS Zen Garden, который предлагал дизайнерам взять обычную HTML-страницу и по-разному сделать её макет с использованием CSS. Сайт стал своего рода музеем достижений CSS и сыграл определённую роль в том, чтобы донести до сообщества веб-дизайнеров мысль о том, что время стандартов пришло.

Критическая масса принятия CSS нарастала медленно, но верно. Этот язык развивался, в нём появлялись новые атрибуты. Браузеры соревновались друг с другом в реализации последних стандартов, а дизайнеры и разработчики добавляли новые приёмы в свой репертуар. В результате CSS стал нормой. Теперь без него невозможно представить себе веб-дизайн и кажется, что так было всегда.

Уважаемые читатели! Что вам больше всего нравится и не нравится в использовании CSS для стилизации веб-страниц?

CSS — Что такое, преимущества и история создания / ProgLang

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

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

CSS легко освоить и понять, но он обеспечивает мощный контроль над представлением HTML-документа. Чаще всего CSS комбинируется с языками разметки HTML или XHTML.

Преимущества CSS

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

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

Простота обслуживания. Чтобы внести глобальные изменения, просто измените стиль, и все элементы на всех веб-страницах будут обновляться автоматически.

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

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

Глобальные веб-стандарты. Теперь атрибуты HTML устарели, и рекомендуется использовать CSS. Поэтому неплохо было бы начать использовать CSS во всех HTML-страницах, чтобы сделать их совместимыми с будущими браузерами.

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

Независимость от платформы. Скрипт обеспечивает независимость от платформы и поддерживает новейшие браузеры.

История: кто создает и поддерживает CSS

CSS был предложен Хоконом Виумом Ли 10 октября 1994 года и поддерживается через группу людей из W3C, называемой рабочей группой CSS. Рабочая группа CSS создает документы, называемые спецификациями. Когда спецификация обсуждается и официально утверждается членами W3C, она становится рекомендацией.

Эти ратифицированные спецификации называются рекомендациями, поскольку W3C не контролирует фактическую реализацию языка. Независимые компании и организации создают это программное обеспечение. Примечание. Консорциум Всемирной паутины (The World Wide Web Consortium) или W3C – это группа, которая дает рекомендации о том, как работает Интернет и как он должен развиваться.

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

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

CSS2 стал рекомендацией W3C в мае 1998 года и основывается на CSS1. Эта версия добавляет поддержку для конкретных таблиц стилей, например, принтеров и звуковых устройств, загружаемых шрифтов, элементов позиционирования и таблиц.

CSS3 стал рекомендацией W3C в июне 1999 года и основывается на более старых версиях CSS. Он разделен на документацию, которая называется «Модулями» и здесь каждый модуль имеет новые расширенные функции, определенные в CSS2.

Модули CSS3

Модули CSS3 имеют старые спецификации CSS, а также расширенные функции.
Селекторы.
Блоковая модель.
Фоны и границы.
Значения изображения и замененный контент.
Текстовые эффекты.
Преобразования 2D/3D.
Анимация.
Расположение нескольких столбцов.
Пользовательский интерфейс.

Поделитесь:

История css

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

17 декабря 1996 года была издана рекомендация CSS1.

Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
Выравниваниедля текста, изображений, таблиц и других элементов.
Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки.

12 мая 1998 года принята CSS2. Построена на CSS1с сохранением обратной совместимости. Добавление к функциональности:

Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной вёрстки.
Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК).
Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.
Расширенный механизм селекторов.
Указатели.
Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента.

Включение css в html

Существует целых четыре способа включения в HTML-документ таблицы стилей:

Внедрение — позволяет задавать все правила таблицы стилей непосредственно в самом документе
Встраивание в теги документа — позволяет изменять форматирование конкретных элементов страницы
Импортирование — позволяет встраивать в документ таблицу стилей, расположенную на сервере
Связывание — позволяет использовать одну таблицу стилей для форматирования многих страниц HTML

Включение css в html. Внедрение

Описание стилей располагается в коде Web-странички, внутри тега <STYLE type=»text/css»>… </STYLE>. Тег <STYLE> размещается внутри контейнера HEAD.

Параметр type=»text/css» является рекомендованным и служит для указания браузеру использовать CSS. В этом случае описанные стили можно использовать для элементов, располагающихся в пределах странички.

Включение css в html. Встраивание

Описание стиля располагается непосредственно внутри тега элемента, который описывается. Это делается с помощью параметра STYLE, используемого при применении CSS с большинством стандартных тегов HTML. <tag >

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

Включение css в html. Импортирование

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

Cоздается обычный текстовый файл. Чаще с расширением CSS (mystyles.css) . C помощью языка CSS в нем описываются необходимые стили. Этот файл размещается на Web-сервере.

В теге <STYLE> с помощью свойства @import можно импортировать внешнюю таблицу стилей в текущую стилевую таблицу.

В качестве типа носителя выступают различные устройства:

all — Все типы. Это значение используется по умолчанию.
screen — Экран монитора.
print— Печатающие устройства вроде принтера.
aural— Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
braille— Устройства, основанные на системе Брайля, предназначенные для слепых людей.
handheld — Наладонные компьютеры и аналогичные им аппараты.
projection — Проектор.
tv — Телевизор.

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

История развития HTML • Vertex Academy

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Краткая предыстория

Давным давно, практически на заре цивилизации (до 70-х годов XX века), не было интернета. Вообще не было.

С появлением компьютеров появилось желание и потребность как-то их объединить, и 4 крупных университета США взялись за эту задачу. Примерно 7 лет прошло от создания концепции до исторического момента:

29 октября 1969 года был проведен сеанс связи между двумя первыми узлами сети ARPANET, на расстоянии в 640 км: в Калифорнийском университете и в Стэнфордском исследовательском институте. Ученый из Лос-Анджелеса подключился удаленно к компьютеру в Стэнфорде. Стэнфордский коллега видел, как появляются на экране символы, введенные на расстоянии, и подтверждал по телефону передачу каждой буковки. Таким образом началась эпоха компьютерных сетей.

Долгое время Интернет был предназначен только для специалистов и служил в основном для обмена технической документации и имейлами. Простому пользователю делать там было нечего. И только в начале 90-х прошлого века произошла революция «интернет-народу!» 🙂

1991 год

Британец Тимоти Джон Бернерс-Ли в Женевском ЦЕРНе изобрел язык гипертекстовой разметки, он же HyperText Markup Language, он же HTML, предназначенный для разметки и оформления документов World Wide Web.

Ах да! Еще Сэр Тим разработал глобальный гипертекстовый проект (сейчас Вы его знаете как Всемирную паутину). Собственно, HTML и родился в процессе работы над этим проектом.

Язык HTML

HTML это наследник SGML, вот только создавался он для того, чтобы им могли пользоваться и люди-неспециалисты в области верстки. Т.е. уже с первых дней у HTML были такие плюсы:

Простота — за счет небольшого набора структурных элементов – дескрипторов (они же «теги»). Все теги пишутся в угловых скобках, напр. <img> и несут какую-то смысловую нагрузку
Возможность форматировать документ без привязки к средствам отображения (будь то монитор компьютера, экранчик телефона, или ридер)

И как вы уже, наверное, догадались, первый в мире веб-сайт создал тоже Тим Бернерс-Ли 🙂 И если точная дата изобретения HTML не известна (т.к. это был долгосрочный проект), то день рождения первого сайта очень даже — это было 6 августа 1991 года. Кстати, его можно увидеть и сегодня, правда уже в архиве.

Полагаю, все веб-разработчики с полным правом могут считать именно 6 августа своим профессиональным праздником 🙂

Как вам понравилась первая веб-страница? 🙂 Думаю, большинству из вас не захотелось её читать и уж тем более оставаться там надолго. Создатели тоже понимали, что это только начало, и пошло поехало:

Июнь 1993 — HTML 1.2

В этой версии, из её сорока с копейками тегов уже появилось аж 3 тега, которые намекали на какое-то визуальное оформление документа (например, полужирный курсив). Остальные же теги служили исключительно для логической разметки.

1994 год — основание W3C

Сэр Тим Бернерс-Ли основал Консорциум Всемирной Паутины (World Wide Web Consortium, W3C). Миссией W3C было и остается

Полностью раскрыть потенциал Всемирной паутины, путём создания протоколов и принципов, гарантирующих долгосрочное развитие Сети

Огромная заслуга этих ребят принадлежит в том, что HTML был выпущен с единым базовым набором тегов и атрибутов и веб-страницы стали такими, какими мы их знаем сейчас. Только представьте, в середины девяностых, несколько крупнейших производителей ПО планировали выпустить свои версии HTML со своими названиями тегов. Какая каша была бы сейчас в сфере веб-разработки! Например объявления о работе: «Ищем верстальщика для создания сайтов в Mozilla Firefox», «Срочно требуется верстальщик для Edge», «Нужен верстальщик для Kindle»… словом, спасибо W3C 🙂

22 сентября 1995 – Версия 2.0

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

Запросы: например поиск по ключевым словам.
Формы для передачи данных с компьютера на сервер: например ввести дату рождения или выбрать один из нескольких вариантов в опроснике.

Март 1995 – начало работы над HTML 3.0

Первый вариант стандарта включал в себя много интересностей:

теги для создания таблиц,
разметки математических формул,
обтекание изображений текстом и др.

Авторы вдруг вспомнили, что по своей идее HTML должен только размечать структуру документа и не должен содержать параметры графических стилей отображения элементов в браузере.

При создании HTML 3.0 разработчики ломали голову, как решить нестыковку между идеологией структурной разметки и потребностями пользователей, которых гораздо больше интересовал внешний вид веб-страницы.

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

17 декабря 1996 – CSS

CSS (Cascading Style Sheets), а по-русски – иерархические стилевые спецификации. Думаю, понятней не стало?)) Если совсем уж по-русски, то это таблицы стилей, которые присоединяются к документу HTML и служат для визуального оформления тех или иных частей документа.

Итак, система CSS:

формально не зависит от HTML,
у неё свой, отличный от HTML, синтаксис,
На неё не влияют идеологические ограничения HTML,
Она позволяет задавать параметры внешнего представления для любого тега HTML.

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

Чтобы наглядно продемонстрировать чудеса, на которые способен CSS, канадец Дейв Ши создал сад CSS дзена – место, где сотни веб-разработчиков медитируют верстая одну и ту же HTML-страницу с абсолютно разными стилями CSS

Влияние Microsoft

А тем временем, в далекой-далекой галактике… Microsoft заметил стремительный взлет компании Netscape на продаже браузеров Navigator и конечно же, не мог стоять в стороне. В MS слегка переработали браузер Mosaic и начали выпускать свои эксплореры, которые поначалу не очень полюбились пользователям (да и не только поначалу;)).

В августе 1996 была создана версия Internet Explorer 3.0 Браузер предлагал значительные нововведения на то время и обрел популярность, что поделило рынок браузеров пополам между Netscape Communications и Microsoft.

И в это же время Microsoft взял под свою опеку W3C.

14 января 1997 – HTML 3.2

Версия 3.2 вышла спустя месяц после утверждения CSS, и была уже полностью приспособлена к взаимодействию с таблицами стилей.

В ней были опущены многие нововведения версии 3.0, но добавлены нестандартные элементы, поддерживаемые браузерами Netscape Navigator и Internet Explorer 3.

18 декабря 1997 – HTML 4.0

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

Новая версия включала поддержку фреймов, скриптов, общую процедуру внедрения разных объектов. Также в ней были усовершенствованы таблицы и формы, что кроме прочих плюсов обеспечивало большую доступность для людей с физическими недостатками.

Версия HTML 4 была разработана с помощью экспертов в области интернационализации, таким образом стало возможно писать документы на любом языке и легко передавать их по всему миру.

24 декабря 1999 – HTML 4.01

В этой версии слегка подправили объекты, формы и изображения, пофиксили баги и в целом создали более стабильную версию, которой пользовались веб-разработчики более 10 лет.

Рабочая группа WHAT

2004 год: Швейцарский программист Ян Хиксон (на тот момент разработчик в Opera) и несколько представителей таких компаний как Mozilla, Google и Apple, основал рабочую группу под названием WHATWG (Web Hypertext Application Technology Working Group).

Поводом для создания подобного сообщества стал тот факт, что W3C на тот момент потерял интерес к HTML и занялся развитием XML, а на его основе — расширяемого языка гипертекстовой разметки XHTML. Не будем углубляться в детали, т.к. на данный момент этот язык перестал развиваться.

Два года W3C и WHAT Working Group работали каждый над своим проектом. Но позже стало видно, что WHAT Working Group достигает каких-то результатов, тогда как XHTML 2 так и не реализовался.

И в 2006 году Тим Бернерс-Ли объявил, что W3C и WHATWG будут вместе работать над дальнейшим развитием HTML.

28 октября 2014 – HTML5

C этого дня W3C официально рекомендует использовать HTML5.

Новая версия сделала синтаксис более строгим по сравнению с предыдущей
Улучшилась поддержка мультимедиа-технологий
Появились 28 новых структурных элементов, благодаря которым код стал более понятным
Исключена еще часть устаревших тегов
Стало больше внимания уделяться поддержке скриптов, например javascript

На данный момент развитие HTML продолжается…

W3C выложил в начале июня рабочий черновик версии 5.1. Консорциум просит всех писать свои отзывы и комментарии относительно этой версии, т.к. HTML остается как и раньше проектом, над которым работают одновременно множество неравнодушных людей, любящих угловые скобки.

Может, скоро и вы станете одним из них?

И напоследок, минутка юмора:

Оптимист учит английский, Пессимист — китайский, а реалист учит html.

Будьте реалистами 😉

НОУ ИНТУИТ | Лекция | Основы CSS. Особенности CSS 3

Аннотация: Понятие каскадных таблиц стилей. История версий CSS. Отношения между множественными вложенными элементами. Создание CSS стилей. Связь HTML и CSS. Правила написания CSS. Каскадность CSS.

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

каскадные таблицы стилей;
используется для управления внешним видом информации, предоставляемой сайтом.

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

Возникновение CSS

Во второй лекции нашего курса приведена краткая история возникновения HTML. Частично написанное сейчас будет пересекаться с прошлым материалом.

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

С дальнейшим распространением HTML такие компании, как Microsoft и Netscape стали внедрять свои собственные теги или «улучшать» имеющиеся именно с целью управления оформлением html — документов. Часть внесенных изменений прижилась и «ушла» в массы.

После случилось логически неизбежное, а именно, HTML стал представлять собой набор несовместимых между собой тегов и расширений. Результатом исправления ситуации стал стандарт HTML 3.2, «узаконивший» ряд изменений и устранивший проблемы совместимости.

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

Стандарт HTML 3.2 лишь исправил ряд наиболее серьезных недостатков предыдущих версий. Настоящим же решением проблемы явился стандарт HTML 4.0, в рамках которого было предложено отделить описание структуры html документа от его оформления.

Если уж совсем «рыться» в истории, то можно заметить, что и этот подход не нов. SGML, на котором и основывалась первая версия HTML, в числе прочего предполагал наличие отдельного «файла стилей» документа.

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

Суть и преимущества CSS

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

Концепция каскадных таблиц стилей была предложена Хоконом Виум Ли – норвежским ученым и специалистом в области информационных технологий, работавшим в то время на консорциум W3C.

Как правило, CSS применяется при работе с HTML и XHTML языками, и используется для задания цветов, параметров шрифтов, расположения блоков и иных элементов представления веб — страниц.

К преимуществам использования CSS относятся:

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

Стандарт HTML 4.0 помимо CSS утвердил и объектную модель браузера (Browser Object Model – BOM), о которой следует сказать отдельно.

Объектная модель браузера описывает содержимое веб — документа, т.е. сама модель является набором объектов, описывающих указанное содержимое. Поскольку BOM уникальна для каждого браузера, возникали проблемы с межплатформенными приложениями. В конечном итоге, на место объектной модели браузера пришла объектная модель документа (Document Object Model – DOM), описывающая стандарт представления веб — страниц в виде набора объектов.

Краткая история CSS

Описание возникновения CSS будет неполным, без краткой истории версий каскадных таблиц стилей.

Таблица 6.1.
Версия	Дата принятия	Предоставляемые возможности
CSS1	17.01.1996	Управление способом отображения элемента на странице. Задание настроек обтекания элемента текстом. Управление размерами элемента. Управление внешними и внутренними отступами элемента. Управление вертикальным выравниванием в таблицах. Управление стилями границ элементов. Управление форматированием списков. Управление цветами текста и фона. Управление параметрами шрифтов. Управление свойствами текста. Управление междустрочными интервалами.
CSS2	12.05.1998	Все возможности CSS1 и ряд новых: Управление направлением текста. Управление позиционированием элементов. Управление видимыми областями элементов. Управление отображением элементов, выходящих за границы заданных размеров. Управление внешним видом курсора. Управление расположением элементов по оси z (слои). Задание минимально и максимально возможных размеров элемента. Управление расстоянием между ячейками таблицы. Управление стилями границ элемента (каждой границы в отдельности). Управление размерами элементов таблиц. Управление стилями кавычек. Управление контентом при его печати. Управление звуковым оформлением контента (громкость, паузы и т.п.).
CSS2.1	8.09.2009	Исправлен ряд ошибок CSS2. Изменились некоторые моменты, реализация которых в подавляющем большинстве браузеров отличается от спецификации CSS2. Убрали особенности CSS2, которые, в силу того, что не были реализованы, были отвергнуты CSS сообществом. Удалили фрагменты CSS2, которые будут устаревшими в CSS3. Добавили некоторые новые значения свойств.
CSS3	разрабатывается	Поддержка закругленных углов. Поддержка градиентных границ. Управление тенями элементов. Поддержка возможности использования изображений, в качестве границ элементов. Управление тенью текста. Поддержка нестандартных шрифтов. Возможность изменения размеров блоков пользователем. Возможность разбиения текста на несколько колонок. Управление фоновыми изображениями.

В настоящее время стандарт CSS3 только разрабатывается. В связи с этим нами перечислен только ряд его новшеств. Подробнее с ними, на данном этапе, предлагается ознакомиться самостоятельно.

CSS — Вікіпедія

CSS (англ. Cascading Style Sheets, укр. Каскадні таблиці стилів) — це спеціальна мова стилю сторінок^[en], що використовується для опису їх зовнішнього вигляду. Самі ж сторінки написані мовами розмітки даних.

CSS є основною технологією всесвітньої павутини, поряд із HTML та JavaScript^[1].

Найчастіше CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до інших видів XML-документів.

Специфікації CSS були створені та розвиваються Консорціумом Всесвітньої мережі.

CSS має різні рівні та профілі. Наступний рівень CSS створюється на основі попередніх, додаючи нову функціональність або розширюючи вже наявні функції. Рівні позначаються як CSS1, CSS2 та CSS3. Профілі — сукупність правил CSS одного або більше рівнів, створені для окремих типів пристроїв або інтерфейсів. Наприклад, існують профілі CSS для принтерів, мобільних пристроїв тощо.

CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці веб-сторінок. Головна перевага блочної верстки — розділення змісту сторінки (даних) та їхньої візуальної презентації.

CSS використовується авторами та відвідувачами веб-сторінок, щоб визначити кольори, шрифти, верстку та інші аспекти вигляду сторінки. Одна з головних переваг — можливість розділити зміст сторінки (або контент, наповнення, зазвичай HTML, XML або подібна мова розмітки) від вигляду документу (що описується в CSS).

Таке розділення може покращити сприйняття та доступність контенту, забезпечити більшу гнучкість та контроль за відображенням контенту в різних умовах, зробити контент більш структурованим та простим, прибрати повтори тощо. CSS також дозволяє адаптувати контент до різних умов відображення (на екрані монітора, мобільного пристрою (КПК), у роздрукованому вигляді, на екрані телевізора, пристроях з підтримкою шрифту Брайля або голосових браузерах та ін.).

Один і той самий HTML або XML документ може бути відображений по-різному залежно від використаного CSS. Стилі для відображення сторінки можуть бути:

Стилі автора (інформація надана автором сторінки):
- зовнішні таблиці стилів (англ. stylesheet), найчастіше окремий файл або файли .css
- внутрішні таблиці стилів, включені як частина документу або блоку
- стилі для окремого елементу
Стилі користувача
- локальний .css-файл, вказаний користувачем для використання на сторінках і вказаний в налаштуваннях браузера (наприклад Opera)
Стилі переглядача (браузера)
- стандартний стиль переглядача, наприклад стандартні стилі для елементів, визначені браузером, використовуються коли немає інформації про стиль елемента або вона неповна.

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

Переваги[ред. | ред. код]

Інформація про стиль для усього сайту або його частин може міститися в одному .css-файлі, що дозволяє швидко робити зміни в дизайні та презентації сторінок;
Різна інформація про стилі для різних типів користувачів: наприклад великий розмір шрифту для користувачів з послабленим зором, стилі для виводу сторінки на принтер, стиль для мобільних пристроїв;
Сторінки зменшуються в об’ємі та стають більш структурованими, оскільки інформація про стилі відділена від тексту та має певні правила застосування і сторінка побудована з урахуванням їх;
Прискорення завантаження сторінок і зменшення обсягів інформації, що передається, навантаження на сервер та канал передачі. Досягається за рахунок того, що сучасні браузери здатні кешувати (запам’ятовувати) інформацію про стилі і використовувати для всіх сторінок, а не завантажувати для кожної.

Синтаксис[ред. | ред. код]

CSS має порівняно простий синтаксис і використовує небагато англійських слів для найменування різних складових стилю.

Стилі складаються зі списку правил. Кожне правило має один або більше селектор (англ. selector) та блок визначення (англ. declaration block). Блок визначення складається із оточеного фігурними дужками списку властивостей.

Властивості в списку оформлюються у вигляді назва властивості, двокрапка (:), значення, крапка з комою (;).

Приклад:

 p {
   font-family: Verdana, sans-serif;
 }
 h3 {
   font-size: 110%;
   color: red;
   background: white;
 }
 .note {
   color: red;
   background: yellow;
   font-weight: bold;
 }
 p.warning {
   background: url(warning.png) no-repeat fixed top;
 }
 #paragraph2 {
   margin: 0;
 }
 a:hover {
   text-decoration: none;
 }
 #news p {
   color: red;
 }

В прикладі використано 7 правил, селектори p, h3, .note, p.warning, #paragraph2, a:hover та #news p. Приклад властивості: color: red, де властивості з назвою color присвоєно значення red.

В перших двох правилах визначаються властивості HTML-елементів p (абзац, скорочення від англ. paragraph) та h3 (Заголовок другого рівня, скорочення від англ. header). Абзац буде відображено шрифтом Verdana або, у разі відсутності Verdana, іншим шрифтом sans-serif. Заголовок другого рівня буде відображено червоним кольором на білому тлі.

Третє правило буде застосовано до всіх елементів, властивість class визначена як ‘note’. Наприклад:

<p>Абзац буде відображено червоним жирним шрифтом на жовтому тлі.</p>

Третє правило також можна записати як *.note.
Щоб третє правило застосовувалося лише до абзаців, його слід переписати як:

 p.note {
   color: red;
   background: yellow;
   font-weight: bold;
 }

Четверте правило стосується тих елементів рівня абзацу (p), що мають властивість class рівну ‘warning’. Такі абзаци матимуть фонове зображення warning.png згори.

Властивість .class може мати не лише порівняння, але й перелік. Коли властивість class містить перелік значень, розділених пробілом, то до цього елементу застосовуються правила усіх перелічених класів. Наприклад, до <p> будуть застосовані правила note та warning.

П’яте правило застосовується лише до одного елементу в документі HTML, що має ідентифікатор id рівний paragraph2. Цей елемент не буде мати межі навколо, тому що властивість margin дорівнює 0. Наприклад:

<p>Цей абзац не має межі тому що межа 
 дорівнює 0. На сторінці може бути лише один такий елемент.
 </p>

Шосте правило визначає стиль наведення мишкою (hover) для a (anchor) елементів. Стандартно більшість браузерів підкреслюють елементи a (посилання в межах одного документа або на інші HTML-документи). Це правило прибирає підкреслювання з посилань, коли користувач наводить на них мишкою.

Останнє правило застосовується до тих абзаців, що знаходяться всередині (мають батьківський елемент) з ідентифікатором news. Це приклад наслідування властивостей.

Завдяки каскадній структурі CSS, ці абзаци (p) будуть наслідувати font-family: Verdana, sans-serif; як і всі елементи p (абзаци). Ті з них, що мають class рівний warning будуть мати також і фонове зображення.

CSS може також містити коментарі. Синтаксис коментарів подібний до синтаксису, що використовується в багатьох мовах програмування (наприклад C, PHP). Слід звернути увагу на те, щоб в коментарях CSS-файлів не використовувалися кириличні літери (деякі браузери некоректно обробляють CSS-файли з українськими літерами^[2]).

Селектори та Псевдо-класи[ред. | ред. код]

CSS має спеціальні позначення (селектори, від англ. selector) для визначення діапазону застосування правила.

Всі елементи: використовується селектор * (часто не пишеться, наприклад *.p та p — рівнозначні)
За назвою елементу: наприклад для всіх p або h3
Наслідування: наприклад для всіх a елементів які містяться в li елементах (посилання всередині списків), селектор матиме вигляд li a
Властивості class та id: наприклад .class або #id для елементів class="class" або id="id"
Суміжні елементи: наприклад для всіх елементів p, попереднім до яких є елемент h3 (перший абзац після заголовка), селектор буде h3 + p
Пряме наслідування: наприклад для всіх span елементів всередині p, але не глибших за перший рівень наслідування span, селектор буде p > span
За атрибутами: наприклад для всіх <input type="text"> селектор буде input[type="text"]

Для точнішого визначення стилю можуть використовуватися псевдо-класи (англ. pseudo-classes). Мабуть найвідомішим є псевдо-клас :hover, що застосовується коли користувач вкаже на елемент, зазвичай наведенням курсору. Стиль визначається для a:hover або #elementid:hover. Інші псевдо-класи, наприклад, :first-line (перший рядок тексту), :first-letter (перша літера) :visited (посилання, що вже відкривалось) або :before (визначає стиль перед елементом). Спеціальний псевдо-клас :lang(c) буде застосовано до елементів якщо їхня мова (англ. language) «c».

Підтримка псевдо-класів залежить від браузеру, наприклад Internet Explorer 6 підтримує псевдо-клас :hover лише для посилань.

Селектори можуть поєднуватися й іншим чином для досягнення більшої гнучкості (див. визначення селекторів на сайті W3C). В наступному прикладі кілька селекторів об’єднуються через кому^[3]. Правило встановлює шрифт для HTML-заголовків всіх рівнів.

 h2, h3, h4, h5, h5, h6 {
   font-family: "Arial", sans-serif;
 }

Приєднання до сторінки[ред. | ред. код]

Щоб включити таблицю стилів CSS, потрібно зберегти код CSS у файл (це можна зробити будь-яким текстовим редактором), наприклад example.css, і потім включити або імпортувати його в HTML або XHTML-сторінку.

Включення CSS-файлу до сторінки (XHTML):

 <link rel="stylesheet" href="example.css" type="text/css" />

Включення CSS-файлу до сторінки (HTML):

 <link rel="stylesheet" href="example.css" type="text/css">

Імпорт CSS-файлів до HTML та XHTML-сторінок:

 <style type="text/css">
 @import "example.css";
 </style>

CSS може бути визначений в <head> частині сторінки або для елементу сторінки через style.

Включення CSS-файлу до XML-сторінки:

 <?xml-stylesheet type="text/css" href="example.css"?>

Таблиці стилів в тому чи іншому вигляді існували з зародження SGML в 1970-тих. Каскадні таблиці стилів розроблялися для спрощення процедури додавання інформації про стилі для веб-сторінок.

З розвитком HTML з’явилася можливість використовувати різні механізми для додавання стилів до елементів сторінки. Еволюція HTML дала веб-дизайнерам більше можливостей для створення вигляду сайту, але HTML-код ставав складнішим для написання та зміни. Через різницю у відображення сторінки в різних браузерах збереження стилю сторінки було складним, користувачі мали менше контролю над відображенням контенту.

На розгляд W3C було запропоновано дев’ять різних варіантів таблиць стилів. Після обговорення в спеціальному списку розсилки було обрано два, вони створили основу для того, що стало CSS: англ. Cascading HTML Style Sheets (CHSS) та англ. Stream-based Style Sheet Proposal (SSP). Спочатку в жовтні 1994, Håkon Wium Lie (зараз генеральний технічний директор Opera Software) запропонував Cascading HTML Style Sheets (CHSS), що дещо подібний до сучасного CSS. Bert Bos працював над браузером Argo, що використовував власний варіант таблиць стилів, Stream-based Style Sheet Proposal (SSP). Lie і Bos почали співпрацювати для вироблення стандарту CSS (літера ‘H’ була виключена з назви, оскільки таблиці стилів могли застосовуватися до інших мов розмітки, не лише HTML).

На відміну від наявних тоді таблиць стилів, таких як DSSSL та FOSI, CSS дозволяв застосування різних таблиць стилів до документу (сторінки). Таблиці стилів могли наслідувати правила з інших (тобто створювати каскади), що дозволило контролювати використання стилів як дизайнером сайту так і користувачем (наприклад в браузері Opera).

Пропозиції до стандарту CSS обговорювалися на конференціях в 1994 та 1995 роках.

В 1994 році було створено World Wide Web Consortium W3C, серед інших питань W3C займався також і CSS. Робочу групу очолив Steven Pemberton, як провідні технічні спеціалісти до неї входили Håkon Wium Lie та Bert Bos.

В грудні 1996 було опубліковано CSS рівня 1 — CSS level 1 Recommendation. В квітні 2016, опубліковано CSS рівня 2 — Cascading Style Sheets Level 2 Revision 2 (CSS 2.2), робота над яким ще продовжується.

↑ Flanagan, David. JavaScript — The definitive guide (вид. 6). с. 1. «JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behaviour of web pages.»
↑ CSS, UTF и Интернет эксплорер, 2006(рос.)
↑ contextual-selectors

В іншому мовному розділі є повніша стаття Cascading Style Sheets (англ.). Ви можете допомогти проєкту, розширивши поточну статтю за допомогою перекладу з англійської.

Не перекладайте текст, який видається недостовірним або низької якості. Якщо можливо, перевірте текст за посиланнями, поданими в іншомовній статті.
Докладні рекомендації: див. Вікіпедія:Переклад.

История создания css – Странности CSS, о которых полезно знать / RUVDS.com corporate blog / Habr