Css синтаксис: Базовый синтаксис CSS

Содержание

Базовый синтаксис CSS | htmlbook.ru

Как уже было отмечено ранее, стилевые правила записываются в своём формате, отличном от HTML. Основным понятием выступает селектор — это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Общий способ записи имеет следующий вид.

Вначале пишется имя селектора, например, TABLE, это означает, что все стилевые параметры будут применяться к тегу <table>, затем идут фигурные скобки, в которых записывается стилевое свойство, а его значение указывается после двоеточия. Стилевые свойства разделяются между собой точкой с запятой, в конце этот символ можно опустить.

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Так, в примере 5.1 показаны две разновидности оформления селекторов и их правил.

Пример 5.1. Использование стилей

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Заголовки</title>
  <style> 
   h2 { color: #a6780a; font-weight: normal; } 
   h3 { 
    color: olive; 
    border-bottom: 2px solid black; 
   }
  </style>
 </head>
 <body>
  
  <h2>Заголовок 1</h2>
  <h3>Заголовок 2</h3>
  
 </body>
</html>

В данном примере свойства селектора h2 записаны в одну строку, а для селектора h3 каждое свойство находится на отдельной строке. Во втором случае легче отыскивать нужные свойства и править их по необходимости, но при этом незначительно возрастает объем данных за счёт активного использования пробелов и переносов строк. Так что в любом случае способ оформления стилевых параметров зависит от разработчика.

Правила применения стилей

Далее приведены некоторые правила, которые необходимо знать при описании стиля.

Форма записи

Для селектора допускается добавлять каждое стилевое свойство и его значение по отдельности, как это показано в примере 5.2.

Пример 5.2. Расширенная форма записи

td { background: olive; }
td { color: white; }
td { border: 1px solid black; }

Однако такая запись не очень удобна. Приходится повторять несколько раз один и тот же селектор, да и легко запутаться в их количестве. Поэтому пишите все свойства для каждого селектора вместе. Указанный набор записей в таком случае получит следующий вид (пример 5.3).

Пример 5.3. Компактная форма записи

td {
  background: olive;
  color: white;
  border: 1px solid black;
}

Эта форма записи более наглядная и удобная в использовании.

Имеет приоритет значение, указанное в коде ниже

Если для селектора вначале задаётся свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде установлено ниже (пример 5.4).

Пример 5.4. Разные значения у одного свойства

p { color: green; }
p { color: red; }

В данном примере для селектора p цвет текста вначале установлен зелёным, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к тексту.

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

Значения

У каждого свойства может быть только соответствующее его функции значение. Например, для color, который устанавливает цвет текста, в качестве значений недопустимо использовать числа.

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

Чтобы пометить, что текст является комментарием, применяют следующую конструкцию (пример 5.5).

Пример 5.5. Комментарии в CSS-файле


 /* 
  Стиль для сайта htmlbook.ru
  Сделан для ознакомительных целей
*/
  
div {
  width: 200px; /* Ширина блока */
  margin: 10px; /* Поля  вокруг элемента */
  float: left; /* Обтекание по правому краю */
}

Как следует из данного примера, комментарии можно добавлять в любое место CSS-документа, а также писать текст комментария в несколько строк. Вложенные комментарии недопустимы.

Вопросы для проверки

1. Люба подключила к HTML-документу одновременно два стилевых файла — style1.css и style2.css. Причём в файле style2.css первой строкой импортируется еще один файл с именем style3.css. В файле style1.css цвет текста задается красным, в style2.css — синим, а в style3.css — зелёным. Какой цвет текста будет на странице?

красный.
синий.
зелёный.
чёрный.
установленный в браузере по умолчанию.

2. В какой строке кода содержится ошибка?

p { text-align: center; color: #000000 }

div { color: red; font-size: 11pt; }
title { color: #fc0; margin: 10px; }
p { color: green; color; }
html { float: left; }

3. Какая ошибка содержится в следующем коде?

/* ———————————
div {
color: #fc0; /* Цвет теска */
margin: 10px; /* Поля вокруг элемента */
float: left /* Обтекание по правому краю */
}
——————————— */

Опечатка в тексте комментария.
Вложенные комментарии.
Нет точки с запятой.
Недопустимые значения у стилевых свойств.
Лишние переносы в коде.

4. В какой строке содержится корректный синтаксис?

body:color=black
body{color:black}
{body;color:black}
{body:color=black}
body{color=black}

5. Как правильно вставить комментарий в CSS-файл?

‘ комментарий
// комментарий

// комментарий //
/* комментарий */
<!— комментарий —>

Ответы

1. синий.

2. p { color: green; color; }

3. Вложенные комментарии.

4. body{color:black}

5. /* комментарий */

Базовый синтаксис CSS | Учебные курсы

Стилевые правила записываются в собственном формате, отличном от HTML. Основным понятием выступает селектор — это шаблон, который используется для выбора одного или нескольких элементов HTML и применения к ним параметров форматирования. Общий способ записи имеет следующий вид.

Вначале указывается имя селектора, например, div, это означает, что все стилевые параметры будут применяться ко всем элементам <div> в HTML-документе. Затем пишутся фигурные скобки, внутри которых идёт стилевое свойство, а его значение указывается после двоеточия. Стилевые свойства разделяются между собой точкой с запятой, в конце этот символ можно опустить.

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Так, в примере 1 показаны две разновидности оформления селекторов и их правил.

Пример 1. Использование стилей

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Заголовки</title> <style> h2 {color:#a6780a;font-weight:normal;} h3 { color: olive; border-bottom: 2px solid black; } </style> </head> <body> <h2>Заголовок 1</h2> <h3>Заголовок 2</h3> </body> </html>

В данном примере свойства селектора h2 записаны в одну строку без пробелов, а для селектора h3 каждое свойство располагается на отдельной строке. Во втором случае проще отыскивать нужные свойства и править их по необходимости, но при этом незначительно возрастает объём данных за счёт активного использования пробелов и переносов строк. Обычно при разработке сайта используют наиболее удобную и наглядную форму записи, а уже перед публикацией сайта из стилевого файла для сокращения его объёма удаляются все пробелы и переносы строк.

Правила применения стилей

Далее приведены некоторые правила, которые необходимо знать при описании стиля.

Форма записи

Для селектора допускается добавлять каждое стилевое свойство и его значение по отдельности, как это показано в примере 2.

Пример 2. Расширенная форма записи

td { background: olive; }
td { color: white; }
td { border: 1px solid black; }

Однако такая запись не очень удобна. Приходится повторять несколько раз один и тот же селектор, да и легко запутаться в их количестве. Поэтому практичнее писать все свойства для каждого селектора вместе. Указанный набор записей в таком случае получит следующий вид (пример 3).

Пример 3. Компактная форма записи

td {
  background: olive; /* Оливковый цвет фона */
  color: white; /* Белый цвет текста */
  border: 1px solid black; /* Чёрная рамка */
}

Эта форма записи более наглядная и удобная в использовании.

Имеет приоритет значение, указанное в коде ниже

Если для селектора вначале задаётся свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде CSS установлено ниже (пример 4).

Пример 4. Разные значения у одного свойства

p { color: green; /* Зелёный цвет текста */ }
p { color: red; /* Красный цвет текста */ }

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

Значения

У каждого свойства может быть только соответствующее его целям значение. Например, для color, который устанавливает цвет текста, в качестве значений недопустимо использовать числа.

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

Чтобы пометить, что текст является комментарием, применяют следующую конструкцию /* … */ (пример 5).

Пример 5. Комментарии в CSS-файле

/* 
  Стиль для сайта webref.ru
  Сделан для ознакомительных целей
*/
  
div {
  width: 200px; /* Ширина блока в пикселях */
  background: #f0f0f0; /* Серый цвет фона */
  border: 1px solid olive; /* Оливковая рамка */ 
}

Как следует из данного примера, комментарии можно добавлять в любое место CSS-документа, а также писать текст комментария в несколько строк. Вложенные комментарии, когда один комментарий располагается внутри другого, недопустимы.

Синтаксис CSS: правила и оформление кода

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

Правила CSS

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

Первым всегда указывается селектор, он сообщает браузеру, к какому элементу или элементам веб-страницы будет применен стиль.
Примечание: на изображении в качестве селектора выступает селектор типа, во многих примерах самоучителя мы будем использовать именно этот селектор.
Далее следует блок объявлений, который начинается с открывающей фигурной скобки { и заканчивается закрывающей }, между фигурными скобками указываются форматирующие команды (объявления), которые используются браузером для стилизации выбранного селектором элемента. В блоке может быть указано сколько угодно объявлений. Сам блок объявлений так же называют просто стилем.
Каждое объявление состоит из двух частей: свойства и его значения. Объявление всегда должно заканчиваться точкой с запятой (;). Опустить указание «;» можно только в конце последнего объявления перед закрывающей фигурной скобкой.
Свойство — это команда форматирования, определяющая конкретный стилевой эффект для элемента. Само свойство представляет из себя слово или несколько написанных через дефис слов. Каждое свойство имеет свой предопределенный набор значений. После имени свойства указывается двоеточие, которое отделяет название свойства от допустимого значения.

Оформление кода

Браузер игнорирует большинство пробельных символов в CSS-коде, поэтому их можно использовать с пользой для себя, придавая коду удобочитаемый вид. К пробельным символам относятся: символы табуляции, перенос строки и обычные пробелы, их можно использовать в любом количестве. Пробельные символы можно ставить между селектором и блоком объявлений, в самом блоке объявлений — между фигурной скобкой и свойством, между свойствами, свойством и значением.

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


p {
  color: blue;
  font-size: 12px;
}

Пробельные символы в основном используют, когда в правиле указывается много свойств, чтобы легче было прочитать и представить, что именно делает тот или иной стиль. Код предыдущего примера можно написать и в одну строку, не используя пробельных символов, но такой код будет менее удобен для чтения и понимания:

p{color:blue;font-size:12px;}

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

С этой темой смотрят:

Синтаксис — CSS | MDN

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

Свойство (property) — идентификатор действия, которое будет применено к элементу (например, цвет, или размер границы, и т.д.).
Значение (value) — описывает, как именно свойство будет обработано браузером. Каждое свойство имеет набор допустимых значений, определённых формальными правилами, а также семантический смысл, реализованный движком браузера.

Задание CSS свойствам определённых значений — это основная функция CSS. Пара свойство-значение называется объявлением. Работа CSS движка заключается в поиске соответствий между объявлениями стилей и элементом на странице, чтобы правильно отобразить и форматировать этот элемент.

И свойство, и значения регистрозависимы. Пара свойство-значение разделяется двоеточием, ‘:‘ (U+003A COLON), а пробелы до, между и после свойства или значения игнорируются.

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

Объявления группируются в блоки, структура которых состоит из открывающейся , ‘{‘ (U+007B LEFT CURLY BRACKET), и закрывающейся, ‘}‘ (U+007D RIGHT CURLY BRACKET) фигурных скобок.

Такие блоки называются блоками объявлений, и объявления в них разделяются точкой с запятой, ‘;‘ (U+003B SEMICOLON). Блок объявлений может быть пустым, т.е. не содержать объявлений. Пробелы между объявлениями игнорируются. Последнее объявление блока не нуждается в точке с запятой, хотя считается хорошим тоном добавить её для того, чтобы не допустить упущение этого знака при добавлении другого объявления в будущем.

Содержимое блока объявлений CSS, т. е. объявления, разделённые точкой с запятой. Блок объявлений может быть помещён внутри атрибута style HTML-документа без фигурных скобок.

If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.

CSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by a selector which is a condition selecting some elements of the page. The pair selector-declarations block is called a ruleset, or often simply a rule.

As an element of the page may be matched by several selectors, and therefore by several rules eventually containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the cascade algorithm.

It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn’t apply to the validity of the ruleset itself.

This leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole selector is invalid and therefor the entire rule is ignored (as invalid too).

Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.

A statement is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).

There are different kinds of statements:

Rulesets (or rules) that, as seen, associate a collection of CSS declarations to a condition described by a selector.
At-rules that start with an at sign, ‘@‘ (U+0040 COMMERCIAL AT), followed by an identifier and then continuing up the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of at-rules, defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like @charset (en-US) or @import (en-US)), conditional information (like @media or @document), or descriptive information (like @font-face).

Any statement which isn’t a rule or an at-rule is invalid and ignored.

There is another group of statements, the nested statements, these are statements that can be used in a specific subset of at-rules, the conditional group rules. These statements only apply if a specific condition is matched: the @media at-rule content is applied only if the device on which runs the browser matches the expressed condition; the @document at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only rulesets could be used inside a conditional group rules. That was very restrictive and this restriction was lifted in CSS Conditionals Level 3. Now, though it still is experimental and not supported by every browser, a conditional group rules can contain a wider range of content, rulesets but also some, but not all, at-rules.

Ключевые концепции CSS: Синтаксис CSS, @-правила, комментарии, специфичность и наследование, блочная модель, режимы компоновки и модели визуального форматирования, схлопывание отступов (en-US), начальные, вычисленные, решённые, указанные, используемые и действительные значения. Синтаксис определения значений (en-US), сокращённые свойства и замещаемые элементы.

CSS-селекторы — CSS | MDN

Селектор определяет, к какому элементу применять то или иное CSS-правило.

Обратите внимание — не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.

Универсальный селектор: Выбирает все элементы. По желанию, он может быть ограничен определённым пространством имён или относиться ко всему пространству имён.
Синтаксис: * ns|* *|*
Пример: * будет соответствовать всем элементам на странице.

Селекторы по типу элемента: Этот базовый селектор выбирает тип элементов, к которым будет применяться правило.
Синтаксис: элемент
Пример: селектор input выберет все элементы <input>.
Селекторы по классу: Этот базовый селектор выбирает элементы, основываясь на значении их атрибута class.=»https»] выберет все ссылки, у которых адрес начинается на «https».

