Всем привет!
Меня зовут Олег, и я сегодня буду вам рассказывать про CSS.
А начнем мы с истории появления такого языка.
Как вы знаете из предыдущей лекции, HTML — это язык разметки, то есть язык,
который помогает ориентироваться браузеру в том, чем является данный текст.
Например, в данной иллюстрации вы видите автомобили и разметку на дороге,
и эта разметка помогает автомобилям ориентироваться, куда им вставать.
Так происходит и с языком разметки HTML.
Это такой язык, который подсказывает браузеру,
как отобразить текст, и чем этот текст является.
Например, по умолчанию внутри браузера, если вы вставите текст внутрь тега <h1>,
то он отобразится большим, и это будет заголовок первого уровня.
Если внутрь тега <h2> — чуть поменьше, внутрь тега <h3> — еще меньше, внутрь тега
<h4> — совсем маленький, ну и, например, вы можете вставить просто в <div>.
Этого было мало.
Тем, кто разрабатывал сайты, не хватало выразительности только тегов.
Так же, как героям знаменитого советского фильма «Бриллиантовая
рука» не хватало ассортимента в магазине и хотелось лошадь,
но без крыльев, или пальто, но с другими пуговицами.
Я сегодня очень часто буду использовать аналогии из различных советских фильмов.
Чего хотели пользователи?
Например, они хотели раскрасить текст в красный цвет.
А иногда хотели раскрасить текст не весь, а через одну букву.
Или, например, написать этот текст другим шрифтом.
Или, например, использовать вот такую вот красную рамочку,
для того чтобы акцентировать внимание пользователя на этом.
Или просто <div>.
Для того чтобы решить эту задачу, в HTML был введен такой тег <font>.
И для того чтобы стилизовать элементы на странице,
вы использовали тег <font> и писали в нем различные атрибуты.
Например, в данном случае мы говорим браузеру о том,
чтобы текст был на три размера больше, чем текущий, чтобы он был
написан семейством шрифтов «Гельветика», и чтобы он был красного цвета.
Ну это такой, не самый показательный пример.
Более показателен пример типичной разметки с использованием тега <font>.
Как вы видите, внутрь каждого элемента, то есть внутрь каждого параграфа, внутрь
каждого заголовка нам необходимо вставлять тег <font> с заданными атрибутами.
Получилось, что разметка-то у нас есть, но она используется не по назначению.
Это было неправильно,
и два человека в 1994 году — Хокон Виум Ли,
это автор и создатель браузера Opera, поэтому здесь и значок «О» не случайно, и
Берт Бос — они сформулировали эту проблему и назвали решение этой проблемы CSS.
Почему вообще начал появляться CSS?
HTML стал слишком избыточен,
он стал нести слишком много информации, кроме как про разметку документа.
Людям все равно хотелось еще больше возможностей для оформления,
и это еще больше раздувало HTML-документы.
При этом стилизовать HTML-документы становилось все сложнее.
Почему?
Например, для того чтобы иметь какой-то единый стиль на странице,
нам приходилось копировать одни и те же стили, мы не могли два разных
параграфа стилизовать одинаково без копирования значения внутри тега <font>.
Ну и наконец, самая важная причина, по которой появился CSS,
заключается в том, что хотелось разделить визуальную составляющую страницы
от контентной составляющей, то есть чтобы они задавались раздельно.
С появлением CSS стало возможно вот этот код,
который мы писали раньше, превратить вот в такой вот.
Да, на первый взгляд кажется, что кода стало еще больше, но преимущество
здесь не в том, что конкретно в данном случае кода стало больше,
оно заключается в том, что теперь мы можем добавить 500 параграфов, и нам не нужно
будет для каждого из них повторять стили, указанные внутри каждого из параграфов.
И тем более, не будет проблемы поменять для всех этих 500 параграфов
цвет с одного на другой.
Что же такое CSS?
CSS — это язык стилей, определяющий отображение HTML- и других документов.
CSS работает со многими аспектами визуального отображения документов, но,
в частности, он работает со шрифтами, с цветами,
со строками, с высотой элементов и так далее.
CSS работает со многими аспектами визуальной составляющей документа.
CSS развивался поэтапно.
Как вы помните, в 1994 году Хокон Виум Ли и Берт Бос
сформулировали о том, что необходим такой стандарт,
а первая версия спецификации CSS появилась в 1996 году.
Вторая версия спецификации появилась в 1998 году.
И они рассматривали разные аспекты стилизации элементов.
Первая спецификация была про параметры шрифтов, цвета,
а вторая спецификация была про блочную верстку, про различные селекторы.
К сожалению,
после второй версии спецификации развитие CSS застыло на долгие года.
И причина этому — один,
многим верстальщикам известный браузер Internet Explorer 6.
Проблема была в том, что Internet Explorer 6 поставлялся вместе с
операционной системой Windows XP и он не обновлялся автоматически.
Более того, компания Microsoft не особо-то и стремилась обновить его на новую версию,
и получилась ситуация, при которой долгие годы пользователи были привязаны
к конкретному браузеру, а, соответственно,
веб-разработчики не могли дальше применять современные стандарты CSS.
К счастью, о браузере Internet Explorer сейчас мы можем забыть,
как о страшном сне.
В конце 2000-х годов первыми, кто начал активно внедрять новые стандарты
и привлекать новых пользователей, был браузер Firefox от компании Mozilla.
Позже к нему присоединился браузер Google Chrome от компании Google и браузер Opera
от одноименной компании.
Это дало толчок для развития новых спецификаций, но,
в частности, самое знаменательное событие произошло в 2011 году.
Это наконец-то закончилась более чем десятилетняя работа над
спецификацией CSS 2.1.
Эта работа велась больше чем десятилетие,
потому что браузеры не стремились активно применять эту спецификацию.
Ну а, соответственно, зачем работу заканчивать?
Она просто была заморожена.
С окончанием разработки спецификации 2.1 CSS работа над CSS не
остановилась, но спецификации уровня 3 не существует.
Дело в том, что к тому времени спецификация стала слишком большой,
ее стало слишком сложно поддерживать как единый документ,
и логичным было разнести эту спецификацию на несколько разных документов, каждый
из которых будет затрагивать какой-то отдельный аспект стилизации элементов.
Так и случилось.
Спецификации уровней 3 — это продолжение развития тех
частей спецификаций уровня 2 и 1, которые были сформулированы ранее.
Именно поэтому вы, например, можете найти CSS Text Module
3 или CSS Color Module 3 — это спецификации,
которые продолжают развитие идей стилизации текстов или
цветовых значений в CSS с первой и второй спецификации.
Но также если спецификация новая и не была сформулирована ранее,
то ее нумерация начинается с единицы.
Некоторые спецификации,
некоторые модули спецификации уровня 3 уже закончили свою разработку,
и поэтому нередка ситуация, когда вы можете встретить спецификацию уровня 4.
В данном видео мы рассмотрели историю появления языка CSS, то есть причины,
почему он появился, и историю того, как этот язык развивался, а также,
что из себя представляет современная спецификация CSS.
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
