|
Окт
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 применяется к ссылкам, уже посещенные пользователем, и задает для них стилевое оформление.
Возможно, Вам будет полезна эта информация:
cool))))))))))жду следующих уроков.