Спецификация 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 — каскадирование. Спецификация определяла три источника стилей с разным приоритетом:
- Авторские стили — стили, заданные разработчиком веб-страницы.
- Пользовательские стили — стили, установленные пользователем в настройках браузера.
- Браузерные стили — стили по умолчанию, встроенные в браузер.
Приоритет определялся по правилу: пользовательские стили имеют более высокий приоритет, чем авторские, а авторские — выше, чем браузерные. Для разрешения конфликтов между одинаковыми правилами из одного источника использовалась специфичность селекторов и порядок объявления.
Селекторы
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> ``
Источники
- Håkon Wium Lie, Bert Bos. «Cascading Style Sheets, level 1». W3C Recommendation, 17 December 1996.
- Håkon Wium Lie. «Cascading HTML style sheets — a proposal». CERN, 1994.
- Bert Bos. «A brief history of CSS». W3C, 2000.
- «Cascading Style Sheets: Designing for the Web» by Håkon Wium Lie and Bert Bos, 1997.
- «CSS1 Test Suite». W3C, 1997.
- «Веб-дизайн: от первых шагов до CSS». Журнал «Мир ПК», №3, 2001.
BFOmetr — база данных и аналитика по компаниям России.
На главную BFOmetr →