Основные принципы каскадных таблиц стилей в HTML

CSS используют при создании Web-страниц, чтобы задавать цвета, шрифты, расположения и другие аспекты представления документа. Основной целью при разработке CSS стало разделение содержимого, созданного с помощью языка разметки, и представления документа, созданного на CSS. Это разделение повышает доступность документа, дает большую гибкость и управляет его представлением, а также снижает уровень сложности и повторяемости в структурном содержимом. Помимо этого, CSS способствует представлению одного и того же документа в разных стилях или методах вывода: экранном представлении, печати, голосовом чтении (специальном голосовым браузере или программе чтения с экрана), или при выводе устройствами, работающими с шрифтом Брайля.

Статья: Основные принципы каскадных таблиц стилей в HTML

Найди решение своей задачи среди 1 000 000 ответов

Найти решение задачи

CSS при отображении страниц может браться из разных источников (порядок иерархии от сильного к слабому):

1. Авторские стили (информация стилей предоставляется автором страницы) в виде:

   • Inline-стилей, когда в документе HTML информация стиля для каждого элемента содержится в его атрибуте style;
   • встроенных стилей (блоки CSS внутри самого документа HTML);
   • внешних таблиц стилей, представленных отдельным файлом .css, на который делают ссылку в документе.

2. Пользовательские стили: локальный CSS-файл, который пользователь указывает в настройках браузера, переопределяет авторские стили и применяется ко всем документам.

3. Стиль браузера: стандартный стиль, который используется браузером по умолчанию для представления элементов.

Схематично это можно представить так:

селектор, селектор {

свойство: значение;

свойство: значение;

свойство: значение;

}

В стандарте CSS определяются приоритеты, с учетом которых применяют правила стилей. Если какому-то элементу подойдут свойства нескольких правил сразу, это будет называться каскадом, в котором для каждого свойства рассчитан приоритет (вес), что делает результат предсказуемым.

Приоритет рассчитывается от большего к меньшему по схеме:

1. свойство задается при помощи !important;
2. стиль прописывается прямо в теге;
3. определяется количеством идентификаторов (#id) в селекторе (чем больше, тем выше приоритет);
4. определяется количеством классов (.class) и псевдоклассов (:pseudoclass) в селекторе;
5. определяется количеством имен тегов в селекторе.

Помимо этого, важно расположение свойств по порядку (свойство, указанное позднее, имеет меньший приоритет).

CSS-верстка

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

К преимуществам применения можно отнести:

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

К недостаткам относятся:

1. Различное отображение верстки в разных браузерах, которые по разному интерпретируют одни и те же данные CSS.
2. Часто бывает необходимо на практике исправить не только один CSS-файл, но и теги HTML, которые связаны с селекторами CSS, тем самым значительно увеличивается время их редактирования и тестирования.

Уровень 1 (CSS1)

Рекомендация W3C, принятая 17 декабря 1996 года, откорректированая 11 января 1999 года. Данная рекомендация предоставляет следующие возможности:

1. Параметры шрифтов. Задает гарнитуру и размер шрифта, а также его стиль: обычный, курсив или полужирный.
2. Цвета. Определяет цвет текста, фона, рамки и других элементов страницы.
3. Атрибуты текста. Задает межсимвольный интервал, расстояние между словами и высоту строки.
4. Выравнивает текст, изображения, таблицы и другие элементы.
5. Определяет свойства блоков: высоту, ширину, внутренние (padding) и внешние (margin) отступы и рамки.

Уровень 2 (CSS2)

Рекомендация W3C, принятая 12 мая 1998 года. Построенная на CSS1 с сохранением обратной совместимости. В результате добавились следующие функции:

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

Уровень 2.1 (CSS2.1)

Рабочая версия W3C от 8 сентября 2009 года. Построенная на CSS2, содержит исправление ошибок.

Уровень 3 (CSS3)

Разрабатываемая версия.

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

Включение в HTML

CSS можно включать в HTML следующими способами:

1. Используя ссылку в HTML, а сами CSS размещать в отдельном файле:

   или:

   @import "style.css";

2. Непосредственно в HTML-документ:

   body {

   color: red;

   }

3. Непосредственно в элемент:

   Рассказ о том, как вредно красить батареи

Поддержка браузерами

Наиболее полно поддерживают стандарт CSS браузеры, которые работают на Gecko (Mozilla Firefox и др.), WebKit (Safari, Arora, Google Chrome) и Presto (Opera) .

Браузер Internet Explorer 6 поддерживает CSS не полностью.

Internet Explorer 7 значительно повысил уровень поддержки CSS, однако все еще содержит ошибки.

В Internet Explorer 8 применяется новый движок, который полностью поддерживает CSS 2.1 и частично CSS 3.

Чтобы проверить поддержку браузером различных частей стандарта CSS был разработан тест Acid.

Различные блоковые модели

В стандартах CSS от Консорциума W3C используется модель, в которой свойством width определяется ширина содержимого блока без учета отступов и рамок. В ранних версиях Internet Explorer (4 и 5) была реализована собственная модель, в которой параметром width определяется расстояние между рамками блока с учетом отступов (padding) и рамок (border).

В разрабатываемом стандарте CSS3 для решения этой проблемы ввели свойство box-sizing, со значениями content-box, указывающим на использование стандартной модели W3C, и border-box для использования модели IE 5.

В браузере Mozilla, при поддержке этого свойства, под своим рабочим названием -moz-box-sizing, было введено еще одно значение - padding-box, т.е. при создании третьей блочной модели, в которой width является размером содержимого и отступов блока без учета рамки.

CSS-фильтры

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

Другим способом выборочного применения правил для Internet Explorer стала безопасность.