Что такое каскадные таблицы стилей и для чего используется CSS?

Дядя Влад

CSS принадлежит к тройке основных веб-технологий наряду с HTML и JavaScript. При тщательном планировании CSS помогает разделить проблемы. Независимые ресурсы управляют структурой контента, его представлением и поведением.

Таблицы стилей играют важную роль в доступности, масштабируемости и даже производительности в Интернете. Как автор контента или веб-дизайнер, они дают вам контроль над тем, как устройства отображают контент. От макета до размера и цвета шрифта – CSS превращает контент в красивые страницы.

Как выглядит CSS?

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

Элементы HTML имеют различные свойства, которые можно стилизовать с помощью CSS. Свойство color устанавливает цвет переднего плана (например, текста). Размер шрифта зависит от свойства font-size .

Каждому свойству можно присвоить поддерживаемое значение. Присвоение значения свойству – это «объявление». Обычно они выглядят так:

 property: value

Например:

 color: red

Значения для разных свойств могут сильно отличаться, даже значения для одного и того же свойства. Например, вот еще два способа написать предыдущее объявление:

 color: #ff0000
 color: rgb(255, 0, 0)

Как сочетаются HTML и таблицы стилей

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

Написание стилей в строке

Самый простой способ – прикрепить объявления стиля непосредственно к элементу в файле HTML. Вы можете сделать это с помощью атрибута style следующим образом:

 <body style="color: red">
 <p>Most of this text is red …</p>
 <p style="color: blue">… but this isn't!</p>
 </body>

Хотя стилизация таких встроенных элементов может быть удобной, у нее есть несколько недостатков. Во-первых, это усложняет HTML, что затрудняет чтение с первого взгляда. Также неудобно поддерживать: представьте себе длинный документ, в котором мы хотим установить цвет каждого абзаца. Это CSS, но это не «Таблицы стилей».

Встраивание стилей в голову

Вы можете начать видеть, как выглядит таблица стилей со вторым механизмом – встраиванием . Используя этот подход, мы собираем все объявления стилей вместе внутри элемента стиля в заголовке нашего документа. Это будет выглядеть примерно так:

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 /* style instructions go here */
 </style>
 </head>
 <body>
 ...

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

Здесь на помощь приходят селекторы CSS . Они позволяют нам нацеливать определенные части страницы и определять их стиль в одном месте, используя следующий синтаксис:

 selector {
 declaration1;
 declaration2;
 /* etc. */
 }

Например, чтобы сделать текст абзаца синим, мы можем указать следующее:

 p {
 color: blue;
 }

В этом примере селектором является просто p , который соответствует всем элементам абзаца в нашем документе. Он окрашивает весь текст в синий цвет, если он находится в тегах <p> .

Связывание внешней таблицы стилей

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

 <link rel="stylesheet" href="styles.css" />

Вставьте этот код в теги <head> вашего HTML-файла, чтобы связать вашу внешнюю таблицу стилей.

Сила CSS

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

Вот лишь несколько преимуществ этого разделения:

  • Вы можете отключить таблицу стилей, просто изменив ссылку на файл. Это может происходить даже динамически. За один шаг вы можете полностью изменить внешний вид страницы.
  • При необходимости многие страницы могут использовать одни и те же таблицы стилей. Изменяя один файл, вы можете обновить внешний вид всего веб-сайта.
  • Разделение страницы на «содержание» и «стиль» имеет технические преимущества. Прокси и браузеры могут кэшировать отдельные файлы отдельно. Это означает, что сайт может отправлять информацию о своем стиле один раз, а не включать ее на каждую страницу.
  • При совместной работе разные команды могут работать со своими сильными сторонами, создавая и редактируя отдельные файлы, не влияя друг на друга.

Объясняя Каскад

Вы многое узнали о стилях и таблицах стилей, но как насчет «каскадной» части CSS?

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

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

Каскад указывает, что таблица стилей автора применяется после стилей пользовательского агента. Если наш браузер говорит «заголовки выделены жирным шрифтом», но автор страницы заявляет, что «заголовки на этой странице светлые», тогда они будут светлыми.

Есть еще один источник таблиц стилей, который передает некоторый контроль читателю. Теоретически любой веб-пользователь может поддерживать пользовательскую таблицу стилей с собственными правилами. Они находятся посередине: пользовательские правила переопределят настройки браузера по умолчанию, но сами будут переопределены стилями авторов. К сожалению, поддержка пользовательских таблиц стилей никогда не была широко распространена.

Ориентация на разные СМИ

Таблицы стилей можно использовать в разных контекстах за пределами экрана. Атрибут media элемента ссылки определяет, к каким типам мультимедиа применяется таблица стилей. Например, вы можете определить таблицу стилей для печати, используя следующую разметку:

 <link rel="stylesheet" href="print.css" media="print" />

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

Связанный: Как просматривать веб-страницы, если вы слепой или слабовидящий

Такие сайты, как Википедия, используют CSS для управления своим стилем печати, скрытия нежелательных элементов и упрощения макета.

CSS делает HTML хорошо выглядящим

Каскадные таблицы стилей охватывают многое: каскад, наследование, селекторы, источники, мультимедиа и т. Д. Но их возможности позволяют использовать современный Интернет. Это среда, которая обеспечивает встроенные функции повторного использования, гибкости и доступности.

Чтобы увидеть всю мощь CSS и то, что он может предложить, ознакомьтесь с нашей шпаргалкой, охватывающей все основные свойства CSS3.