Длины и размеры
CSS предоставляет множество различных способов определить размер шрифта, ширину поля или толщину границы. Чтобы указать размер шрифта, вы можете использовать дюймы, цицеро, точки, сантиметры, миллиметры, единицы измерения em и ex, пикселы и проценты. На самом деле вам стоит задуматься только о трех: пикселах, em и процентах.
Пикселы. Пиксел — это одна точка на экране компьютера. Пикселы дают последовательный метод идентификации длины размеров шрифта от компьютера к компьютеру: 72 пиксела на одном мониторе составляют 72 пиксела на другом мониторе. Это тем не менее не означает, что фактическая длина в реальном мире будет одной и той же для всех. Поскольку пользователи устанавливают для своих мониторов различные разрешения — 800 × 600, 1024 × 768, 1600 × 1200 и др., — 72 пиксела могут занять 1 дюйм на одном мониторе и всего 0,5 дюйма на другом. Однако пикселы дают вам наиболее последовательный контроль над отображением.
ПРИМЕЧАНИЕ Есть только один недостаток в использовании пикселов: пользователи Internet Explorer версий 6 или ниже не могут изменить размеры элемента, если они заданы в пикселах. Если ваш текст окажется слишком маленьким для кого-то, то посетитель будет не в состоянии увеличить его, чтобы сделать более приемлемым для чтения.
Единица измерения em. В типографике em — это единица измерения, которая представляет высоту заглавной буквы М для определенного шрифта. В веб-дизайне 1 em — это высота базового шрифта в браузере, которая обычно составляет 16 пикселов. Однако любой может изменить эту базовую установку размера, так что 1 em будет равняться 16 пикселам в одном браузере и 24 пикселам — в другом. Другими словами, em — это относительная единица измерения. Вдобавок к исходной установке размера шрифта в браузере, em может унаследовать информацию о размере от тегов. Размер .9em установит высоту текста приблизительно 14 пикселов в большинстве браузеров с основным размером шрифта 16 пикселов. Но если у вас есть тег <p> с размером шрифта .9ems, а затем тег <strong> с размером шрифта .9ems внутри этого тега <p> , то em-размер тега <strong> составит не 14, а 12 пикселов (16 × 0,9 × 0,9). Так что помните о наследовании, когда применяете em-значения.
Проценты. CSS использует проценты в различных целях, таких как установка размеров текста, определение ширины или высоты элемента, размещение изображения в фоне стиля и т. д. Для размеров шрифта проценты вычисляются на основании унаследованного значения текста. Скажем, общий размер шрифта для абзаца — 16 пикселов. Если вы создали стиль для отдельного абзаца и установили размер его шрифта равным 200 %, то этот текст отображается высотой 32 пиксела. Однако при применении к ширине проценты вычисляются на основе ширины страницы или другого родительского элемента с заданной шириной.
Ключевые слова У многих свойств есть собственные специфические значения, которые влияют на то, как проявляют себя свойства. Они представлены ключевыми словами. Свойство text-align, выравнивающее текст на экране, может принять одно из четырех ключевых слов: right, left, center и justify. Поскольку ключевые слова изменяются от свойства к свойству, читайте описания свойств, которые идут далее, чтобы узнать, какие ключевые слова им соответствуют. Есть одно ключевое слово, которое используется всеми свойствами, — inherit. Оно заставляет стиль унаследовать значение от родительского элемента. Ключевое слово inherit дает возможность заставить стили унаследовать свойства, которые обычно не наследуются от родительских тегов. Например, вы используете свойство border, чтобы добавить границу вокруг абзаца. Остальные теги, такие как <em> и <strong> внутри тега <p>, не наследуют это значение, но вы можете указать им сделать это с помощью ключевого слова inherit: em, strong { border: inherit; } Таким образом, в данном случае теги em и strong отображают одно и то же значение border, как и их родительский тег <p>. Так, элементы <em> и <strong> абзаца получают собственные границы, как и весь текст абзаца. Если бы они изначально наследовали значение свойства border, то у вас получились бы одни границы внутри других (а это серьезное основание, чтобы не наследовать данное свойство). Если вы изменяете значение border тега <p> на другой цвет или толщину линии, теги <em> и <strong> также наследуют это значение и отображают такой же вид границы.
ПРИМЕЧАНИЕ Границы — не очень полезный пример, главным образом потому, что inherit — не очень полезное значение. Но это не было бы полным руководством, если бы я не рассказал обо всех этих фактах.
URL-адреса Значения URL позволяют указывать на другой файл в Сети. Например, свойство background-image принимает URL — путь к файлу в Интернете — в качестве своего значения, которое позволяет вам назначать графический файл как фон для элемента страницы. Эта методика удобна при добавлении повторяющегося изображения в фон страницы или при использовании собственной графики для маркированных списков. В CSS вы определяете URL так: url(images/tile.gif). Стиль, который добавляет изображение, названное tile.gif, к фону страницы, выглядел бы следующим образом: body { background-image: url(images/tile.gif); } В отличие от HTML, в CSS кавычки вокруг URL являются необязательными, так что url ("images/tile.gif"), url('images/tile.gif') и url(images/tile.gif) эквивалентны.
ПРИМЕЧАНИЕ Сам URL такой же, как и HTML-атрибут href, используемый для ссылок. Это означает, что вы може- те использовать абсолютный URL (например, http://www.missingmanuals.com/images/tile.gif), путь относительно корня (например, /images/tile.gif) или URL относительно документа (например, ../../ images/tile.gif).