|
Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
|
|
Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
Псевдоклассы, задающие язык текста
Для документов, одновременно содержащих тексты на нескольких языках имеет значение соблюдение правил синтаксиса, характерные для того или иного языка. С помощью псевдоклассов можно изменять стиль оформления иностранных текстов, а также некоторые настройки. : lang Определяет язык, который используется в документе или его фрагменте. В коде HTML язык устанавливается через атрибут charset тега < meta>. С помощью псевдокласса: lang можно задавать определенные настройки, характерные для разных языков, например, вид кавычек в цитатах. Синтаксис следующий. Элемент: lang(язык) {... } В качестве языка могут выступать следующие значения: ru — русский; en — английский; de — немецкий; fr — французский; it — итальянский. Пример 15.6. Вид кавычек в зависимости от языка <! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" > < html> < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" > < title> lang< /title> < style type=" text/css" > P { font-size: 150%; /* Размер текста */ } q: lang(de) { quotes: " \201E" " \201C"; /* Вид кавычек для немецкого языка */ } q: lang(en) { quotes: " \201C" " \201D"; /* Вид кавычек для английского языка */ } q: lang(fr), q: lang(ru) { /* Вид кавычек для русского и французского языка */ quotes: " \00AB" " \00BB"; } < /style> < /head> < body> < p> Цитата на французском языке: < q lang=" fr" > Ce que femme veut, Dieu le veut< /q>.< /p> < p> Цитата на немецком: < q lang=" de" > Der Mensch, versuche die Gotter nicht< /q>.< /p> < p> Цитата на английском: < q lang=" en" > То be or not to be< /q>.< /p> < /body> < /html>
Результат данного примера показан на рис. 15.6. Для отображения типовых кавычек в примере используется стилевое свойство quotes, а само переключение языка и соответствующего вида кавычек происходит через атрибут lang, добавляемый к тегу < q>.
Рис. 15.6. Разные кавычки для разных языков Псевдоэлементы Начало формы Конец формы
Псевдоэлементы позволяют задать стиль элементов не определенных в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста. Синтаксис использования псевдоэлементов следующий. Селектор: Псевдоэлемент { Описание правил стиля } Вначале следует имя селектора, затем пишется двоеточие, после которого идет имя псевдоэлемента. Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по отдельности, как показано ниже. .foo: first-letter { color: red } Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных или глобальных стилей. Далее перечислены все псевдоэлементы, их описание и свойства. : after Применяется для вставки назначенного контента после элемента. Этот псевдоэлемент работает совместно со стилевым свойством content, которое определяет содержимое для вставки. В примере 16.1 показано использование псевдоэлемента: after для добавления текста в конец абзаца. Пример 16.1. Применение псевдоэлемента: after
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" > < html> < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" > < title> Псевдоэлементы< /title> < style type=" text/css" > P.new: after { content: " - Новьё! "; /* Добавляем после текста абзаца */ } < /style> < /head> < body> < p class=" new" > Ловля льва в пустыне с помощью метода золотого сечения.< /p> < p> Метод ловли льва простым перебором.< /p> < /body> < /html>
Результат примера показан на рис. 16.1.
Рис. 16.1. Добавление текста к абзацу с помощью: after В данном примере к содержимому абзаца с классом new добавляется дополнительное слово, которое выступает значением свойства content. Псевдоэлементы: after и: before, а также стилевое свойство content не поддерживаются браузером Internet Explorer до седьмой версии включительно. : before По своему действию: before аналогичен псевдоэлементу: after, но вставляет контент до элемента. В примере 16.2 показано добавление маркеров своего типа к элементам списка посредством скрытия стандартных маркеров и применения псевдоэлемента: before. Пример 16.2. Использование псевдоэлемента: before
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" > < html> < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" > < title> Псевдоэлементы< /title> < style type=" text/css" > UL { padding-left: 0; /* Убираем отступ слева */ list-style-type: none; /* Прячем маркеры списка */ } LI: before { content: " \20aa "; /* Добавляем перед элементом списка символ в юникоде */ } < /style> < /head> < body> < ul> < li> Чебурашка< /li> < li> Крокодил Гена< /li> < li> Шапокляк< /li> < li> Крыса Лариса< /li> < /ul> < /body> < /html>
Результат примера показан ниже (рис. 16.2).
Рис. 16.2. Изменение вида маркеров с помощью: before В данном примере псевдоэлемент: before устанавливается для селектора LI, определяющего элементы списка. Добавление желаемых символов происходит путем задания значения свойства content. Обратите внимание, что в качестве аргумента не обязательно выступает текст, могут применяться также символы юникода. : first-letter Определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал. Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста. Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору P псевдоэлемент: first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и поменять цвет текста (пример 16.3). Пример 16.3. Использование псевдоэлемента: first-letter
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" > < html> < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" > < title> Псевдоэлементы< /title> < style type=" text/css" > P { font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */ font-size: 90%; /* Размер шрифта */ color: black; /* Черный цвет текста */ } P: first-letter { font-family: 'Times New Roman', Times, serif; /* Гарнитура шрифта первой буквы */ font-size: 200%; /* Размер шрифта первого символа */ color: red; /* Красный цвет текста */ } < /style> < /head> < body> < p> Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли. < /p> < p> Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.< /p> < /body> < /html>
Результат примера показан ниже (рис. 16.3).
Рис. 16.3. Создание выступающего инициала В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста. : first-line Определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д. К псевдоэлементу: first-line могут применяться не все стилевые свойства. Допустимо использовать свойства, относящиеся к шрифту, изменению цвет текста и фона, а также: clear, line-height, letter-spacing, text-decoration, text-transform, vertical-align и word-spacing. В примере 16.4 показано использование псевдоэлемента: first-line применительно к абзацу текста. Пример 16.4. Выделение первой строки текста
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" > < html> < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" > < title> Псевдоэлементы< /title> < style type=" text/css" > P: first-line { color: red; /* Красный цвет текста */ font-style: italic; /* Курсивное начертание */ } < /style> < /head> < body> < p> Интересно, а существует ли способ действительно практичного применения свойства first-line? Нет, не такого, чтобы можно было бы показать, что это возможно, а чтобы воистину захватило дух от красоты решения, загорелись глаза от скрытых перспектив, после чего остается только сказать себе, что вот это вот, это самое сделать по-другому, также изящно и эффектно просто невозможно.< /p> < /body> < /html>
Результат примера показан на рис. 16.4.
Рис. 16.4. Результат применения псевдоэлемента: first-line В данном примере первая строка выделяется красным цветом и курсивным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остается постоянным, независимо от числа входящих в нее слов. Группирование
При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся стилевых правил. Чтобы не повторять дважды одни и те же элементы, их можно сгруппировать для удобства представления и сокращения кода. В примере 17.1 показана обычная запись, здесь для каждого селектора приводится свой набор стилевых свойств. Пример 17.1. Стиль для каждого селектора H1 { font-family: Arial, Helvetica, sans-serif; font-size: 160%; color: #003; }H2 { font-family: Arial, Helvetica, sans-serif; font-size: 135%; color: #333; }H3 { font-family: Arial, Helvetica, sans-serif; font-size: 120%; color: #900; } P { font-family: Times, serif; }Из данного примера видно, что стиль для тегов заголовков содержит одинаковое значение font-family. Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов, как показано в примере 17.2. Пример 17.2. Сгруппированные селекторы H1, H2, H3 { font-family: Arial, Helvetica, sans-serif; } H1 { font-size: 160%; color: #003; }H2 { font-size: 135%; color: #333; }H3 { font-size: 120%; color: #900; }В данном примере font-family единое для всех селекторов применяется сразу к нескольким тегам, а индивидуальные свойства уже добавляются к каждому селектору отдельно. Селекторы группируются в виде списка тегов, разделенных между собой запятыми. В группу могут входить не только селекторы тегов, но также идентификаторы и классы. Общий синтаксис следующий. Селектор 1, Селектор 2, ... Селектор N { Описание правил стиля } При такой записи правила стиля применяются ко всем селекторам, перечисленным в одной группе. Наследование Начало формы Конец формы
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются. Разберем наследование на примере таблицы. Особенностью таблиц можно считать строгую иерархическую структуру тегов. Вначале следует контейнер < table> внутри которого добавляются теги < tr>, а затем идет тег < td>. Если в стилях для селектора TABLE задать цвет текста, то он автоматически устанавливается для содержимого ячеек, как показано в примере 18.1. Пример 18.1. Наследование параметров цвета
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" > < html> < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" > < title> Наследование< /title> < style type=" text/css" > TABLE { color: red; /* Цвет текста */ background: #333; /* Цвет фона таблицы */ border: 2px solid red; /* Красная рамка вокруг таблицы */ } < /style> < /head> < body> < table cellpadding=" 4" cellspacing=" 0" > < tr> < td> Ячейка 1< /td> < td> Ячейка 2< /td> < /tr> < tr> < td> Ячейка 3< /td> < td> Ячейка 4< /td> < /tr> < /table> < /body>
< /html>
В данном примере для всей таблицы установлен красный цвет текста, поэтому в ячейках он также применяется, поскольку тег < td> наследует свойства тега < table>. При этом следует понимать, что не все стилевые свойства наследуются. Так, border задает рамку вокруг таблицы в целом, но никак не вокруг ячеек. Аналогично не наследуется значение свойства background. Тогда почему цвет фона у ячеек в данном примере темный, раз он не наследуется? Дело в том, что у свойства background в качестве значения по умолчанию выступает transparent, т.е. прозрачность. Таким образом цвет фона родительского элемента «проглядывает» сквозь дочерний элемент. Чтобы определить, наследуется значение стилевого свойства или нет, требуется заглянуть в справочник по свойствам CSS и посмотреть там. Подключать свою интуицию в подобном случае бесполезно, может и подвести. Наследование позволяет задавать значения некоторых свойств единожды, определяя их для родителей верхнего уровня. Допустим, требуется установить цвет и шрифт для основного текста. Достаточно воспользоваться селектором BODY, добавить для него желаемые свойства, и цвет текста внутри абзацев и других текстовых элементов поменяется автоматически (пример 18.2). Пример 18.2. Параметры текста для всей веб-страницы
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" > < html> < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" > < title> Наследование< /title> < style type=" text/css" > BODY { font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта */ color: navy; /* Синий цвет текста */ } < /style> < /head> < body> < p> Цвет текста этого абзаца синий.< /p> < /body>
< /html>
В данном примере рубленый шрифт и цвет текста абзацев устанавливается с помощью селектора BODY. Благодаря наследованию уже нет нужды задавать цвет для каждого элемента документа в отдельности. Однако бывают варианты, когда требуется все-таки изменить цвет для отдельного контейнера. В этом случае придется переопределять нужные параметры явно, как показано в примере 18.3. Пример 18.3. Изменение свойств наследуемого элемента
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" > < html> < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" > < title> Наследование< /title> < style type=" text/css" > BODY { font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта */ color: navy; /* Синий цвет текста */ } P.red { color: maroon; /* Темно-красный цвет текста */ } < /style> < /head> < body> < p> Цвет текста этого абзаца синий.< /p> < p class=" red" > А у этого абзаца цвет текста уже другой.< /p> < /body> < /html>
В данном примере цвет первого абзаца наследуется от селектора BODY, а для второго установлен явно через класс с именем red. Каскадирование Начало формы Конец формы
Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадные таблицы стилей), где одним из ключевых слов выступает «каскад». Под каскадом в данном случае понимается одновременное применение разных стилевых правил к элементам документа — с помощью подключения нескольких стилевых файлов, наследования свойств и других методов. Чтобы в подобной ситуации браузер понимал, какое в итоге правило применять к элементу, и не возникало конфликтов в поведении разных браузеров, введены определенные приоритеты. Ниже приведены приоритеты браузеров, которыми они руководствуются при обработке стилевых правил. Чем выше в списке находится пункт, тем ниже его приоритет, и наоборот.
Самым низким приоритетом обладает стиль браузера — оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Как задавать пользовательский стиль рассказывалось в главе 1 (см. рис. 1.3 и 1.4). ! important Ключевое слово! important играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то! important позволяет повысить приоритет стиля или его важность, иными словами. При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом.
Синтаксис применения! important следующий. Свойство: значение! important Вначале пишется желаемое стилевое свойство, затем через двоеточие его значение и в конце после пробела указывается ключевое слово! important. Повышение важности требуется не только для регулирования приоритета между авторской и пользовательской таблицей стилей, но и для повышения специфичности определенного селектора. Специфичность Если к одному элементу одновременно применяются противоречивые стилевые правила, то более высокий приоритет имеет правило, у которого значение специфичности селектора больше. Специфичность это некоторая условная величина, вычисляемая следующим образом. За каждый идентификатор (в дальнейшем будем обозначать их количество через a) начисляется 100, за каждый класс и псевдокласс (b) начисляется 10, за каждый селектор тега и псевдоэлемент (c) начисляется 1. Складывая указанные значения в определенном порядке, получим значение специфичности для данного селектора. * {} /* a=0 b=0 c=0 -> специфичность = 0 */ li {} /* a=0 b=0 c=1 -> специфичность = 1 */ li: first-line {} /* a=0 b=0 c=2 -> специфичность = 2 */ ul li {} /* a=0 b=0 c=2 -> специфичность = 2 */ ul ol+li {} /* a=0 b=0 c=3 -> специфичность = 3 */ ul li.red {} /* a=0 b=1 c=2 -> специфичность = 12 */ li.red.level {} /* a=0 b=2 c=1 -> специфичность = 21 */ #t34 {} /* a=1 b=0 c=0 -> специфичность = 100 */ #content #wrap {} /* a=2 b=0 c=0 -> специфичность = 200 */ Встроенный стиль, добавляемый к тегу через атрибут style, имеет специфичность 1000, поэтому всегда перекрывает связанные и глобальные стили. Однако добавление! important перекрывает в том числе и встроенные стили. Если два селектора имеют одинаковую специфичность, то применяться будет тот стиль, что определен в коде ниже. В примере 19.1 показано, как влияет специфичность на стиль элементов списка. Пример 19.1. Цвет списка
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" > < html> < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" > < title> Список< /title> < style type=" text/css" > #menu ul li { color: green; } .two { color: red; } < /style> < /head> < body> < div id=" menu" > < ul> < li> Первый< /li> < li class=" two" > Второй< /li> < li> Третий< /li> < /ul> < /div> < /body> < /html>
В данном примере цвет текста списка задан зеленым, а второй пункт списка с помощью класса two выделен красным цветом. Вычисляем специфичность селектора #menu ul li — один идентификатор (100) и два тега (2) в сумме дают значение 102, а селектор.two будет иметь значение специфичности 10, что явно меньше. Поэтому текст окрашиваться красным цветом не будет. Чтобы исправить ситуацию, необходимо либо понизить специфичность первого селектора, либо повысить специфичность второго (пример 19.2). Пример 19.2. Изменение специфичности /* Понижаем специфичность первого селектора */ ul li {...} /* Убираем идентификатор */ .two {...}
/* Повышаем специфичность второго селектора */ #menu ul li {...} #menu.two {...} /* Добавляем идентификатор */
#menu ul li {...} .two { color: red! important; } /* Добавляем! important */ Добавление идентификатора используется не только для изменения специфичности селектора, но и для применения стиля только к указанному списку. Поэтому понижение специфичности за счет убирания идентификатора применяется редко, в основном, повышается специфичность нужного селектора. Валидация CSS
Валидацией называется проверка CSS-кода на соответствие спецификации CSS2.1 или CSS3. Соответственно, корректный код, не содержащий ошибок, называется валидный, а не удовлетворяющий спецификации — невалидный. Наиболее удобно делать проверку кода через сайт http: //jigsaw.w3.org/css-validator/, с помощью этого сервиса можно указать адрес документа, загрузить файл или проверить набранный текст. Большим плюсом сервиса является поддержка русского и украинского языка. Проверить URI Эта вкладка позволяет указывать адрес страницы размещенной в Интернете. Протокол http: // можно не писать, он будет добавлен автоматически (рис. 20.1).
Рис. 20.1. Проверка документа по адресу После ввода адреса нажмите на кнопку «Проверить» и появится одна из двух надписей: «Поздравляем! Ошибок не обнаружено» в случае успеха или «К сожалению, мы обнаружили следующие ошибки» при невалидном коде. Сообщения об ошибках или предупреждениях содержат номер строки, селектор и описание ошибки. Проверить загруженный файл Эта вкладка позволяет загрузить HTML или CSS-файл и проверить его на наличие ошибок (рис. 20.2).
Рис. 20.2. Проверка файла при его загрузке Сервис автоматически распознает тип файла и если указан HTML-документ, вычленяет из него стиль для валидации. Проверить набранный текст Последняя вкладка предназначена для непосредственного ввода HTML или CSS-кода, при этом проверке будет подвергнут только стиль (рис. 20.3).
Рис. 20.3. Проверка введенного кода Этот вариант представляется наиболее удобным для проведения различных экспериментов над кодом или быстрой проверки небольших фрагментов. Выбор версии CSS В CSS3 добавлено много новых стилевых свойств по сравнению с предыдущей версией, поэтому проводить проверку кода следует с учетом версии. По умолчанию в сервисе указан CSS2.1, так что если вы хотите проверить код на соответствие CSS3, это следует указать явно. Для этого щелкните по тексту «Дополнительные возможности» и в открывшемся блоке из списка «Профиль» выберите CSS3 (рис. 20.4).
Рис. 20.4. Указание версии CSS для проверки Идентификаторы и классы Начало формы Конец формы
Периодически поднимается спор о целесообразности использования идентификаторов в вёрстке. Основной довод состоит в том, что идентификаторы предназначены для доступа и управления элементами веб-страницы с помощью скриптов, а для изменения стилей элементов должны применяться исключительно классы. В действительности нет разницы, через что задавать стили, но следует помнить о некоторых особенностях идентификаторов и классов, а также подводных камнях, которые могут поджидать разработчиков. Для начала перечислим характерные признаки этих селекторов. Идентификаторы
Классы
Идентификаторы Если во время работы веб-страницы требуется изменить стиль некоторых элементов «на лету» или выводить внутри них какой-либо текст, с идентификаторами это делается гораздо проще. Обращение к элементу происходит через метод getElementById, параметром которого служит имя идентификатора. В примере 21.1 к текстовому полю формы добавляется идентификатор с именем userName, затем с помощью функции JavaScript делается проверка на то, что пользователь ввёл в это поле какой-либо текст. Если никакого текста нет, но кнопка Submit нажата, выводится сообщение внутри тега с идентификатором msg. Если всё правильно, данные формы отправляются по адресу, указанному атрибутом action. Пример 21.1. Проверка данных формы XHTML 1.0IE 7IE 8IE 9Cr 12Op 11Sa 5Fx 4 <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" " http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns=" http: //www.w3.org/1999/xhtml" > < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" /> < title> Проверка формы< /title> < script type=" text/javascript" > function validForm(f) { user = document.getElementById(" userName" ); if(user.value == " " ) document.getElementById(" msg" ).innerHTML = 'Пожалуйста, введите имя.'; else f.submit(); } < /script> < /head> < body> < form action=" handler.php" onsubmit=" validForm(this); return false" > < p> Введите свое имя: < /p> < div id=" msg" > < /div> < p> < input type=" text" id=" userName" name=" user" /> < /p> < p> < input type=" submit" /> < /p> < /form> < /body> < /html>
Поскольку идентификаторы чувствительны к регистру, имеет значение их однотипное написание. Внутри тега < input> используется имя userName, его же следует указать и в методе getElementById. При ошибочном написании, например, username, скрипт перестанет работать, как требуется. В примере выше стили вообще никакого участия не принимали, сами идентификаторы требовались для работы скриптов. При использовании в CSS следует учитывать, что идентификаторы обладают высоким приоритетом по сравнению с классами. Поясним это на примере 21.2. Пример 21.2. Сочетание стилей XHTML 1.0CSS 2.1IE 7IE 8IE 9Cr 8Op 12Sa 5Fx 4 <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" " http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns=" http: //www.w3.org/1999/xhtml" > < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" /> < title> Идентификаторы< /title> < style type=" text/css" > #A, .a { border: none; background: #f0f0f0; color: green; padding: 5px; } .b { border: 1px solid red; color: red; padding: 0; } < /style> < /head> < body> < p id=" A" class=" b" > Стиль идентификатора< /p> < p class=" a b" > Стиль классов a и b< /p> < p class=" b" > Стиль класса b< /p> < /body> < /html>
Для первого абзаца устанавливается стиль от идентификатора A и класса b, свойства которых противоречат друг другу. При этом стиль класса будет игнорироваться из-за особенностей каскадирования и специфичности. Для второго абзаца стиль задаётся через классы a и b одновременно. Приоритет у классов одинаковый, значит, в случае противоречия будут задействованы те свойства, которые указаны в стиле ниже. К последнему абзацу применяется стиль только от класса b. На рис. 21.1 показан результат применения стилей.
Рис. 21.1. Использование стилей для текста Специфичность в каскадировании начинает играть роль при разрастании стилевого файла за счёт увеличения числа селекторов, что характерно для больших и сложных сайтов. Чтобы стиль применялся корректно, необходимо грамотно управлять специфичностью селекторов путем использования идентификаторов, повышения важности через! important, порядком следования свойств. Классы Поскольку к элементу одновременно можно добавлять более одного класса, это позволяет завести несколько универсальных классов со стилевыми свойствами на все случаи и включать их к тегам при необходимости. Предположим, что большинство блоков на странице имеют закругленные уголки, причем некоторые блоки еще имеют красную рамку, а некоторые нет. В этом случае можем написать такой стиль (пример 21.3). Пример 21.3. Использование классов .r, .b { padding: 10px; background: #FCE3EE; } .r { border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px } .b { border: 1px solid #ED1C24; } .n { border: none; } Указывая разные классы в атрибуте class мы можем комбинировать набор стилевых свойств и получить таким образом блоки с рамкой, блоки без рамки, со скругленными или прямыми уголками. Это несколько похоже на группирование селекторов, но обладает большей гибкостью. Написание эффективного кода
В процессе написания CSS следует придерживаться некоторых принципов, которые позволяют сократить код CSS, сделать его более удобным, наглядным и читабельным. Читабельность в данном случае означает, что разработчик спустя какое-то время может легко понять и модифицировать стиль или что в коде разберется даже сторонний человек. |
Последнее изменение этой страницы: 2017-03-14; Просмотров: 173; Нарушение авторского права страницы
