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

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

Структура языка CSS

селектор — это HTML-элемент, который вы хотите стилизовать, и свойство и ценить определите стили, которые вы хотите применить к этому элементу:

selector {
  property: value;
}

Например, следующий CSS сделает все <h1> элементы страницы имеют красный цвет и размер шрифта 32 пикселя:

CSS

h1 {
  color: red;
  font-size: 32px;
}

Выход

Вы также можете указать уникальный идентификатор элемента CSS:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

Или используйте класс в нескольких элементах:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

Выход

Я хочу выделять слово в теге span.

Вы можете включить CSS в свой HTML-документ тремя способами:

  1. Встроенный CSS с использованием style атрибут в элементе HTML
  2. Внутренний CSS с использованием <style> элемент <head> в вашем HTML-документе
  3. Внешний CSS с использованием отдельного файла .css, который связан с вашим HTML-документом с помощью <link> элемент <head> в вашем HTML-документе
ЧИТАТЬ  Цены на жесткие диски могут значительно вырасти после предполагаемого «краха» крупного игрока, что открывает путь к растущему доминированию твердотельных накопителей на рынке хранения данных.

Адаптивный CSS

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

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

CSS-сжатие

В приведенном выше примере вы можете видеть, что есть комментарий, медиа-запрос и несколько стилей, которые используют пробелы и переводы строк для организации представления CSS. Хорошей практикой является минимизация или сжатие CSS на вашем сайте, чтобы уменьшить размеры файлов и, следовательно, время, необходимое для запроса и отображения стиля. Это немалая сумма… в некоторых приведенных выше примерах вы можете увидеть экономию более 50%.

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

Что такое СКСС?

Sassy CSS (SCSS) — это препроцессор CSS, который добавляет дополнительную функциональность и синтаксис в язык CSS. Он расширяет возможности CSS, позволяя использовать переменные, примеси, функции и другие функции, недоступные в стандартном CSS.

Преимущества СКСС

  • Улучшенная поддержка: с помощью переменных вы можете хранить значения в одном месте и повторно использовать их в таблице стилей, что упрощает поддержку и обновление стилей.
  • Лучшая организация: с помощью миксинов вы можете группировать и повторно использовать наборы стилей, что делает вашу таблицу стилей более организованной и легкой для чтения.
  • Расширенная функциональность: SCSS включает в себя множество функций, недоступных в стандартном CSS, например функции, структуры управления (например, if/else) и арифметические операции. Это позволяет создать более динамичный и выразительный стиль.
  • Повышенная производительность: файлы SCSS компилируются в CSS, что может повысить производительность за счет уменьшения объема кода, который приходится анализировать браузеру.
ЧИТАТЬ  NTIA получила более 1450 комментариев об ответственности ИИ

Недостатки SCSS

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

В приведенном ниже примере код SCSS использует переменные для хранения значений ($primary-color и $font-size), который можно повторно использовать в таблице стилей. Код CSS, созданный на основе этого кода SCSS, эквивалентен, но не включает переменные. Вместо этого значения переменных используются непосредственно в CSS.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

Еще одна особенность SCSS, продемонстрированная в этом примере, — это вложенные стили. в коде SCSS h1 стили вложены body стили, которые невозможны в стандартном CSS. Когда код SCSS компилируется, вложенные стили расширяются до отдельных стилей в коде CSS.

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

Source