Введение в 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.
- Значения ключевых слов. В этом подходе мы просто пишем название требуемого цвета.
- Шестнадцатеричные значения. Шестнадцатеричные значения представлены тремя или шестью символами, и значение всегда состоит из фунта или хеша
#
в начале. - Значения RGB: цвета RGB и представлены функцией
rgb()
, которая обозначает красный, зеленый и синий цвета. Значения указаны в виде целых чисел через запятую. Первое значение представляет красный цвет, второе - зеленый, а последнее значение - синий цвет. Значение может быть любым от 0 до 255. - Значения RGBa: представлены функцией
rgba()
. Здесьa
обозначает альфа-значения для цветов RGB. Это должно быть число от 0 до 1. Они в основном используются для обеспечения прозрачности цветов.
Есть несколько других способов определения цвета, однако они широко не используются и принимаются не всеми браузерами.
B. Длина. Один из самых простых способов определить длину - использовать пиксели (px). Но есть и другие способы. Они делятся на две категории.
- Абсолютные длины. Примеры абсолютных длин: пиксели, сантиметры, дюймы и т. д. Абсолютные длины всегда фиксированы. Он не реагирует на увеличение или уменьшение размера экрана.
- Относительные длины. Относительные длины отличаются от абсолютных, поскольку они не являются фиксированной единицей измерения. Он полагается на другие единицы измерения. Наиболее распространенными относительными единицами являются проценты, em, vm, rem и т. Д.
Относительные единицы будут подробно обсуждаться, когда мы дойдем до части адаптивного веб-дизайна в HTML и CSS.
Таким образом, мы рассмотрели некоторые из основных концепций HTML-CSS в первых двух частях. В следующей части мы обсудим другие важные темы.
Спасибо!