Открыть меню    

Термины CSS

терминология 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.

Комментарии к статье

Добавить комментарий