Что такое CSS?

Опубликовано: 2019-03-08

Последнее обновление: 22 апреля 2020 г.

Cascading Style Sheets for the web Во Всемирной паутине (www) CSS является аббревиатурой от Cascading Style Sheets. CSS — это язык таблицы стилей, используемый для описания представления документа, написанного на языке разметки, обычно HTML. CSS управляет тем, как макет и содержимое веб-страницы должны отображаться на экране, бумаге или других носителях. CSS экономит много работы, потому что он одновременно управляет макетом нескольких веб-страниц.

Документ обычно представляет собой текстовый файл, структурированный с использованием языка разметки, такого как HTML. Представление документа означает преобразование его в пригодную для использования форму, представленную визуально на экране компьютера через веб-браузер, такой как Chrome, Firefox, Opera, Microsoft Edge и другие. Веб-браузеры применяют правила CSS к документу, чтобы повлиять на его отображение.

Этот блог представляет собой общее введение в каскадные таблицы стилей (CSS), в котором определяется, что они собой представляют и для чего используются в Интернете. Это введение, которое отвечает на основные вопросы, не углубляясь в удивительный и интересный мир CSS.

Что! Компания предоставляет привлекательные и эффективные услуги веб-дизайна для агентств по всему миру. Узнайте больше о наших услугах веб-дизайна White Label и о том, как мы можем помочь вам и вашим клиентам создать или улучшить свое присутствие в Интернете. Начните сегодня!

CSS инициирован в 1994 году. Он был создан и поддерживается W3C. Рабочая группа CSS W3C создает документы, называемые спецификациями. После обсуждения и официальной ратификации спецификаций членами W3C они становятся рекомендацией.

Каскадные таблицы стилей уровня 1 (CSS1) вышли из W3C в качестве рекомендации в декабре 1996 года. CSS2 стал рекомендацией W3C в мае 1998 года. Уровень CSS 3, запущенный в 1998 году, все еще находится в стадии разработки. CSS3 — это комбинация спецификаций CSS2 и новых спецификаций, называемых модулями. Спецификация CSS формируется из набора свойств, значения которых задаются для обновления способа отображения содержимого HTML.

CSS пришел, чтобы упростить процесс представления документов на языке разметки. Вы можете управлять различными свойствами, такими как:

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

Как мы применяем CSS?

Cascading Style Sheets for the web Существует четыре способа применения стилей к нашим HTML-документам. Наиболее часто используемые методы — это внешние файлы CSS, встроенные в элемент <style> внутри нашего HTML-документа. Если указаны разные стили листа, стили будут последовательно объединяться в новые стили со следующим приоритетом (чем выше число, тем менее важно):

Приоритет 4: Браузер по умолчанию

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

That! Company White Label Services

Приоритет 3: файл внешней таблицы стилей

Элемент <link> можно использовать для включения внешнего файла таблицы стилей в ваш HTML-документ. Внешняя таблица стилей представляет собой отдельный текстовый файл с расширением «.css». Мы определяем все правила стиля в этом текстовом файле, а затем включаем этот файл в любой HTML-документ внутри тегов <head>…</head> с помощью элемента <link>.

 <link rel="stylesheet" type="text/css" href="style.css" />

Приоритет 2: встроенный в HTML-документ

Мы можем поместить наши правила CSS в документ HTML, используя элемент <style>, чтобы содержать правила. Теги <style>…</style> размещаются внутри тегов <head>…</head>.

 <стиль>
 селектор {
 стоимость имущества;
 }
 </стиль>

Приоритет 1: Встроенный в наши элементы HTML

Мы можем использовать атрибут стиля любого элемента HTML для определения правил стиля. Эти правила будут применяться только к этому элементу.

 <p>Привет, мир!</p>

Переопределение правил CSS

Мы описали четыре способа применения правил таблиц стилей к нашему HTML-документу. Вот правило, переопределяющее любое правило таблицы стилей:

Любая встроенная таблица стилей имеет наивысший приоритет. Таким образом, он переопределит любое правило, определенное в тегах <style>…</style>, или правила, определенные в любом внешнем файле таблицы стилей.

Любое правило, определенное в тегах <style>…</style>, переопределяет правила, определенные в любом внешнем файле таблицы стилей.

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

Селекторы CSS

Правило CSS интерпретируется браузером и затем применяется к соответствующим элементам в нашем HTML-документе. Правило стиля состоит из трех частей:

  • Селектор — используется для «поиска» (или выбора) элементов HTML на основе их имени элемента, идентификатора, класса, атрибута и т. д.
  • Свойство — это тип стиля CSS. Это может быть цвет, граница, фон, шрифт, отображение, выравнивание текста, поля, межстрочный интервал и т. д.
  • Значение — присваивается свойствам. Например, свойство background-color может иметь значение красного или зеленого цвета.

Синтаксис правила CSS

Синтаксис правила CSS состоит из селектора и объявления свойства и значения:

 селектор { свойство: значение; }

Селектор указывает на элемент HTML для стиля.

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

Каждое объявление включает имя свойства CSS и значение, разделенные двоеточием.

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

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

Читать далее

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

Школа W3C

МДН

Учебник по CSS