Что такое каскадные таблицы стилей (CSS)?

css

Каскадные таблицы стилей (CSS) — это язык таблиц стилей, используемый для описания и определения представления документа, написанного на каком-либо языке разметки, например на языке гипертекстовой разметки (HTML). Фактически, наряду с HTML и JavaScript (JS), CSS является одной из основных частей Всемирной паутины (WWW) для создания визуально привлекательных веб-сайтов и пользовательских интерфейсов как для веб-приложений, так и для мобильных приложений.

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

Спецификация языка определяет схему приоритетов, чтобы определить, какие правила стиля применяются, если существует более одного правила, которое соответствует элементу. Это называется каскадом, и в нем приоритеты (или веса) определяются и используются как правила для обеспечения предсказуемых результатов. Эта спецификация наряду со всеми остальными спецификациями CSS поддерживается Консорциумом World Wide Web (W3C), который также предоставляет бесплатный сервис проверки CSS для файлов CSS.

Синтаксис

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

Селектор в CSS объявляет, к какой части разметки должен применяться стиль, посредством сопоставления тегов и атрибутов в указанной разметке. Это означает, что селекторы могут применяться ко всем элементам определенного типа в файле разметки (например, ко всем тегам p), элементу, уникально идентифицированному по его идентификатору или атрибуту класса, или к элементам в зависимости от их расположения относительно дерева документа. Чтобы еще больше развить это, CSS позволяет реализовать псевдоклассы в их селекторах, чтобы обеспечить дальнейшее форматирование для элементов, которые не основаны на дереве документа. Одним из наиболее распространенных псевдоклассов является «: hover», который используется специально для определения, когда пользовательская мышь наводит курсор на присоединенный элемент. При этом CSS позволяет дополнительно отформатировать представление элемента путем добавления его к селектору, как в «p: hover» или «#elementID: hover». Другим важным моментом является гибкость селекторов, поскольку они могут быть объединены в разнесенный список для описания элементов по местоположению, идентификатору, типу элемента, классу или некоторой их комбинации. Порядок этих селекторов важен в этой практике, так как логика выбора селектора может меняться в зависимости от этого.

Блок объявлений — это просто список объявлений, заключенный в блок двумя фигурными скобками. Эти объявления состоят из свойства, двоеточия и значения; точка с запятой используется для определения того, где заканчивается одно объявление и начинается другое. Свойства указываются в стандарте CSS и имеют набор возможных значений. Они могут влиять на любой тип элемента или некоторые типы элементов в зависимости от рассматриваемого свойства. На другой стороне двоеточия значения могут быть ключевыми словами, такими как «center» или «float», или числовыми значениями, такими как 200px (200 пикселей) или 25% (25 процентов ширины / высоты окна). Есть также некоторые значения, которые можно обозначать более чем одним способом, например, значения цвета, применяемые по ключевому слову («красный»), шестнадцатеричный («# FF0000»), RGB и RGBA (rgb (255, 0, 0) и rgba (255, 0, 0, 0,375)) или HSL и HSLA (hsl (000, 100%, 50%) и hsla (000, 100%, 50%, 37%)).

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

Порядок приоритета для этих источников: от наивысшего к наименьшему, важность, которая обозначается ключевым словом «! Important» для перезаписи предыдущих типов приоритетов, встроенный стиль, который применяется в документе HTML с помощью атрибута стиля HTML, тип носителя, который применяется только к определению свойства для всех типов мультимедиа, кроме определенного CSS для конкретного медиа, определяемого пользователем, который предоставляется пользователем через функцию браузера, специфичность селектора, которая позволяет конкретному контекстному селектору (например, #heading p) перезаписать общее определение, порядок правил, который обозначает что последнее правило будет иметь приоритет более высокого порядка, родительское наследование, которое определяет, наследует ли свойство от родительского элемента, если оно не указано или иным образом, определение свойства CSS, которое гласит, что правило CSS или встроенный стиль будут перезаписывать стиль браузера по умолчанию; и, наконец, стиль браузера по умолчанию, который определяется спецификациями W3C.

Версии

CSS

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

CSS 2

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

CSS 3

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

CSS 4

Далее следует CSS 4, который все еще находится в рабочем проекте и нацелен на создание модульного стиля CSS 3. Таким образом, не существует единой спецификации CSS 4, и каждый из модулей является «уровнем 4» благодаря CSS 3 (где Модули бы тогда считали «уровнем 3», так как они были построены на CSS 2.1). Есть несколько модулей уровня 4, которые основаны на аспекте представления модулей CSS 3, в то время как есть другие модули, которые полностью определяют новые функции, такие как Flexbox, и обозначаются как «уровень 1».

Ограничения и преимущества

Несмотря на множество применений CSS, с языком есть некоторые ограничения. Например, селекторы не могут «подниматься»; то есть, нет никакого способа выбрать родителя или предка селектора. CSS 4 действительно пытается ответить на этот недостаток, но на данный момент это ограничение, с которым сталкивается язык. Также нет способа явно объявить новую область независимо от положения, поскольку все правила области видимости для свойств (таких как z-index) ищут ближайший родительский элемент с атрибутом «position: absolute» или «position :lative». Другие текущие ограничения включают динамическое поведение псевдокласса, не контролируемое, невозможность именовать правила, невозможность включать стили из одного правила в другое и невозможность нацеливать текст без изменения разметки.

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

0 0 vote
Article Rating
Подписаться
Уведомление о
guest
0 Комментарий
Inline Feedbacks
View all comments