Сравнение индивидуальных и сокращенных значений

Рассмотрим следующее правило для полей (сокращения для заполнения и границы работают таким же образом):

Это правило можно записать также в следующем виде:

Задание менее четырех значений для сокращенного свойства

Сокращенное значение может иметь менее четырех значений, согласно приведенному ниже списку. Результаты упорядочены по числу предоставленных значений:

6. Одно значение применяется ко всем четырем сторонам, например, margin: 2px;.

7. Первое значение применяется к верху и низу, второе к левому и правому краю, например, margin: 2px 5px;.

8. Первое и третье значения применяются к верху и низу соответственно, второе значение применяется к левому и правому краю, например, margin: 2px 5px 1px;.

9. Значения применяются к верху, правому краю, низу, и левому краю в соответствии с порядком исходного кода CSS, как показано выше.

Обычно разумнее всего предоставлять все четыре значения для сокращенных свойств, по причинам удобочитаемости. Этот совет применим также к сокращенному свойству заполнения.

Выбор между одиночным свойством и сокращенным значением

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

8. Необходимо задать только одно поле. В ситуации, когда требуется задать только одно свойство, одновременное задание несколькоих свойств обычно нарушает Принцип KISS (Будь проще, дурачок!), объясняемый в Глоссарии.

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

10. Создаваемая таблица стилей будет поддерживаться людьми, чьи навыки (или возможности пространственного мышления) ограничены. Если вы можете рассчитывать, что они прочитают эту лекцию, то можно, наверное, не беспокоиться о таком сценарии, но лучше не делать никаких предположений.

11. Вам потребуется заменить значение, чтобы учесть предельный случай. Хотя это требование часто является сигналом плохо спроектированного документа или таблицы стилей … в любом случае об этом едва ли будет известно.

6. Граничные сокращения для различных свойств: Были рассмотрены в самом начале этого раздела. Необходимо упомянуть еще, что можно даже задать значения свойств границ (border) только для одной границы элемента следующим образом:

9. Сокращения для некоторых свойств полей (margin), заполнения (padding) и границы (border): Все это действует таким же образом как было показано выше в разделе "Выбор между одиночным свойством и сокращенным значением".

10. Сокращения для шрифта: С помощью одной строки сокращения можно определить размер шрифта, толщину, стиль, семейство и высоту строки. Например, рассмотрим следующий CSS:

Можно определить все это с помощью следующей строки:

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

Это можно представить с помощью следующего сокращения:

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

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

Можно применить таблицу стилей к элементу, используя атрибут style следующим образом:

Внутри этого атрибута перечисляются все свойства CSS и их значения (каждая пара свойство/значение отделяется друг от друга точкой с запятой, и каждое свойство отделяется от своего значения в каждой паре двоеточием). Таким образом определяют стили в CSS. В качестве примера можно рассмотреть следующий код страницы.

Если открыть этот пример в браузере, то можно видеть, что параграф с атрибутом style будет синим с белым текстом и будет иметь другой размер по сравнению с другими, как показано на рисунке 27.1.

Рис. 27.1. Браузер Opera показывает параграф с примененной строковой таблицей стилей иначе, чем другие параграфы

Преимущество строковых стилей состоит в том, что браузер будет вынужден использовать эти настройки. Все другие стили, определенные в других таблицах стилей, или даже вложенные в заголовок документа, будут переопределены этими стилями.Большая проблема строковых стилей состоит в том, что они делают обслуживание значительно труднее, чем это должно быть. Использование CSS предназначено для разделения представления документа и его структуры, но строковые стили делают именно обратное — рассеивают правила представления по документу.Кроме проблем с обслуживанием, вы не получите никаких преимуществ самой мощной части CSS: каскадирования. Мы вернемся к более подробному рассмотрению каскадирования в следующей лекции, но пока достаточно знать, что использование каскадирования означает, что вы определяете внешний вид в одном месте, а браузер применяет его ко всем элементам, которые соответствуют определенному правилу.

Вложенные таблицы стилей помещаются в заголовке документа внутри элемента style, как в следующем примере страницы:

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

Рис. 27.2. Браузер Opera показывает все параграфы со стилями, определенными во вложенной таблице стилей

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

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

и обратите внимание, что заголовок содержит элемент link, который ссылается на этот внешний файл CSS,

