Что такое CSS?

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

Требуемые знания: Базовые компьютерные знания, установка базового програмного обеспечения, базовые знания работа с файлами и базовые знания HTML  (Введение в HTML.)
Цель: Узнать, что такое CSS.

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

The default styles used by a browser

Тем не менее, веб был бы скучным, если бы все сайты выглядели так. Используя CSS, вы можете точно контролировать, как элементы HTML выглядят в браузере, представляя вашу разметку, используя любой понравившийся вам дизайн.

Для чего нужен CSS?

Как мы уже упоминали ранее, CSS - это язык для определения того, как документы представляются пользователям - как они оформляются, размещаются и т. д.

Документ обычно представляет собой текстовый файл, структурированный с использованием языка разметки— HTML самый распространенный язык разметки, но вы также можете встретить другие языки разметки, такие какSVG или XML.

Представление документа пользователю означает преобразование его в форму, используемую вашей аудиторией. Browsers, такие как Firefox, Chrome, или Edge , предназначены для визуального представления документов, например, на экране компьютера, проектора или принтера.

Заметка: Браузер иногда называют user agent, что в основном означает компьютерную программу, которая представляет человека внутри компьютерной системы. Браузеры - это основной тип пользовательского агента, о котором мы думаем, когда говорим о CSS, но он не единственный. Доступны и другие пользовательские агенты, например, те, которые преобразуют документы HTML и CSS в файлы PDF для печати.

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

Синтаксис CSS

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

В следующем коде показано очень простое правило CSS, которое будет соответствовать стилю, описанному выше:

h1 {
    color: red;
    font-size: 5em;
}

Правило открывается с помощью селектора . Этот селектор выбирает HTML-элемент, который мы собираемся стилизовать. В этом случае мы используем заголовки первого уровня (<h1>).

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

Перед двоеточием у нас есть свойство, а после двоеточия - значение. CSS properties имеют разные допустимые значения, в зависимости от того, какое свойство указывается. В нашем примере мы имеем свойство color, которые могут принимать различные цветовые значения. У нас также есть font-size свойство. Это свойство может принимать различные размерные значения как и свойства.

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

h1 {
    color: red;
    font-size: 5em;
}

p {
    color: black;
}

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

Заметка: Вы можете найти ссылки на все страницы свойств CSS (вместе с другими функциями CSS), перечисленные в MDN CSS reference. Кроме того, вы должны привыкнуть к поиску "MDN css-feature-name" в вашей любимой поисковой системе, когда вам нужно узнать больше информации о функции CSS. Например, попробуйте поискать «mdn color» и «mdn font-size»!

CSS Модули

Поскольку существует множество вещей, которые можно стилизовать с помощью CSS, язык разбит на модули. По мере изучения MDN вы увидите ссылки на эти модули, а многие страницы документации организованы вокруг определенного модуля. Например, вы можете взглянуть на ссылку MDN на Backgrounds and Borders Модуль, чтобы узнать, какова его цель, и какие различные свойства и другие функции он содержит. Вы также найдете ссылки на спецификацию CSS, которая определяет технологию (см. Ниже).

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

Для конкретного примера давайте вернемся к модулю Backgrounds and Borders - вы можете подумать, что это логично для background-color и border-color свойства, которые будут определены в этом модуле. И ты был бы прав.

Технические характеристики CSS

Все технологии веб-стандартов (HTML, CSS, JavaScript и т. д.) Определены в гигантских документах, называемых спецификациями (или просто «спецификациями»), которые публикуются организациями по стандартизации. (such as the W3C, WHATWG, ECMA, или Khronos) и точно определить, как эти технологии должны вести себя.

CSS ничем не отличается - он разработан группой в W3C, которая называется CSS Working Group. Эта группа состоит из представителей производителей браузеров и других компаний, которые заинтересованы в CSS. Есть также другие люди, известные как приглашенные эксперты, которые выступают как независимые голоса; они не связаны с членской организацией.

Новые функции CSS разрабатываются или определяются рабочей группой CSS. Иногда потому, что конкретный браузер заинтересован в том, чтобы иметь какие-то возможности, иногда потому, что веб-дизайнеры и разработчики запрашивают функцию, а иногда потому, что сама рабочая группа определила требование. CSS постоянно развивается, появляются новые функции. Тем не менее, ключевым моментом в CSS является то, что все работают очень усердно, чтобы никогда не менять вещи таким образом, чтобы это сломало старые сайты. Веб-сайт, созданный в 2000 году, с использованием ограниченного CSS, доступного в то время, должен все еще использоваться в браузере сегодня!

Как новичок в CSS, вполне вероятно, что вы найдете CSS-спецификации ошеломляющими - они предназначены для инженеров, чтобы использовать их для реализации поддержки функций в пользовательских агентах, а не для веб-разработчиков, чтобы читать, чтобы понимать CSS. Многие опытные разработчики предпочитают обращаться к документации MDN или другим учебникам. Однако стоит знать, что они существуют, понимать взаимосвязь между используемым CSS, поддержкой браузера (см. Ниже) и спецификациями.

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

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

Ниже приведена диаграмма данных для CSS свойстаfont-family.

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
font-familyChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1
Замечания
Полная поддержка 1
Замечания
Замечания Not supported on option elements. See bug 1536148.
IE Полная поддержка 3Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка Да
system-ui
Экспериментальная
Chrome Полная поддержка 56Edge Нет поддержки НетFirefox Нет поддержки Нет
Нет поддержки Нет
Полная поддержка 43
Замечания Альтернативное имя
Замечания Supported on macOS only.
Альтернативное имя Использует нестандартное имя: -apple-system
IE Нет поддержки НетOpera Полная поддержка 43Safari Полная поддержка 9
Замечания Альтернативное имя
Полная поддержка 9
Замечания Альтернативное имя
Замечания Supported since macOS 10.11.
Альтернативное имя Использует нестандартное имя: -apple-system
WebView Android Полная поддержка 56Chrome Android Полная поддержка 56Firefox Android Нет поддержки НетOpera Android Полная поддержка 43Safari iOS Полная поддержка 9
Альтернативное имя
Полная поддержка 9
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -apple-system
Samsung Internet Android Полная поддержка 6.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.
Использует нестандартное имя.
Использует нестандартное имя.

Что дальше?

Теперь, когда у вас есть некоторое представление о том, что такое CSS, давайте перейдем к Начало работы с CSS, где вы можете начать писать CSS самостоятельно.

В этом модуле

  1. Что такое CSS?
  2. Начало работы с CSS
  3. Как структурирован CSS
  4. Как работает CSS
  5. Используя ваши новые знания