Введение в CSS

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

Давайте начнем с некоторых общих терминов CSS.

Селекторы, свойства и значения: На рисунке 1 выше h1 - это селектор, color & font-size - свойства, а red & 34px - значения.

Селекторы типа. В приведенном выше примере способ нацеливания на элемент известен как селектор типа.

Селекторы классов. Селектор классов в CSS обозначается символом ., за которым следует значение атрибута класса.

Селекторы ID: селектор ID более специфичен, чем селектор классов и типов. Чтобы настроить таргетинг на элемент с помощью селектора ID в CSS, мы используем #, за которым следует значение, определенное внутри атрибута ID.

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

Однако лучше всего иметь одну отдельную таблицу стилей для написания нашего CSS, а затем связать ее с тегом <link> внутри элемента head. Это позволяет хранить код HTML и CSS отдельно в более организованном виде.

Сброс CSS: сброс CSS используется для отображения похожих стилей в разных браузерах. Он удаляет все размеры по умолчанию, поля, отступы и все дополнительные стили из элемента.

Один из самых популярных - Сброс Эрика Мейера.

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

Стандартные свойства и значения CSS:

A. Цвета. Существует четыре наиболее распространенных способа применения цвета в CSS.

  1. Значения ключевых слов. В этом подходе мы просто пишем название требуемого цвета.
  2. Шестнадцатеричные значения. Шестнадцатеричные значения представлены тремя или шестью символами, и значение всегда состоит из фунта или хеша # в начале.
  3. Значения RGB: цвета RGB и представлены функцией rgb(), которая обозначает красный, зеленый и синий цвета. Значения указаны в виде целых чисел через запятую. Первое значение представляет красный цвет, второе - зеленый, а последнее значение - синий цвет. Значение может быть любым от 0 до 255.
  4. Значения RGBa: представлены функцией rgba(). Здесь a обозначает альфа-значения для цветов RGB. Это должно быть число от 0 до 1. Они в основном используются для обеспечения прозрачности цветов.

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

B. Длина. Один из самых простых способов определить длину - использовать пиксели (px). Но есть и другие способы. Они делятся на две категории.

  1. Абсолютные длины. Примеры абсолютных длин: пиксели, сантиметры, дюймы и т. д. Абсолютные длины всегда фиксированы. Он не реагирует на увеличение или уменьшение размера экрана.
  2. Относительные длины. Относительные длины отличаются от абсолютных, поскольку они не являются фиксированной единицей измерения. Он полагается на другие единицы измерения. Наиболее распространенными относительными единицами являются проценты, em, vm, rem и т. Д.

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

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

Спасибо!