CSS2Глава 1. Основные положения и принципы языка CSS2.Сравните следующие два документа:
Заметьте, что в примере с помощью возможностей CSS оптимизирован только один HTML-элемент, а как упростился документ. Умелое использование возможностей CSS2 (обособленно или в сочетании с DHTML) позволяет реализовать оригинальные визуальные эффекты, описание которых произведено ниже. Браузер, как и в случае с HTML-элементами, игнорирует непонятные ему правила, потому никаких конфликтных ситуаций из-за использования каскадных таблиц стилей возникать не может.
Каскадные таблицы стилей могут располагаться либо в заголовке HTML-документа (в содержимом элемента
Таблицы стилей называются каскадными, потому что при подключении к одному HTML-документу нескольких стилевых таблиц, они, в соответствии со своим приоритетом, выстраиваются в каскад. По этому каскаду и прогоняется документ. При этом правила с более высоким приоритетом переопределяют идентичные правила с более низким приоритетом. Подробнее вопрос каскадирования и наследования будет рассмотрен в разделе "Каскады и наследование". Способы подключения каскадных таблиц стилей к HTML-документам.Для того, чтобы браузер применял правила какой-либо таблицы стилей к HTML-документу, необходимо связать таблицу стилей и документ друг с другом. Существует четыре метода, которыми это можно сделать:
Внедрение, как уже упоминалось выше, осуществляется, HTML-элементом заголовка <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Примep внедренной таблицы стиля</title> <style type="text/css"> ...список CSS-правил... ...список CSS-правил... ...список CSS-правил... </style> </head> <body> ...текст документа... ...текст документа... ...текст документа... </body> </html>
Присоединение внешних таблиц стилей к HTML-документу осуществляется элементом <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Примep подключения таблицы стиля </title> <link rel="stylesheet" type="text/css" href="file_of_style.css"> </head> <body> ...текст документа... ...текст документа... ...текст документа... </body> </html>
Здесь body { font-family: sans-serif; font-size: 14 pt} p { background-color: yellow }
В содержимое элемента style можно импортировать таблицу стилей, хранящуюся во внешнем
файле на сервере. Это осуществимо благодаря особому свойству <style type="text/css "> @import URL("www.servername/file_of_style.css") </style>
Значением свойства <style type="text/css"> @import URL("www.servername/file_of_style.css") body { font-family: sans-serif; font-size: 14 pt } p { background-color: yellow } </style> Индивидуальное задание стиля для элемента применятся редко и используется для переопределения уже установленных стилевых правил для данного элемента, так как оно обладает наибольшим приоритетом по сравнению с другими. Типы данных и синтаксис CSS2.Синтаксические правила, присутствующие в CSS2.В основе всех версий CSS (CSS1, CSS2 и в будущем CSS3) лежит общий для всех набор синтаксических правил. Именно благодаря этому обстоятельству обеспечивается преемственность различных версий CSS. В том случае, если браузер поддерживает ранние версии CSS и не поддерживает новые возможности, то последние будут просто им проигнорированы. Однако правила, которые браузер в состоянии применить, он применит.
Каскадная таблица стилей, написанная на языке CSS любой версии, представляет собой список правил,
которые в свою очередь подразделяются на обычные правила и @правила (читается как
эй-ти-правило). В тексте таблицы стилей с обоих сторон правила в строке может находиться пустое
пространство любых размеров. Начинаются @правила с ключевого символа @,
непосредственно за которым следует указание имени правила. Затем @правило включает в себя
все, что находится до первого символа точки с запятой или другого правила. Следует помнить, что все
правила @dictionary { @import URL("dict_style.css") }
К тому же, если таблица стилей содержит еще другие правила, кроме правил p { background-color: green } @import URL ("file_of_style.css")Пример правильного задания: @import URL ("file_of_style. css") p { background-color: green } Все обычные правила каскадных таблиц стилей состоят из двух частей: селектора и блока определений и имеют следующий вид: селектор { блок определений } Селектором служит название HTML-элемента, или комбинация названий HTML-элементов, для которых и задается правило форматирования. Блок определений начинается с левой фигурной скобки "{" и заканчивается правой фигурной скобкой "}". Все, что находится перед левой фигурной скобкой, считается селектором. Например: h1, h2 { color: blue; font family: Times New Roman } Между фигурными скобками блока определений располагаются объявления. Они имеют следующий общий вид: название свойства: значение свойства Причем между "названием", двоеточием и "значением" может находиться любое количество пробелов. Несколько объявлений для одного селектора могут быть объединены в группы, отделяясь друг от друга точкой с запятой. Например, следующий набор правил p { font-size: 14 pt } p { font-family: Arial } p { font-color: yellow } p { background-color: blue }эквивалентен одному такому правилу p { font-size: 14 pt; font-family: Arial; font-color: yellow; background-color: blue } Объявление может не определять никакого свойства. При этом оно называется пустым. Например, img { } Каскадные таблицы стилей CSS2 не учитывают регистр. Это значит, что названия правил, селекторов и их значения можно указывать как прописными, так и строчными буквами. Чувствительными к регистру могут оказаться объекты, присутствующие в таблице стилей, но не являющиеся объектами языка CSS. Например, по-прежнему учитывается регистр атрибутов id и class у HTML-элементов. При написании текста таблиц стилей допустимо использование комментариев. Они должны начинаться символом "/*" и заканчиваться символом "*/". Например: b { font-color: blue; /* комментарии */ font-size: 14 pt /* комментарии */ } В CSS допустимо также использование комментариев "<!--" и "-->", установленных в HTML. При корретной поддержке CSS-таблиц стилей браузером группы символов "<!-- " " -->" будут проигнорированы. Использовать комментарии "<!-- " " -->" имеет смысл только тогда, когда требуется скрыть содержимое таблицы стилей от браузеров, работающих с HTML 3.2 и более ранних версий, где эти таблицы не поддерживаются. Иначе текст таблицы будет отображаться в окне браузера как содержимое документа. Обработка синтаксических ошибок.При синтаксической проверке браузером CSS-таблицы стилей могут возникать следующие ошибки и соответствующие им действия браузера:
Допустимые значения величин, используемых в CSS2.В этом разделе будут описаны значения, которые могут принимать те или иные свойства, а также их размерности и допустимые интервалы. Числа.В CSS2 могут использоваться целые и вещественные числа, представленные в десятичной форме исчисления. Допустимые интервалы значений индивидуальны для каждого свойства. Единицы измерения длины.В CSS2 допустимо использование двух типов задания длины: относительное задание и абсолютное. Относительное задание длины подразумевает ее задание относительно чего-то. К относительным единицам относятся:
Использование абсолютных единиц измерения предпочтительно только в тех случаях, когда известны геометрические размеры устройства вывода.
Задание URL в контексте CSS2.Указание URL-адреса в CSS2 осуществляется в следующем формате: url ("www.nameserver.com") Например, указать адрес фонового изображения можно следующим способом: body { background: url ("www.myserver.ru/myimage.gif")} При этом допустимо использование как абсолютных, так и относительных URL-адресов. Указание цвета.Для задания цвета отображаемого содержимого HTML-элемента могут применяться следующие возможности:
Углы.Углы в каскадных таблицах стилей, написанных на языке CSS2, могут быть заданы в следующих единицах измерения:
Значения углов, могут быть отрицательными и задаваться как целыми, так и вещественными числами. Время.Задание времени (не путать с датой) может осуществляться либо в секундах (s), либо в миллисекундах (ms). Понятие о селекторе. Работа с селекторами.Все обычные правила CSS состоят из селекторов и соответствующих им блоков определений. В этом разделе будет произведено детальное рассмотрение используемых в CSS селекторов. Простейший селектор представляет собой название HTML-элемента. Такой селектор называется "простым селектором": h1 { font-color: green } Простые селекторы употребляются наиболее часто. Однако язык CSS2 позволяет использовать более широкие возможности для создания таблиц стилей. Например, можно описать свойства HTML-элемента, который является дочерним по отношению к другому HTML-элементу. Также можно использовать селектор, правила которого будут применяться только при определенных действиях пользователя. Существуют также специальные селекторы, которые позволяют обращаться к различным группам HTML-элементов, например, ко всем элементам с определенным значением атрибута id. Универсальный селектор.
Универсальный селектор применяет установки, указанные в его блоке определений, ко всем
HTML-элементам. Обозначается универсальный селектор символом * (звездочка). Но в том случае, если
этот селектор используется в сочетании с другим (или другими) селекторами, то символ * может
быть опущен. Например, записи: <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title> Пример простого и универсального селекторов </title> <style type ="text/css"> * { color=olive } /* правило с использованием универсального селектора */ h1 { color=red } /* правило с использованием простого селектора */ *.myclass { font-color: blue } /* использование универсального селектора в сочетании с селектором классов */ </style> <body> ...текст документа... ...текст документа... ...текст документа... </body> </html> Селектор классов.Используя селектор классов, разработчик может обращаться к группе разнородных HTML-элементов, принадлежащих к одному классу (имеющих одноименное значение атрибута class). Синтаксис селектора классов имеет следующий вид: элемент.класс { определение; определение; определение }
Например, чтобы правило применялось ко всем элементам, принадлежащим к классу .superclass { определение } Или другой пример: <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title> Пример селектора классов </title> <style type="text/css"> h3 { color: green } h3.titlepage { color: red } h3.indexpage { color: blue } </style> </head> <body> ...текст документа... ...текст документа... ...текст документа... </body> </html>
При таком задании все заголовки pre, p.chapter1 { color: red }будет применено ко всем элементам pre и к элементам p класса
chapter1 , а не к элементам pre и p класса
chapter1 .
Селектор id-имён.
Селектор id-имен применяется аналогично селектору классов. Отличие заключается в том, что селектор
id-имен фильтрует HTML-элементы не по классу ( атрибуту элемент#id_имя { определение; определение; определение } Например, правило p#famous { font-family: Heretz }будет применено только к тем HTML-элементам <p> , у которых для атрибута
id указано значение "famous" . Чтобы обратиться ко всем HTML-элементам,
имеющим атрибут id = "famous" , достаточно следующей записи:
#famous { определение; определение; определение } В одном правиле может содержаться несколько селекторов. Допустим, разработчику требуется применить одно и тоже правило к нескольким разным HTML-элементам, не объединенным в классы и имеющим разные id-имена. Можно, конечно, написать отдельное правило для каждого такого элемента, но более эффективным и правильным будет перечислить, через запятую селекторы HTML-элементов в списке селекторов одного правила. Например: h1, p, q { color: lightgrey; font-family: Arial } .my-class, b { color: black } Селекторы контекстного окружения.Возможности CSS2 позволяют учитывать расположение HTML-элементов в иерархическом дереве документа при задании их визуальных характеристик, а также учитывать их контекстное окружение. Как уже говорилось HTML-элемент, заданный в содержимом другого HTML-элемента, является его потомком. Исходя из этого правила, каждый HTML-документ имеет свое иерархическое дерево. Например, для следующего файла, иерархическое дерево будет иметь вид, приведеный на рис. : <html> <head> <base href="www.hrt.hd.net"> <title> Название документа </title> <meta http-equiv=content-type content="text/html" charset="iso-8859-l"> </head> <body> ...текст документа... <p> ...текст абзаца... </p> <ul> <li>элемент списка</li> <li>элемент списка</li> <li>элемеит списка</li> </ul> ...текст документа... </body> </html>
В CSS возможно использование правил, которые будут применяться только к HTML-элементам, являющихся
потомками других определенных элементов. При этом к таким же HTML-элементам, не являющимся потомками
указанных элементов, данное правило применяться не будет. При задании такого правила через пробел
указывается селектор родительского элемента и селектор потомка. Например, разработчику
нужно установить синий цвет для цитат, только если они содержатся в тексте элемента <pre> отформатированный текст <cite>цитата</cite> отформатированный текст </pre> Для этого достаточно использовать следующее правило: pre cite { color: blue } В рамках одного CSS-правила допустим многократный переход родитель-потомок. Например, правило div p em { color: yellow; font-family: italic }будет применено только к тем элементам em , которые являются потомками элемента
<p> , который, в свою очередь, должен являться потомком элемента div .
Чтобы обратиться ко всем элементам em , являющимися потомками второго уровня элемента
div , используется запись div * em *
должен быть с обеих сторон выделен пробелами. Таким образом, правило, использующее иерархию HTML-элементов
документа, имеет следующий общий вид:
селектор селектор ... селектор { определение; определение; определение }
CSS поддерживает использование селекторов детей, т. е. селекторов тех элементов, которые
являются детьми другого элемента в дереве документа. Селекторы детей образуются путем соединения нескольких
селекторов символом div > p { text-indent: 3em } В общем случае синтаксис селектора детей имеет следующий вид: селектор > селектор > ... > селектор { определение; определение; определение }
Обратите внимание, что пробелы вокруг символов Замечание:Браузер MS Internet Explorer не поддерживает селектор детей.
Язык CSS позволяет также обращаться к определенным HTML-элементам, учитывая их соседство с другими
элементами. При этом какому-либо элементу можно задавать характеристики, которые будут к нему
применены только в том случае, если он следует за другим указанным элементом. Например, чтобы
обратиться только к тем неупорядоченным спискам, которые следуют после заголовка
h3 + ul { объявление; объявление; объявление }
Элементы селектор + селектор + ... + селектор { определение; определение; определение } Использование псевдоэлементов и псевдоклассов.В рамках спецификации CSS2 определено некоторое количество псевдоэлементов и псевдоклассов, которые представляют собой элементы и классы, не входящие в иерархическое дерево HTML-документа и не образующие в нем структурных единиц. Иными словами, они являются специфичными элементами и классами языка CSS2 и используются им только в своих целях для задания специальных визуальных эффектов.
Псевдокласс :first-child соответствует элементу, который является первым ребенком
данного элемента. В следующем примере субъектами селектора будут те элементы div > p:first-child { text-indent: 3em }
В результате первый элемент <p>Последний абзац перед примечанием.</p> <div class="note"> <p>Первый абзац внутри примечания.</p> <p>Второй абзац внутри примечания.</p> </div>
а такой же элемент
<p>Последний абзац перед примечанием.</p> <div class="note"> <h3>Примечание.</h3> <p>Первый абзац внутри примечания.</p> <p>Второй абзац внутри примечания.</p> </div> Обозреватели часто по-разному отображают уже посещенные и еще не посещенные гиперссылки. CSS обеспечивает возможность задания стилей их отображения через следующие псевдоклассы:
Например, чтобы задать красный цвет для ссылок, уже просмотренных пользователем, используется следующее CSS-правило: a : visited { color: red } Полное цветовое описание возможных состояний элемента a может иметь следующий вид: <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title> Пример задания оформления ссылок средствами CSS </title> <style type ="text/css"> a : visited { color: lightgrey } a : link { color: blue } a : active { color: yellow } a : hover { color: red } </style> </head> <body> ...текст документа... ...текст документа... ...текст документа... </body> </html> В данном случае непосредственно после открытия документа все его ссылки будут отображаться синим цветом. При наведения на ссылку курсора цвет ее изменится на красный. Сразу после щелчка по выбранной ссылке и до того момента, пока не произойдет загрузка целевого документа, цвет ссылки будет желтым. Затем, при откате из открывшегося документа по клавише "Назад" исходная ссылка будет восприниматься браузером как посещенная и отображаться серым цветом. Псевдоэлемент :first-line применим к любому блочному элементу и задает стиль отображения его первой строки. Например, следующий фрагмент HTML-документа <style type="text/css"> p:first-line { text-transform: uppercase } </style> <p> Это длинный абзац, который будет разбит обозревателем на несколько строк. При этом первая строка абзаца будет отображаться прописными буквами, как это задано в таблице стилей. </p>будет отображаться так: ЭТО ДЛИННЫЙ АБЗАЦ, КОТОРЫЙ БУДЕТ РАЗБИТ ОБОЗРЕВАТЕЛЕМ НА НЕСКОЛЬКО строк. При этом первая строка абзаца будет отображаться прописными буквами, как это задано в таблице стилей. Псевдоэлемент :first-letter применим к любому блочному элементу и задает стиль отображения его первой буквы. Например, следующий фрагмент HTML-документа <style> P:first-letter { font-size: 200%; font-weight: bold } </style> <p> Это абзац, первая буква которого будет выделена обозревателем. </p>будет отображаться так:
Это абзац, первая буква которого будет выделена обозревателем.
Правила каскадирования.Обработка HTML-файла, содержащего каскадную таблицу стилей, имеет следующие этапы:
Иерархическое дерево документа используется для передачи установок родительского элемента элементам-потомкам, то есть благодаря ему реализуется процесс наследования. Все каскадные таблицы стилей, используемые для форматирования документа, выстраиваются в каскад в соответствии со своим приоритетом. По этому каскаду и "прогоняется" документ. Сначала применяются таблицы стилей с меньшим приоритетом, затем — с большим приоритетом. При этом для одноименных HTML-элементов правила таблиц с большим приоритетом перекрывают правила таблиц с меньшим приоритетом. Если для одного HTML-элемента указано несколько одинаковых правил в рамках одной таблицы стилей, то приоритет имеет правило заданное последним. Все таблицы стилей в качестве своего источника могут иметь разработчика, пользователя или браузер. Самым низким приоритетом обладают стилевые установки, используемые браузером по умолчанию. Таблицы стилей, заданные разработчиком, имеют приоритет над таблицами, применяемыми к документу пользовательскими таблицами стилей. По умолчанию к браузеру никаких пользовательских таблиц не подключено, но это всегда можно сделать. Для этого написанная Вами таблица стилей помещается в .css-файл. Затем в браузере в разделе "Сервис→Свойства обозревателя→Оформление" выставляем флажок "Оформлять, используя стиль пользователя" и далее указываем название файла с таблицей стиля (рис. ).
Установки таблицы стилей, подключенной к браузеру таким образом, перекрывают установки, используемые браузером по умолчанию. Например, по умолчанию в браузере Internet Explorer принят серый цвет фона, а можно сделать его красным. И тогда все HTML-документы, для которых не задано фоновое оформление (цвет фона или фоновое изображение), будут иметь в окне этого браузера фон красного цвета.
Пользовательские таблицы, подключенные к браузеру, перекрываются любыми авторскими таблицами стиля,
содержащихся в коде самого HTML-документа, внедренными в него с помощью правила
Однако можно сделать так, чтобы пользовательские правила перекрывали авторские. Для этого нужно
у пользовательских правил выставить правило-флаг body { background: lightgrey !important; font-color: gray !important }
Правило-флаг
В этом отношении между таблицами, задаваемыми элементами
В содержимое одного элемента Кроме всего вышеперечисленного, приоритет какого-либо правила по сравнению с другими правилами, применяемыми к одному и тому же элементу, определяется, исходя из специфичности правила. Например, к элементу <h3 class="vas" id="ret"> Заголовок </h3>могут быть применены следующие правила: h3 { color: gray } h3.vas { color: red } h3#ret { color: green } h3, h2, h1 { color: blue }
Правило
Самым специфичным является правило К HTML-элементам применяются правила, обладающие наибольшей специфичностью, независимо от порядка задания. Специфичность правила определяется по следующей схеме:
Псевдоэлементы и псевдоклассы считаются как обычные элементы и классы. Далее, из чисел a, b и с составляется число abc, которое и показывает специфичность правила. Например:
|
|||||||||||||||||||||||||||||||||||