Термины CSS

Чтобы писать детально о css, необходимо полностью понимать терминологию css. Много раз я просил помощи на форумах и зачастую не мог правильно описать свою проблему. Именно поэтому мне пришла отличная идея описать все основные термины CSS.

Терминология CSS

Свойство (property):

Стиль, применяемый к селектору, например, border.

Значение (value):

Значение, которое может иметь свойство, например, 1px.

Ключевые слова (keyword):

Слова определенные внутри спецификации css и поэтому они никогда не должны находиться в кавычках, например: red, solid, dotted.

Единицы длин (Length Units):

Значения могут быть заданы в единицах, например: 1px, 2%.

Функциональные записи (Functional Notation):

Любое значение, записанное как функция (идентификатор, заключенный в скобки – () ). В основном используется для обозначения цвета, url, атрибутов и трансформаций. Например: rgba(0, 0, 0, 0.5), url('im.png'), attr('href'), scale(20).

Объявления (Declaration):

Набор из свойства и значения. Например:

CSS

           
background: red; 

Блок объявлений (Declaration Block):

набор объявлений, которые заключены в фигурные скобки «{}». Например:

CSS

{
clear: both;
color: sky;
}

Правило или набор правил (Rule or Rule Set):

Селектор(ы) и стоящий за ним блок объявлений. Например.

CSS

#lovelyweather
{ 
clear: both;
color: skyblue;
}

Селектор (selector): С помощью селектора определяется элемент разметки, которому необходимо задать какой-либо стиль. Существует несколько видов селекторов:

Класс (Class):

Например, .cloudy позволяет выбрать элемент с классом cloudy.

Идентификатор (ID):

Главная особенность идентификатора в том, что с помощью него можно идентифицировать всего один элемент. Короче говоря, на странице должен быть всего один тег с данным ID.

Атрибут селектора (Attribute Selector):

Если у элемента есть специфичный атрибут, то его можно идентифицировать по этому атрибуту. Для этого нужно перед селектором, в квадратных скобках, указать атрибут, по которому будет идентифицироваться элемент (пробелы между селектором и квадратными скобками не допускаются). a[href="http://www.somesite.com"]{font-weight:bold;}

Псевдоклассы (Pseudo-Classes):

Существует несколько видов псевдоклассов. Псевдоклассы, относящиеся к дереву документа, определяют элемент в документе по статусу и применяют к нему заданный стиль. Например, p:first-child задаст правило только первому абзацу в документе. Также есть псевдоклассы, которые определяют текущее состояние элемента. Например, a:hover, задает стилевое правило, которое активизируется в том случае, если курсор мышки будет наведен на элемент а.

Псевдоэлементы (Pseudo-Elements):

Псевдоэлементы, в отличие от псевдоклассов, фактически создают элемент в дереве документа. Посредством псевдоэлементов можно модифицировать содержимое HTML-документа. Например, псевдоэлемент :first-letter определяет стиль первой буквы элемента, к которому добавляется. В идеале псевдоэлементы нужно использовать так: «::» вместо «:»(однако большинство браузеров признают и «:»).

Комбинаторы (Combinators): Позволяют выбрать элемент в зависимости от родства с другим элементом. Комбинаторы: пробел, >, +, или, ~.

Потомственный комбинатор (Descendant Combinator):

Определяет связь между селекторами. Часто используется, например, #lovelyweather h1.

Прямой потомок (Child Combinator ‛>"):

С помощью него можно задать стиль прямому потомку (другие «родственники» будут игнорироваться).

Соседний родственный комбинатор (Adjacent Sibling Combinator ‛+"):

С помощью этого комбинатора задается стиль для соседнего элемента.

Обобщенный родственный комбинатор (General Sibling Combinator «~»):

Этот комбинатор объединяет два простых селектора, причем в структуре документа они необязательно следуют друг за другом, хотя и обязаны иметь одного родителя.

Более подробно о комбинаторах и селекторах можно узнать в статье CSS селекторы

Aт-правила (At-Rules):

Правила, которые начинаются с символа @, например: @import, @page, @media, и @font-face.