Комбинатор запятая: Комбинатор , это способ группировки, он выбирает все совпадающие узлы.
Синтаксис: A, B
Пример: div, span выберет оба элемента — и <div> и <span>.
Комбинатор потомков: Комбинатор ' ' (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
Синтаксис: A B
Пример: селектор div span выберет все элементы <span>, которые находятся внутри элемента <div>.
Дочерние селекторы: Комбинатор '>' в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
Синтаксис: A > B
Пример: селектор ul > li выберет только дочерние элементы <li>, которые находятся внутри, на первом уровне вложенности по отношению к элементу <ul>.
Комбинатор всех соседних элементов: Комбинатор '~' выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.
Синтаксис: A ~ B
Пример: p ~ span выберет все элементы <span>, которые находятся после элемента <p> внутри одного родителя.
Комбинатор следующего соседнего элемента: Комбинатор '+' выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
Синтаксис: A + B
Пример: селектор ul + li выберет любой <li> элемент, который находится непосредственно после элемента <ul>.

Псевдоклассы: Знак : позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.
Пример: a:visited соответствует всем элементам <a> которые имеют статус «посещённые».
Ещё пример: div:hover соответствует элементу, над которым проходит указатель мыши.
Ещё пример: input:focus соответствует полю ввода, которое получило фокус.
Псевдоэлементы: Знак :: позволяет выбрать вещи, которых нет в HTML.
Пример: p::first-line соответствует первой линии абзаца <p>.

Спецификация	Статус	Комментарии
Selectors Level 4	Рабочий черновик	Добавление комбинатора колонок `\|\|` , селекторов структуры сеточной разметки (CSS grid selector), логических комбинаторов, местоположения, временных, состояния ресурсов, лингвистических и UI псевдоклассов, модификаторов для ASCII регистрозависимых и регистронезависимых атрибутов со значениями и без них.
Selectors Level 3	Рекомендация	Добавлен комбинатор `~` и древовидные структурные псевдоклассы. Сделаны псевдоэлементы, использующие префикс `::` двойное двоеточие. Селекторы дополнительных атрибутов.
CSS Level 2 (Revision 1)	Рекомендация	Добавлен комбинатор потомков `>` и комбинатор следующего соседа `+` . Добавлен *универсальный () комбинатор и селектор атрибутов.**
CSS Level 1	Рекомендация	Первоначальное определение.

Структура CSS. Синтаксис и подключение CSS

Синтаксис CSS
Порядок написания свойств стилей довольно прост:
Селектор { свойство: значение; свойство2: значение; и. т. д.}

Селектор — определяет элемент HTML, к которому применяется форматирование.
Свойство — показывает параметр этого элемента HTML.
Значение — показывает какие изменения должен претерпеть данный параметр.

Пример:
Body { margin: 0; padding: 0 }
Селектором в данном примере служит тег body, свойствами — аргументы margin и padding, а их значения равны нулю. Все элементы после селектора заключаются в фигурные скобки. После «имени» свойства ставится двоеточие, и после пробела следует значение свойства. Значение замыкается точкой с запятой, по завершении описания стилей селектора точку с запятой можно не ставить. Данный пример написания стилей использует строчную запись, но когда свойств много, их удобнее расположить вертикально и разделить. Например:

Body {
margin: 0;
padding: 0;
font-size: 12px;
color: red;
}

При большом количестве значений одного свойства разрешается применение сокращённой записи. А вот и пример:

h3{
font-family: arial, sans-serif;
font-size: 20px;
font-style: italic;
font-weight: bold;
}
Сокращённая запись стилей заголовка h3 будет выглялеть так:

h3{ font: arial,sans-serif 20px italic bold; }

Как видите, после свойства FONT запись его значений идёт через пробелы в одну строчку. Браузер сам определяет подходящие значения и применяет их.

Для того, чтобы таблицы стилей работали с HTML-страницами их необходимо связать друг с другом. Это делается тремя способами:

Таблицы связанных стилей — при данном способе описание стилей выносится в отдельный текстовой файл с расширением css. Сам файл CSS подключают к html-документу с помощью тега <link>, который размещается внутри элемента <head>. На примере Вы видите подключение к веб-странице «документ» файла стилей «site»:

<html>
<head>
<title>Документ</title>
<link rel=»stylesheet» type=»text/css» href=»site.css»>
</head>
<body>
<h3>Заголовок документа</h3>
<p>Текст документа</p>
</body>
</html>

На примере файл стилей находится в корне сайта, но он может быть расположен и на другом сайте,в этом случае адрес ссылки будет полным.

Вторым способом соединения стилей с веб-страницей служит таблица глобальных стилей. В этом случае описание стилей заключают в тег <stayle>, и вновь помещают внутри контейнера <head>. Данный способ увеличивает вес веб-страницы, но всё же позволяет разместить все стили в одном месте. Использование этого приёма противоречит принципу разделения содержания документа и его оформления, но применяется довольно часто. Рассмотрим пример:

<html>
<head>
<title>Документ</title>
<style type=»text/css»>
h3{
font-family: arial, sans-serif;
font-size: 20px;
font-style: italic;
font-weight: bold;
}
p { font: verdana 12px grey; }
</style>
</head>
<body>
<h2>Заголовок документа</h2>
<p>Текст документа</p>
</body>
</html>

На примере заданы свойства селекторов тегов <p> и <h3>.

Третьим и последним приёмом использования таблиц стилей является применение так называемых внутренних стилей. При таком способе применения CSS параметры тега <style> помещают внутри тегов, оформление которых необходимо определить, или изменить. Пример:

<html>
<head>
<title>Документ</title>
</head>
<body>
<h3>Заголовок документа</h3>
<p>Текст документа</p>
</body>
</html>

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

Все три способа подключения таблиц стилей могут применяться как вместе, так и попарно. При их совместном использовании необходимо помнить об их главенстве.
Чем ближе описание стилей к элементу форматирования, тем его приоритет выше. По этой формуле первыми идут Внутренние стили, затем Глобальные, и последними в данном списке следуют стили, вынесенные в отдельный файл (Таблицы связанных стилей).

Базовый синтаксис CSS

Пример 5.1. Использование стилей

Правила применения стилей

Далее приведены некоторые правила, которые необходимо знать при описании стиля.

Форма записи

Пример 5.2. Расширенная форма записи

Пример 5.3. Компактная форма записи

Эта форма записи более наглядная и удобная в использовании.

Имеет приоритет значение, указанное в коде ниже

Пример 5.4. Разные значения у одного свойства

Значения

— CSS: каскадные таблицы стилей

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

Свойство , которое является идентификатором, то есть удобочитаемым именем , которое определяет, какая функция рассматривается.
Значение , которое описывает, как функция должна обрабатываться механизмом.Каждое свойство имеет набор допустимых значений, определенных формальной грамматикой, а также семантическое значение, реализуемое механизмом браузера.

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

И свойства, и значения по умолчанию в CSS не чувствительны к регистру.Пара разделяется двоеточием, «: » ( U + 003A COLON ), а пробелы до, между и после свойств и значений, но не обязательно внутри, игнорируются.

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

Объявления сгруппированы в блоков , то есть в структуре, разделенной открывающей скобкой « {» ( U + 007B ЛЕВЫЙ КРОНШТЕЙН ) и закрывающей «} » ( U + 007D ПРАВЫЙ КРОНШТЕЙН ). Иногда блоки могут быть вложенными, поэтому открывающая и закрывающая фигурные скобки должны совпадать.

Такие блоки, естественно, называются блоками объявлений , а объявления внутри них разделяются точкой с запятой, ‘; ‘( U + 003B SEMICOLON ).Блок объявления может быть пустым, так как он содержит пустое объявление. Пробелы вокруг объявлений игнорируются. Последнее объявление блока не обязательно должно заканчиваться точкой с запятой, хотя часто считается хорошим стилем для этого, так как это предотвращает забыть добавить его при расширении блока другим объявлением.

Блок объявления CSS показан на диаграмме ниже.

Примечание: Содержимое блока объявления CSS, который представляет собой список объявлений, разделенных точкой с запятой, без начальной и закрывающей фигурных скобок, может быть помещено в атрибут стиля HTML .

Если бы таблицы стилей могли применять объявление только к каждому элементу веб-страницы, они были бы бесполезны. Настоящая цель - применить разные объявления к разным частям документа.

CSS позволяет это, связывая условия с блоками объявлений. Каждому (действительному) блоку объявления предшествует один или несколько разделенных запятыми селекторов , которые являются условиями выбора некоторых элементов страницы. Группа селектора и связанный с ней блок объявлений вместе называются набором правил или часто правилом .

Набор правил CSS (или правило) показан на диаграмме ниже.

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

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

Это приводит к важному следствию: если один единственный базовый селектор недействителен, например, при использовании неизвестного псевдоэлемента или псевдокласса, весь селектор недействителен и, следовательно, все правило игнорируется (как недействительное).

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

Оператор - это строительный блок, который начинается с любых непробельных символов и заканчивается первой закрывающей фигурной скобкой или точкой с запятой (вне строки, без экранирования и не включается в другую пару {}, () или [] ).

Есть два вида отчетов:

Наборы правил (или правил ), которые, как видно, связывают набор объявлений CSS с условием, описываемым селектором.
Ат-правила , которые начинаются со знака « @ » ( U + 0040 КОММЕРЧЕСКИЙ AT ), за которым следует идентификатор и затем продолжается до конца инструкции, то есть до следующего полумесяца. -colon (;) вне блока или конец следующего блока. Каждый тип at-правил, определяемый идентификатором, может иметь свой собственный внутренний синтаксис и, конечно же, семантику. Они используются для передачи метаданных (например, @charset или @import ), условной информации (например, @media или @document ) или описательной информации (например, @ font-face ).

Любой оператор, не являющийся набором правил или правилом at, недействителен и игнорируется.

`Вложенные операторы`

Есть еще одна группа операторов - вложенных операторов . Это операторы, которые можно использовать в определенном подмножестве at-правил - условных правилах группы . Эти утверждения применяются только в том случае, если соблюдается определенное условие: содержимое правила @media применяется только в том случае, если устройство, на котором работает браузер, соответствует выраженному условию; содержимое правила @document применяется только в том случае, если текущая страница соответствует некоторым условиям и т. д.В CSS1 и CSS2.1 только набора правил могли использоваться внутри правил условной группы. Это было очень строгим ограничением, и это ограничение было снято в CSS Conditionals Level 3 . Теперь, хотя условные групповые правила все еще являются экспериментальными и поддерживаются не всеми браузерами, они могут содержать более широкий диапазон контента: наборы правил, а также некоторые, но не все, правила at.

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

`Как устроен CSS - Изучите веб-разработку`

Теперь, когда вы начинаете понимать назначение и использование CSS, давайте рассмотрим структуру CSS.

Во-первых, давайте рассмотрим три метода применения CSS к документу: с внешней таблицей стилей, с внутренней таблицей стилей и со встроенными стилями.

`Внешняя таблица стилей`

Внешняя таблица стилей содержит CSS в отдельном файле с .css расширение. Это наиболее распространенный и полезный метод добавления CSS в документ. Вы можете связать один файл CSS с несколькими веб-страницами, стилизовав их все с помощью одной и той же таблицы стилей CSS. В разделе «Начало работы с CSS» мы связали внешнюю таблицу стилей с нашей веб-страницей.

Вы ссылаетесь на внешнюю таблицу стилей CSS из элемента HTML :

  

  
    
     Мой эксперимент с CSS 
    
  
  
      Привет, мир!  
     Это мой первый пример CSS

Файл таблицы стилей CSS может выглядеть так:

  h2 {
  цвет синий;
  цвет фона: желтый;
  граница: сплошной черный 1px;
}

п {
  красный цвет;
}

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

`Внутренняя таблица стилей`

Внутренняя таблица стилей находится в документе HTML. Чтобы создать внутреннюю таблицу стилей, вы помещаете CSS в элемент

`Привет, мир!`

Это мой первый пример CSS

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

Встроенные стили - это объявления CSS, которые влияют на один элемент HTML, содержащийся в атрибуте стиля . Реализация встроенного стиля в HTML-документе может выглядеть так:

  

  
    
     Мой эксперимент с CSS 
  
  
      Привет, мир!  
     Это мой первый пример CSS

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

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

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

index.html:

  

  
    
     Мои эксперименты с CSS 
    
  
  

     Создайте здесь свой тестовый HTML

styles.css:

Когда вы найдете CSS, с которым хотите поэкспериментировать, замените содержимое HTML на некоторый HTML для стиля, а затем добавьте свой тестовый код CSS в свой файл CSS.

В качестве альтернативы вы также можете использовать интерактивный редактор, расположенный ниже.

Читайте и получайте удовольствие!

Селектор нацелен на HTML для применения стилей к содержимому.Мы уже обнаружили множество селекторов в руководстве «Начало работы с CSS». Если CSS не применяется к содержимому, как ожидалось, ваш селектор может не соответствовать так, как вы думаете, он должен соответствовать.

Каждое правило CSS начинается с селектора - или списка селекторов - чтобы сообщить браузеру, к какому элементу или элементам следует применять правила. Все приведенные ниже примеры являются допустимыми селекторами или списками селекторов.

  h2
ссылка
.много вещей
#одна вещь
*
.box p
.box p: первый ребенок
h2, h3,.введение

Попробуйте создать несколько правил CSS, в которых используются указанные выше селекторы. Добавьте HTML, который будет стилизован селекторами. Если какой-либо из приведенных выше синтаксисов вам не знаком, попробуйте поискать в MDN.

Примечание : Вы узнаете больше о селекторах в следующем модуле: Селекторы CSS.

`Специфичность`

Вы можете столкнуться со сценариями, когда два селектора выбирают один и тот же элемент HTML. Рассмотрим таблицу стилей ниже с селектором p , который устанавливает синий цвет для текста абзаца.Однако существует также класс, который устанавливает красный цвет для текста выбранных элементов.

  .special {
  красный цвет;
}

п {
  цвет синий;
}

Предположим, что в нашем HTML-документе у нас есть абзац с классом special . Применяются оба правила. Какой селектор преобладает? Вы ожидаете увидеть синий или красный текст абзаца?

   Какого я цвета?

В языке CSS есть правила, определяющие, какой селектор будет сильнее в случае конфликта.Эти правила называются , каскад и , специфичность . В блоке кода ниже мы определяем два правила для селектора p , но текст абзаца будет синим. Это связано с тем, что объявление, которое устанавливает синий цвет текста абзаца, появляется позже в таблице стилей. Более поздние стили заменяют конфликтующие стили, которые появляются ранее в таблице стилей. Это правило каскада .

  п {
  красный цвет;
}

п {
  цвет синий;
}

Однако в случае нашего предыдущего примера с конфликтом между селектором класса и селектором элемента класс преобладает, и текст абзаца становится красным.Как это может произойти, даже если конфликтующий стиль появляется позже в таблице стилей? Класс оценивается как более конкретный, так как имеет более специфичности , чем селектор элемента, поэтому он отменяет другое объявление конфликтующего стиля.

Попробуйте сами! Добавьте HTML, затем добавьте два правила p {...} в свою таблицу стилей. Затем измените первый селектор p на . Special , чтобы увидеть, как он меняет стиль.

Поначалу правила специфичности и каскада могут показаться сложными.Эти правила легче понять, если вы ближе познакомитесь с CSS. В разделе «Каскад и наследование» в следующем модуле это подробно объясняется, в том числе о том, как вычислить специфичность.

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

На самом базовом уровне CSS состоит из двух компонентов:

Свойства : это удобочитаемые идентификаторы, указывающие, какие стилистические особенности вы хотите изменить.Например, font-size , width , background-color .
Значения : Каждому свойству присваивается значение. Это значение указывает, как стилизовать свойство.

В приведенном ниже примере выделяется одно свойство и значение. Имя свойства - , цвет, , значение - , синий, .

Когда свойство сопоставляется со значением, эта пара называется CSS-декларацией . Объявления CSS находятся в блоках объявлений CSS .В приведенном ниже примере выделение идентифицирует блок объявления CSS.

Наконец, блоки объявления CSS объединяются с селекторами для создания наборов правил CSS (или правил CSS ). Пример ниже содержит два правила: одно для селектора h2 и одно для селектора p . Цветное выделение указывает на правило h2 .

Установка для свойств CSS определенных значений - это основной способ определения макета и стиля документа.Механизм CSS вычисляет, какие объявления применяются к каждому элементу страницы.

Важно: Свойства и значения CSS чувствительны к регистру. Свойство и значение в каждой паре разделяются двоеточием. (: )

Найдите различные значения свойств, перечисленных ниже. Напишите правила CSS, применяющие стили к различным элементам HTML:

Важно : Если свойство неизвестно или если значение недействительно для данного свойства, объявление обрабатывается как недопустимое .Он полностью игнорируется движком CSS браузера.

Важно : В CSS (и других веб-стандартах) согласовано, что орфография в США является стандартом там, где есть языковые вариации или неточности. Например, цвет следует записать как цвет , так как цвет не будет работать.

`Функции`

Хотя большинство значений являются относительно простыми ключевыми словами или числовыми значениями, есть некоторые значения, которые принимают форму функции.Примером может служить функция calc () , которая может выполнять простые вычисления в CSS:

    Внутреннее поле 90% - 30 пикселей.

  .outer {
  граница: сплошной черный цвет 5 пикселей;
}

.коробка {
  отступ: 10 пикселей;
  ширина: calc (90% - 30 пикселей);
  цвет фона: rebeccapurple;
  цвет белый;
}

Это отображается как:

Функция состоит из имени функции и круглых скобок, в которых заключены значения функции.В случае приведенного выше примера calc () значения определяют ширину этого поля, равную 90% ширины содержащего блока, минус 30 пикселей. Результат вычисления нельзя вычислить заранее и ввести как статическое значение.

Другим примером могут быть различные значения для transform , такие как rotate () .

  .box {
  маржа: 30 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  цвет фона: rebeccapurple;
  преобразовать: повернуть (0.8 оборот);
}

Вывод приведенного выше кода выглядит следующим образом:

CSS @rules (произносится как «at-rules») содержат инструкции о том, что CSS должен выполнять или как он должен себя вести. Некоторые @rule просты с ключевым словом и значением. Например, @import импортирует таблицу стилей в другую таблицу стилей CSS:

Одно из распространенных @rule, с которым вы, вероятно, столкнетесь, - это @media , которое используется для создания медиа-запросов.Медиа-запросы используют условную логику для применения стилей CSS.

В приведенном ниже примере таблица стилей определяет розовый фон по умолчанию для элемента . Однако следует медиа-запрос, который определяет синий фон, если область просмотра браузера шире 30 em.

  кузов {
  цвет фона: розовый;
}

@media (min-width: 30em) {
  тело {
    цвет фона: синий;
  }
}

В этих уроках вы встретите и другие правила @.

Посмотрите, можете ли вы добавить медиа-запрос, который изменяет стили в зависимости от ширины области просмотра. Измените ширину окна браузера, чтобы увидеть результат.

Некоторые свойства, такие как font , background , padding , border и margin , называются сокращенными свойствами. Это потому, что сокращенные свойства устанавливают несколько значений в одной строке.

Например, эта строка кода:

 
отступ: 10px 15px 15px 5px;

эквивалентно этим четырем строкам кода:

  padding-top: 10px;
отступ справа: 15 пикселей;
padding-bottom: 15 пикселей;
отступ слева: 5 пикселей;

Эта одна строка:

  фон: красный url (bg-graphic.png) 10px 10px repeat-x исправлено;

эквивалентно этим пяти строкам:

  цвет фона: красный;
фоновое изображение: URL (bg-graphic.png);
background-position: 10px 10px;
фон-повтор: повтор-х;
background-attachment: исправлено;

Позже вы встретите множество других примеров сокращенных свойств. Справочник MDN по CSS - хороший ресурс для получения дополнительной информации о любых сокращенных свойствах.

Попробуйте использовать объявления (выше) в собственном упражнении CSS, чтобы лучше понять, как это работает.Вы также можете поэкспериментировать с разными значениями.

Предупреждение : Менее очевидный аспект использования сокращений CSS - это сброс пропущенных значений. Значение, не указанное в сокращении CSS, возвращается к своему исходному значению. Это означает, что пропуск в сокращении CSS может переопределить ранее установленные значения .

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

Комментарии CSS начинаются с / * и заканчиваются * / . В приведенном ниже примере комментарии отмечают начало отдельных разделов кода. Это помогает ориентироваться в кодовой базе по мере ее увеличения. При наличии такого рода комментариев поиск комментариев в редакторе кода становится способом эффективного поиска раздела кода.

 

тело {
  шрифт: 1em / 150% Helvetica, Arial, без засечек;
  отступ: 1em;
  маржа: 0 авто;
  максимальная ширина: 33em;
}

@media (min-width: 70em) {
  
  тело {
    размер шрифта: 130%;
  }
}

h2 {размер шрифта: 1.5em;}



div p, #id: first-line {
  цвет фона: красный;
  радиус границы: 3 пикселя;
}

div p {
  маржа: 0;
  отступ: 1em;
}

div p + p {
  padding-top: 0;
}

Код «Комментирование» также полезен для временного отключения участков кода для тестирования. В приведенном ниже примере правила для .special отключены путем «комментирования» кода.

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

Пробел означает фактические пробелы, табуляции и новые строки. Так же, как браузеры игнорируют пробелы в HTML, браузеры игнорируют пробелы внутри CSS.Ценность пробелов в том, как они могут улучшить читаемость.

В приведенном ниже примере каждое объявление (и начало / конец правила) имеет свою собственную строку. Возможно, это хороший способ написать CSS. Это упрощает обслуживание и понимание CSS.

  кузов {
  шрифт: 1em / 150% Helvetica, Arial, без засечек;
  отступ: 1em;
  маржа: 0 авто;
  максимальная ширина: 33em;
}

@media (min-width: 70em) {
  тело {
    размер шрифта: 130%;
  }
}

h2 {
  размер шрифта: 1.5em;
}

div p,
#id: first-line {
  цвет фона: красный;
  радиус границы: 3 пикселя;
}

div p {
  маржа: 0;
  отступ: 1em;
}

div p + p {
  padding-top: 0;
}

В следующем примере показан эквивалентный CSS в более сжатом формате.Хотя два примера работают одинаково, нижеследующий труднее читать.

  body {font: 1em / 150% Helvetica, Arial, sans-serif; отступ: 1em; маржа: 0 авто; max-width: 33em;}
@media (min-width: 70em) {body {font-size: 130%;}}

h2 {размер шрифта: 1.5em;}

div p, #id: первая строка {цвет фона: красный; радиус границы: 3px;}
div p {маржа: 0; заполнение: 1em;}
div p + p {padding-top: 0;}

Для ваших собственных проектов вы отформатируете свой код в соответствии с личными предпочтениями.Что касается командных проектов, вы можете обнаружить, что у команды или проекта есть свое собственное руководство по стилю.

Важно: Хотя пробелы разделяют значения в объявлениях CSS, в именах свойств никогда не бывает пробелов .

Например, эти объявления являются действительными CSS:

  маржа: 0 авто;
отступ слева: 10 пикселей;

Но эти декларации недействительны:

  маржа: 0авто;
отступ слева: 10 пикселей;

Вы видите ошибки с интервалом? Во-первых, 0auto не распознается как допустимое значение для свойства маржи .Запись 0auto предназначена для двух отдельных значений: 0 и auto . Во-вторых, браузер не распознает padding- как допустимое свойство. Правильное имя свойства ( padding-left ) отделено ошибочным пробелом.

Вы всегда должны отделять отдельные значения друг от друга хотя бы одним пробелом. Храните имена свойств и значения свойств вместе как отдельные непрерывные строки.

Чтобы узнать, как интервал может нарушить CSS, попробуйте поиграть с интервалом внутри вашего тестового CSS.

Полезно понять, как браузер использует HTML и CSS для отображения веб-страницы. Следующая статья, Как работает CSS, объясняет этот процесс.

Синтаксис

CSS - Как кодировать CSS

На этой странице описан основной синтаксис, который можно использовать для применения CSS к любому веб-сайту.

Синтаксис CSS состоит из набора правил. Эти правила состоят из трех частей: селектора, свойства и значения.

Вам не нужно запоминать это, чтобы кодировать CSS.Как только вы начнете кодировать CSS, вы будете делать это, не думая «это селектор» или «это свойство». Это должно обрести смысл, когда вы изучите примеры на этой странице.

Синтаксис:

селектор {свойство: значение}

Селектор представляет элемент HTML, который вы хотите стилизовать. Например:

h2 {цвет: синий}

Этот код указывает браузеру отображать все вхождения элемента HTML

синим цветом.

Селекторы группировки

При желании вы можете применить стиль ко многим селекторам. Просто разделите селекторы запятой.

h2, h3, h4, h5, h5, h6 {цвет: синий}

Применение нескольких свойств

Чтобы применить более одного свойства, разделите каждое объявление точкой с запятой.

h2 {цвет: синий; font-family: arial, helvetica, "без засечек"}

Читаемость

Вы можете сделать свой CSS-код более читабельным, разместив объявления стилей по нескольким строкам. Вы также можете сделать отступ в своем коде, если хотите. Это не влияет на то, как отображается ваш код - это просто упрощает чтение.

h2 { цвет синий; семейство шрифтов: arial, helvetica, "без засечек"; размер шрифта: 150%; }

Хорошо, теперь вы узнали о синтаксисе CSS. Но как включить этот синтаксис в свой веб-сайт? Следующий урок покажет вам, как включить CSS в ваши HTML-документы.

Общие сведения о селекторе и объявлениях CSS

Из этого туториала Вы узнаете, как определять правила CSS в своей таблице стилей.

Понимание синтаксиса CSS

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

Правило CSS состоит из двух основных частей, селектора и одного или нескольких объявлений:

Селектор определяет, к какому элементу или элементам на странице HTML применяется правило CSS.

Принимая во внимание, что объявления внутри блока определяют, как элементы форматируются на веб-странице. Каждое объявление состоит из свойства и значения, разделенных двоеточием (: ) и оканчивающихся точкой с запятой (; ), а группы объявлений заключены в фигурные скобки {} .

Свойство - это атрибут стиля, который нужно изменить; они могут быть шрифтом, цветом, фоном и т. д. Каждое свойство имеет значение, например свойство цвета может иметь значение синий или # 0000FF и т. д.

h2 {цвет: синий; выравнивание текста: центр;}

Чтобы сделать CSS более читабельным, вы можете поместить одно объявление в каждую строку, например:

  h2 {
    цвет синий;
    выравнивание текста: центр;
}

В приведенном выше примере h2 - это селектор, color и text-align - это свойства CSS, а заданные blue и center являются соответствующими значениями этих свойств.

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

Написание комментариев в CSS

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

Комментарий CSS начинается с / * и заканчивается * / , как показано в примере ниже:

  / * Это комментарий CSS * /
h2 {
    цвет синий;
    выравнивание текста: центр;
}
/ * Это многострочный комментарий CSS
который занимает более одной строки * /
п {
    размер шрифта: 18 пикселей;
    текст-преобразование: прописные буквы;
}

Вы также можете закомментировать часть своего кода CSS для целей отладки, как показано здесь:

  h2 {
    цвет синий;
    выравнивание текста: центр;
}
/ *
п {
    размер шрифта: 18 пикселей;
    текст-преобразование: прописные буквы;
}
* /

Чувствительность к регистру в CSS

Имена свойств CSS и многие значения не чувствительны к регистру.Принимая во внимание, что селекторы CSS обычно чувствительны к регистру, например, селектор класса .maincontent не совпадает с .mainContent .

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

Вы узнаете о различных типах селекторов CSS в следующей главе.

CSS | Синтаксис и селекторы

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

Синтаксис:

 селектор {
    // Свойство CSS
}

Пример:

html

>

Вывод:

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

селектор элементов: Селектор элементов в CSS используется для выбора элементов HTML, которые необходимо стилизовать. В объявлении селектора указано имя элемента HTML, а свойства CSS, которые должны быть применены к этому элементу, написаны внутри скобок {}.

Синтаксис:

 имя_элемента {
    // Свойство CSS
}

Пример:

html

< html >

4 9005 9005 9005

900

< стиль >

h2 {

цвет: зеленый;

выравнивание текста: по центру;

}

стиль >

головка >

< корпус 000

35 < h2 > GeeksforGeeks h2 >

корпус >

html

>

Вывод:

Селектор идентификатора: Селектор #id используется для установки стиля данного идентификатора.Атрибут id - это уникальный идентификатор в документе HTML. Селектор id используется с символом #.

Синтаксис:

 #id_name {
    // Свойство CSS
}

Пример:

html

< html >

4 9005 9005

0

900

< стиль >

h2 {

цвет: зеленый;

выравнивание текста: по центру;

}

стиль >

головка >

< корпус 000

35 < h2 > GeeksforGeeks h2 >

корпус >

html

< html >

4 9005 9005 9005

900

< стиль >

#heading {

цвет: зеленый;

выравнивание текста: по центру;

font-size: 40px;

font-weight: жирный;

}

стиль >

головка >

< корпус 000

35 < div id = "заголовок" >

GeeksforGeeks

div >

body >

html >

Выход:

селектор класса: The.Селектор класса используется для выбора всех элементов, принадлежащих определенному атрибуту класса. Чтобы выбрать элементы с определенным классом, используйте символ (.) С указанием имени класса. Имя класса в основном используется для установки свойства CSS для данного класса.

Синтаксис:

 .class_name {
    // Свойство CSS
}

Пример:

html

< html >

900

< стиль >

.заголовок {

цвет: зеленый;

выравнивание текста: по центру;

font-size: 40px;

font-weight: жирный;

}

стиль >

головка >

< корпус 000

35 < div class = "заголовок" >

GeeksforGeeks

div >

body >

html >

Выход:

Поддерживаемый браузер:

Opera
Safari

90 002

Базовый синтаксис CSS | Учебник по CSS от Wideskills

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

Синтаксис HTML и CSS почти одинаков, поэтому вы можете легко подключиться к языку.

Например, чтобы изменить цвет фона веб-страницы, мы используем следующую строку кода в HTML:

То же самое, если вы хотите сделать с помощью CSS, используйте следующее строка кода

 кузов
{
 цвет фона: # FF0000;
}

Итак, синтаксис почти аналогичен HTML.

Синтаксис CSS

Синтаксис двух блоков CSS

1. Селектор

Селектор - это любой тег, к которому вы хотите применить стили. Примеры селекторов: body, p, table и т. Д.

2. Блок объявления.

Блок объявления состоит из одной или нескольких пар свойство-значение.

Свойство - это свойство элемента html, к которому вы хотите применить стили, например границу, цвет, цвет фона и т. Д.

Значение - это значение, которое вы хотите установить, например # 0000FF, центр, красный цвет и т. Д.

Общий синтаксис: -

 Селектор
{
  Блок объявлений;
}

В приведенном выше примере селектором является тело, свойство - цвет фона, а значение - # 0000FF.

Если блок объявления имеет более одной пары свойство-значение, каждая пара разделяется точкой с запятой, как в примере, показанном ниже

 с
{
  красный цвет ;
  цвет фона: # FF0000;
}

Типы селекторов

В CSS есть разные типы селекторов.Давайте кратко рассмотрим их.

1. Универсальные селекторы

Используя универсальные селекторы, мы можем применять правила стиля к каждому элементу, а не к отдельному элементу. Для этой цели используется символ звездочки «*».

Пример: -

 * {
  красный цвет ;
}

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

2. Селекторы потомков

В некоторых случаях мы можем захотеть применить определенный стиль к определенному элементу, который находится внутри другого элемента, в таких случаях мы используем селекторы потомков.

 ol strong {
красный цвет ;
}

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

3. Селекторы классов

Элементы, сгруппированные в классы, можно легко отформатировать с помощью селекторов классов.

Пример: -

 .class1 {
красный цвет ;
}

Элементы class1 отображаются красным цветом, если вы используете приведенную выше строку кода.

Если вы хотите быть более конкретным, вы можете использовать element_name.формат class_name, как в приведенном ниже примере

 p.class1 {
   красный цвет ;
}

Абзац class1 будет отображен красным цветом с использованием вышеуказанного кода.

4. Селекторы ID

Мы можем применить к тем элементам, которые имеют общий идентификатор, используя селекторы ID. Все элементы, имеющие этот идентификатор, будут отформатированы при применении стилей с использованием селекторов идентификаторов.

Пример: -

 # id1 {
цвет: зеленый;
}

Элементы class1 отображаются зеленым цветом, если вы используете приведенную выше строку кода.

Если вы хотите быть более конкретным, вы можете использовать формат element_name.class_name, как в приведенном ниже примере

 p.id1 {
цвет: зеленый;
}

Абзац class1 будет отображаться зеленым цветом с использованием вышеуказанного кода.

5. Дочерние селекторы

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

 body> ol {
цвет: зеленый;
}

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

6. Селекторы группировки: -

Вы можете сгруппировать один или несколько селекторов и применить к ним единый блок правил стиля, разделив каждый селектор запятой.

Пример: -

 таблица, h2, ol
{
  цвет: зеленый;
}
п
{
  выравнивание текста: слева;
}

Те же правила стиля применяются к table, h2 и ol этой конкретной веб-страницы.А еще один блок используется для применения стилей к абзацу.

Комментарии в CSS

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

Комментарий CSS начинается с «/ *» и заканчивается «* /». Мы также можем комментировать в несколько строк.

Пример

 таблица, h2, ol
{
цвет: зеленый;
/ * Эта строка меняет цвет таблицы, заголовка h2 и упорядоченного списка на зеленый * /
}
/ * Этот комментарий
простирается через
несколько строк
* /

узнать об избирателях и блоках декларации

Первая тема, которую вам нужно освоить перед написанием кода с использованием CSS, - это синтаксис.Слово синтаксис может показаться устрашающим, но оно просто относится к правилам, которые мы используем в CSS для написания кода. Эти правила стандартные, что позволяет легко читать чужой код.

Найди свой матч на тренировочном лагере

Две наиболее важные части синтаксиса CSS - это селекторы и блоки объявлений.Селекторы используются для указания элемента (ов), к которому вы хотите применить стиль на веб-странице, а блоки объявлений определяют стили, которые вы хотите применить к выбранным элементам.

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

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

Карьера Карма вошла в мою жизнь, когда я больше всего в ней нуждалась, и быстро помогла мне пройти тренировочный лагерь. Через два месяца после выпуска я нашла работу своей мечты, которая соответствовала моим ценностям и целям в жизни!

Найдите свой матч на учебном лагере
Найди свой матч на тренировочном лагере

на веб-странице. Теперь давайте разделим этот стиль на две составляющие, чтобы мы могли проанализировать, как он работает.
Декларации CSS
Первая часть стиля CSS - это объявления. Объявление - это еще одно слово для обозначения определенного стиля, который вы хотите применить к элементу на веб-странице.
Правило стиля CSS должно включать по крайней мере одно объявление и может включать любое количество объявлений. Итак, если вы хотите установить ширину и высоту поля на веб-странице равными 100 пикселей и установить для него синий цвет фона, вы можете сделать это в одном объявлении.
Декларации состоят из двух частей, а именно:
Недвижимость. Это свойства стиля, которые следует применить к элементу (например, цвет, цвет фона, ширина, высота).
Стоимость. Эта часть сообщает браузеру, как должно отображаться свойство (т. Е. Цвет поля может быть установлен на «зеленый» или «красный»).
Вот синтаксис объявления CSS:
Обратите внимание, что наше свойство CSS отображается первым, а затем разделяется двоеточием (:). После двоеточия следует значение, которое мы хотим присвоить определенному нами свойству.
Каждое объявление CSS должно заканчиваться точкой с запятой (;).
Вот пример двух объявлений CSS:
цвет: синий; размер шрифта: 16 пикселей;
Первое объявление устанавливает цвет шрифта элемента HTML на «синий».Второе объявление устанавливает размер шрифта отдельного элемента равным «16 пикселей». Оба этих селектора начинаются с имени свойства, за ним следует запятая и значение, которое мы хотим присвоить свойству.
Объявления хранятся в фигурных скобках.
Селекторы CSS
В последнем разделе мы обсудили, как объявления используются для применения стилей к веб-элементу. Но объявления - это только часть синтаксиса CSS. Другая часть - это селекторы, которые сообщают браузеру, к какому элементу должен применяться определенный набор объявлений.
Вот синтаксис селектора CSS:
selector { // Список объявлений }
Селектор указывает браузеру, к каким элементам следует применить набор стилей. Так, например, если мы хотим установить ширину всех элементов
на «500 пикселей», мы могли бы сделать это, используя следующее правило:
div в данном случае является нашим селектором и стоит в начале нашего правила CSS. Затем мы определяем наши объявления в фигурных скобках, используя синтаксис, который мы обсуждали ранее.Это правило устанавливает ширину всех элементов
на веб-странице равной «500 пикселей».
Если вы хотите узнать больше о селекторах CSS, прочтите наше руководство по селекторам CSS для начинающих.
Вместе объявления и селекторы составляют правило стиля CSS.
Комментарии CSS
До сих пор мы обсуждали, как писать правила стилей в CSS. Однако не весь текст, написанный в таблице стилей, соответствует правилам стиля.
Таблицы стилей
CSS также могут хранить комментарии.Комментарии - это блоки текста, написанные разработчиком с целью облегчения понимания кода в таблице стилей. Комментарии игнорируются браузером, поэтому вы можете добавить столько комментариев к таблице стилей, сколько захотите.
Написание комментариев полезно по ряду причин.
Во-первых, написание комментариев позволяет вам отслеживать ваш код по мере его написания и дает вам запись ваших мыслей, к которым вы можете обратиться, если вам понадобится помощь в понимании блока кода в будущем.Во-вторых, написание комментариев позволит разработчикам, которые не написали блок кода, понять его цель и ваши намерения, стоящие за написанием кода.
Комментарии CSS начинаются с синтаксиса / * и заканчиваются синтаксисом * /.
Однострочные и многострочные комментарии
Есть два типа комментариев, которые могут отображаться в CSS: однострочные и многострочные.
Однострочные комментарии - это комментарии, которые занимают только одну строку в таблице стилей.Вот пример однострочного комментария в CSS, который появляется над правилом стиля:
/ * Этот стиль устанавливает размер шрифта всех тегов
на 16 пикселей * / п { размер шрифта: 16 пикселей; }
В этом коде наш комментарий появляется между маркерами / * и * /. Ниже нашего комментария находится правило стиля, в котором используется синтаксис, который мы обсуждали ранее.
Многострочные комментарии - это комментарии, которые занимают более одной строки в таблице стилей. Вот пример многострочного комментария CSS:
/ * Этот стиль устанавливает размер шрифта всех тегов
на 16 пикселей а также устанавливает серый цвет текста * / п { размер шрифта: 16 пикселей; цвет: серый; }
Этот комментарий занимает две строки и описывает стиль CSS.
Заключение
Как и любой язык программирования, CSS имеет некоторый базовый синтаксис, определяющий, как вы можете писать код, используя этот язык.
В CSS есть два компонента, составляющих правило стиля: объявления и селекторы. Объявления - это стили, которые вы хотите применить к элементу, а селекторы используются для выбора элементов, к которым будут применяться ваши объявления.
Кроме того, CSS имеет функцию комментирования, которая позволяет вам делать заметки в коде для дальнейшего использования.Комментарии игнорируются браузером.
В этом руководстве обсуждались основы синтаксиса CSS и способы комментирования таблицы стилей CSS. Теперь вы готовы начать писать правила стиля CSS и комментарии, как профессиональный веб-разработчик!
.
Категории: Разное

Css синтаксис: Базовый синтаксис CSS | htmlbook.ru

Базовый синтаксис CSS | htmlbook.ru

Правила применения стилей

Форма записи

Имеет приоритет значение, указанное в коде ниже

Значения

Комментарии

Вопросы для проверки

Ответы

Базовый синтаксис CSS | Учебные курсы

Правила применения стилей

Форма записи

Имеет приоритет значение, указанное в коде ниже

Значения

Комментарии

Синтаксис CSS: правила и оформление кода

Правила CSS

Оформление кода

Синтаксис — CSS | MDN

CSS-селекторы — CSS | MDN

Структура CSS. Синтаксис и подключение CSS

Базовый синтаксис CSS

Правила применения стилей

Форма записи

Имеет приоритет значение, указанное в коде ниже

Значения

Комментарии

— CSS: каскадные таблицы стилей

Вложенные операторы

Как устроен CSS - Изучите веб-разработку

Внешняя таблица стилей

Привет, мир!

Внутренняя таблица стилей

Привет, мир!

Встроенные стили

Привет, мир!

Специфичность

Функции

CSS - Как кодировать CSS

Селекторы группировки

Применение нескольких свойств

Читаемость

Общие сведения о селекторе и объявлениях CSS

Понимание синтаксиса CSS

Написание комментариев в CSS

Чувствительность к регистру в CSS

CSS | Синтаксис и селекторы

html

html

0

html

html

Базовый синтаксис CSS | Учебник по CSS от Wideskills

узнать об избирателях и блоках декларации

Правила стиля CSS

`Вложенные операторы`

`Как устроен CSS - Изучите веб-разработку`

`Внешняя таблица стилей`

`Внутренняя таблица стилей`

`Привет, мир!`

`Специфичность`

`Функции`