Окт 29

Базовые понятия CSS

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

Селектор { свойство1: значение; свойство2: значение; ... }
Базовый синтаксис.
Селектором называется имя стиля, в котором указаны параметры форматирования. Селекторы делятся на несколько типов: селекторы тегов, идентификаторы и классы, они подробно описаны далее. После указания селектора идут фигурные скобки, в которых записывается необходимое стилевое свойство, а его значение указывается после двоеточия. Параметры разделяются между собой точкой с запятой, в конце этот символ можно опустить.
Замечание
Имена селекторов обязательно должны начинаться с латинского символа (a-z, A-Z) и могут содержать в себе цифры,например — terminator4, Titanic2, extra.

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

Тег { свойство1: значение; свойство2: значение; ... }

Вначале указывается имя тега, оформление которого будет переопределено, заглавными или строчными символами не имеет значения. Внутри фигурных скобок пишется свойство CSS, а после двоеточия — его значение. Набор параметров разделяется между собой точкой с запятой и может располагаться как в одну строку, так и в несколько
Пример:
h1 {color:green} — так выглядит синтаксис, где мы прописали, что текст заголовков первого уровня должен быть зеленого цвета.
Замечание: Следует понимать, что стиль можно добавить только для тегов, которые непосредственно отображаются в контейнере <BODY>.

Классы.
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий.
Тег.Имя класса { свойство1: значение; свойство2: значение; ... }

Внутри стилевой таблицы вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Чтобы указать в коде HTML, что тег используется с определенным стилем, к тегу добавляется параметр class="Имя класса"

Пример:
h1.red {color:red;} — в документе <h1 class=”red”>Заголовок</h1>

Имена классов выбираются по желанию, главное, чтобы они были понятны и соответствовали их использованию, при этом имя должно всегда начинаться с символа. Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий.
.Имя класса { свойство1: значение; свойство2: значение; ... }

При такой записи, класс можно применять к любому тегу
Пример:
.blue {color:blue;} — в документе <p class=”blue”>Параграф</p>

Контекстные селекторы.
При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте. Например, задать стиль для тега <strong> только когда он располагается внутри контейнера <P>. Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого.

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

Тег1 Тег2 { ... }

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

<Тег1>
<Тег2> ... </Тег2>
</Тег1>

Использование контекстных селекторов продемонстрировано в примере

Пример:
p strong {color:orange;} — в документе <p><strong>…...</p></strong>

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

Пример:
a:link {color:#000000; text-decoration:underline;} — Псевдокласс link применяется к ссылкам, которые еще не посещались пользователем, и задает для них стилевое оформление.

a:active {color:orange; text-decoration:none;} — Псевдокласс active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

a:hover {color:green; text-decoration:overline;} — Псевдокласс hover определяет стиль элемента при наведении на него курсора мыши, при этом элемент не активирован, иными словами кнопка мыши не нажата.

a:active {color:orange; text-decoration:none;} — Псевдокласс visited применяется к ссылкам, уже посещенные пользователем, и задает для них стилевое оформление.

Возможно, Вам будет полезна эта информация:

  1. Подключение CSS
  2. Работа над списками
  3. Позиционирование в CSS


Один комментарий к “Базовые понятия CSS”

  1. 1
    1. eko_16_ пишет:

    cool))))))))))жду следующих уроков.

Написать ответ