и проверьте, что стили оформления, определенные во внешнем файле CSS, применены к коду HTML. Давайте внимательнее посмотрим на элемент link:

Мы говорили об элементе link раньше в курсе. Напомним, что атрибут href указывает на файл CSS, атрибут media определяет какой носитель информации должен использовать эти стили оформления (в данном случае это будет screen (экран), так как мы не собираемся выводить документ на печать в таком виде), а атрибут type определяет, чем является присоединенный ресурс (расширения файла будет для определения этого недостаточно).

Рис. 27.3. Браузер Opera использует стили, определенные во внешней таблице стилей, когда она соединяется с элементом link

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

Существует в действительности другой способ импорта внешних таблиц стилей в файлы HTML — оператор @import. Он вставляется во вложенную таблицу стилей, таким же образом, как показанный выше вложенный код CSS. Синтаксис выглядит следующим образом:

Иногда вы увидите операторы импорта без скобок, но это означает то же самое. Необходимо знать еще, что оператор @import должен всегда быть первым во вложенной таблице стилей. Наконец, вы можете определить, что импортированная таблица стилей будет применена только к определенным типам носителей информации (медиа), включая тип медиа в конце оператора импорта (это работает во всех браузерах, за исключением IE6 и младших версий). Следующий пример делает то же самое, что предыдущий пример кода:

Первый вопрос, который вы зададите, будет следующим: "зачем мне нужен другой способ применения внешних таблиц стилей к документам HTML?" На самом деле, это не требуется — информация об @import включена здесь скорее для полноты. Существуют небольшие незначительные достоинства/недостатки использования @import или элементов link, но они очень небольшие, поэтому вы можете выбрать, какой способ вам больше нравится. Хотя элементы link считаются сегодня лучшим способом.

· Более старые браузеры вообще не распознают @import, поэтому полностью его игнорируют (Netscape 4 и более старые, и IE 4 и более старые, если вы пропустите скобки вокруг имени файла). Можно, поэтому, использовать оператор @import для скрытия стилей от старых браузеров, которые будут использовать их неправильно. Можно поместить современные стили оформления во внешней таблице стилей и импортировать их с помощью @import, а затем предоставить несколько самых базовых стилей оформления, которые не вызовут проблем у IE/Netscape 4. Это полезно, но сегодня крайне редко может понадобиться обеспечивать совместимость с IE/Netscape 4!

· Как говорилось ранее, IE6 не поддерживает указание типа медиа в конце строки @import, поэтому это не лучший способ для использования нескольких таблиц стилей для различных информационных носителей.

· Можно спорить, что код для нескольких операторов @import меньше, чем код для нескольких элементов link, но это крайне незначительно.

В этом руководстве мы познакомились с применением CSS к документам HTML, либо как строковых стилей с помощью атрибута style, либо как вложенных стилей в элементе style в заголовке документа, либо как внешних файлов. Вы узнали также, что последний способ — соединение внешней таблицы стилей с помощью элемента link — имеет наибольший смысл, как с точки зрения обслуживания, так и кеширования. Затем мы обсудили базовый синтаксис CSS, а также комментарии, различные типы селекторов, и объединения селекторов в группу.

В следующем руководстве мы углубимся в детали CSS, рассматривая каскадирование и более подробно особенности селекторов.

· В чем преимущества и проблемы строковых стилей, и как применять их к элементу?

· Что такое правило стиля? Опишите различные компоненты и синтаксис.

· Предположим, что имеется набор правил стиля, что нужно сделать, чтобы превратить их во внешнюю таблицу стилей?

· Чему соответствует следующий селектор CSS: ul#nav{}?

· В чем преимущество объединения селекторов в группу?

· Как можно определить таблицу стилей печати?

Что будет с Землей, если ось ее сместится на 6666 км? Что будет с Землей? - задался я вопросом...

Конфликты в семейной жизни. Как это изменить? Редкий брак и взаимоотношения существуют без конфликтов и напряженности. Через это проходят все...

ЧТО ПРОИСХОДИТ, КОГДА МЫ ССОРИМСЯ Не понимая различий, существующих между мужчинами и женщинами, очень легко довести дело до ссоры...

ЧТО ТАКОЕ УВЕРЕННОЕ ПОВЕДЕНИЕ В МЕЖЛИЧНОСТНЫХ ОТНОШЕНИЯХ? Исторически существует три основных модели различий, существующих между...

Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте: