Открыть сервис

Спецификация CSS1

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

История

Предпосылки создания

До появления CSS веб-дизайн был ограничен возможностями HTML. Для изменения внешнего вида элементов использовались атрибуты тегов (например, bgcolor, font, align), что приводило к раздуванию кода и затрудняло поддержку сайтов. В 1994 году норвежский программист Хокон Виум Ли (Håkon Wium Lie), работавший в CERN, предложил концепцию каскадных таблиц стилей как способа централизованного управления оформлением. Его идея заключалась в том, чтобы браузер мог комбинировать несколько источников стилей (авторские, пользовательские и браузерные) по принципу каскада.

Разработка и принятие

В 1995 году Хокон Виум Ли и Берт Бос (Bert Bos) представили проект CSS на конференции WWW в Дармштадте. После серии обсуждений и доработок, 17 декабря 1996 года W3C опубликовала рекомендацию CSS Level 1 (CSS1). Этот документ стал первым формальным стандартом в области веб-стилей. Важно отметить, что в России в то время интернет только начинал развиваться, и первые русскоязычные сайты, такие как «Русский медведь» (1996), использовали исключительно HTML-разметку без CSS.

Проблемы внедрения

Несмотря на принятие стандарта, практическое внедрение CSS1 столкнулось с серьёзными трудностями. Основные браузеры того времени — Netscape Navigator 4.x (компания Netscape Communications Corporation, прекратила деятельность в 2003 году) и Internet Explorer 3/4 — реализовали CSS частично, с ошибками и по-разному. Например, Internet Explorer 4 поддерживал только около 60% свойств CSS1. Это привело к так называемым «браузерным войнам», когда веб-разработчикам приходилось писать отдельные стили для разных браузеров. Полная поддержка CSS1 была достигнута лишь с выходом Internet Explorer 5.0 для Mac (2000) и Netscape 6 (2000).

Структура и принципы

Каскадирование

Основополагающий принцип CSS1 — каскадирование. Спецификация определяла три источника стилей с разным приоритетом:

  1. Авторские стили — стили, заданные разработчиком веб-страницы.
  2. Пользовательские стили — стили, установленные пользователем в настройках браузера.
  3. Браузерные стили — стили по умолчанию, встроенные в браузер.

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

Селекторы

CSS1 ввела базовый набор селекторов для выбора элементов HTML:

  • Селекторы типов — выбор по имени тега (например, h1, p).
  • Селекторы классов — выбор по значению атрибута class (например, .important).
  • Селекторы идентификаторов — выбор по значению атрибута id (например, #header).
  • Контекстные селекторы — выбор по вложенности (например, div p — все p внутри div).
  • Псевдоклассы — выбор по состоянию элемента: :link, :visited, :active (для ссылок).

Свойства и значения

Спецификация CSS1 определила около 50 свойств, сгруппированных по категориям:

КатегорияПримеры свойствНазначение
Шрифтыfont-family, font-size, font-weight, font-styleУправление гарнитурой, размером, насыщенностью и начертанием шрифта
Текстcolor, text-align, text-decoration, letter-spacingЦвет текста, выравнивание, оформление (подчёркивание, зачёркивание), межбуквенный интервал
Фонbackground-color, background-image, background-repeatЦвет фона, фоновое изображение, способ повторения
Блокиmargin, padding, border, width, heightВнешние и внутренние отступы, границы, размеры блочных элементов
Спискиlist-style-type, list-style-imageМаркеры списков (тип или изображение)

Все значения задавались в абсолютных (px, pt, cm) или относительных (em, %) единицах измерения. Относительные единицы позволяли создавать адаптивный дизайн, хотя в 1996 году это не было приоритетом.

Применение и значение

Отделение содержания от представления

Главное достижение CSS1 — чёткое разделение структуры документа (HTML) и его визуального оформления (CSS). Разработчики могли вынести все стили во внешний файл (style.css) и подключать его к нескольким страницам. Это упрощало поддержку сайтов: изменение дизайна требовало правки одного файла, а не сотен HTML-документов. В России этот подход начал активно применяться с середины 2000-х годов, когда появились первые CMS (системы управления контентом), такие как «1С-Битрикс» и Drupal.

Влияние на веб-стандарты

CSS1 стала основой для последующих версий CSS. Многие идеи, заложенные в ней, были расширены и уточнены в CSS2 (1998) и CSS3 (1999–2010). Например, концепция каскадирования и специфичности селекторов осталась неизменной. Свойства, определённые в CSS1, такие как font-family и color, используются до сих пор.

Ограничения и критика

Несмотря на революционность, CSS1 имела ряд ограничений:

  • Отсутствие макетов: не было средств для создания многоколоночных макетов (например, float, position появились позже, в CSS2).
  • Нет поддержки анимации и трансформаций: CSS1 не предусматривала динамических эффектов.
  • Сложность с вертикальным выравниванием: не было простого способа выровнять элемент по вертикали внутри контейнера.
  • Проблемы с наследованием: некоторые свойства (например, background) не наследовались, что требовало явного задания для каждого вложенного элемента.

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

Примеры использования

Простая таблица стилей CSS1

```css / Определение шрифта и цвета для заголовков / h1 { font-family: Arial, Helvetica, sans-serif; font-size: 24pt; color: navy; text-align: center; }

/ Стили для абзацев / p { font-size: 12pt; line-height: 1.5; margin-bottom: 10px; }

/ Стили для ссылок / a:link { color: blue; text-decoration: underline; } a:visited { color: purple; } ```

Подключение к HTML

``html <!DOCTYPE html> <html> <head> <title>Пример CSS1</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Заголовок страницы</h1> <p>Это абзац текста, оформленный с помощью CSS1.</p> <a href="#">Ссылка</a> </body> </html> ``

Источники

  1. Håkon Wium Lie, Bert Bos. «Cascading Style Sheets, level 1». W3C Recommendation, 17 December 1996.
  2. Håkon Wium Lie. «Cascading HTML style sheets — a proposal». CERN, 1994.
  3. Bert Bos. «A brief history of CSS». W3C, 2000.
  4. «Cascading Style Sheets: Designing for the Web» by Håkon Wium Lie and Bert Bos, 1997.
  5. «CSS1 Test Suite». W3C, 1997.
  6. «Веб-дизайн: от первых шагов до CSS». Журнал «Мир ПК», №3, 2001.

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →