23:03 Правила построения CSS |
В первых трёх случаях подключения таблицы CSS к документу (см. выше) каждое правило CSS из таблицы стилей имеет две основные части — селектор и блок объявлений. Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком ": ". Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них. селектор, селектор { свойство: значение; свойство: значение; свойство: значение; } В четвёртом случае подключения таблицы CSS к документу (см. список) правило CSS (являющееся значением атрибута style тега, на который оно действует) представляет собой перечень объявлений («свойство CSS : значение»), разделённых знаком «;». Виды селекторов Универсальный селектор * { margin: 0; padding: 0; } Селектор элементов p { font-family: arial, helvetica, sans-serif; } Селектор классов .note { color: red; background-color: yellow; font-weight: bold; } Селектор идентификаторов #paragraph1 { margin: 0px; } Селектор атрибутов a[href="http://www.somesite.com"] { font-weight: bold; } Селектор потомков (контекстный селектор) div#paragraph1 p.note { color: red; } Селектор дочерних элементов p.note > b { color: green } Селектор сестринских элементов h1 + p { font-size: 24pt; } Селектор псевдоклассов a:active { color: blue; } Селектор псевдоэлементов p:first-letter { font-size: 32px; } Классы и идентификаторы элементов. Класс или идентификатор может быть присвоен какому-нибудь элементу (тегу) HTML посредством атрибутов class или id этого элемента (тега): <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Селекторы классов и идентификаторов <style> p.Big { font-family: arial, helvetica, sans-serif; color: maroon; } div#First { background-color: silver; } </style> </head> <body> ..... <div id="First"> ..... </div> <p class="Big"> ..... </p> </body> </html> Основное отличие между классами элементов и идентификаторами элементов в том, что в документе какой-нибудь класс может быть присвоен сразу нескольким элементам, а идентификатор — только одному. Также отличие в том, что могут существовать множественные классы (когда класс элемента состоит из нескольких слов, разделённых пробелами). Для идентификаторов такое невозможно. Важно отметить следующее отличие идентификатора от класса: идентификаторы широко используются в JavaScript для нахождения уникального элемента в документе. Имена классов и идентификаторов, в отличие от названий тегов и их атрибутов, чувствительны к регистру ввода букв. Свойства классов и идентификаторов задаются с помощью соответствующих селекторов. Причём может быть задано как свойство класса в целом (в таком случае селектор начинается с «.»), или свойство идентификатора самого по себе (в таком случае селектор начинается с «#»), так и свойство какого-нибудь элемента этого класса или с этим идентификатором. В CSS помимо классов, задаваемых автором страницы, существует также ограниченный набор так называемых псевдоклассов, описывающих вид гиперссылок с определённым состоянием в документе, вид элемента, на котором находится фокус ввода, а также вид элементов, являющихся первыми дочерними элементами других элементов. Также в CSS существует четыре так называемых псевдоэлемента: первая буква, первая строка, применение специальных стилей до и после элемента.
|
|
|
| Всего комментариев: 0 | |