Реальные единицы измерения

Реальные единицы измерения великолепно работают в физическом мире, однако для использования на экране монитора они оказываются мало пригодны. Причина на редкость проста: мониторы имеют совершенно разные физические параметры. К ним относятся:

- размер монитора по диагонали (варьируется от 14 дюймов до 21 дюйма)

- разрешение монитора (варьируется от 640х480 до 1600х1200)

Кроме того, на различных платформах могут быть различные экранные разрешения. Так, например, на платформе Macintosh разрешение 72 пикселя на дюйм, тогда как на платформе Windows - 96 пикселей на дюйм.

К чему это приводит? Если на мониторе с диагональю 21 дюйм шрифт размером 0.5 дюйма будет смотреться нормально, то на мониторе с диагональю 14 дюймов он будет слишком велик.

Точно так же, если при разрешении 640х480 текст размером 3mm читается нормально, то при разрешении 1600х1200 невозможно будет ничего разобрать.

Кроме того, браузер сам по себе не в состоянии корректно отобразить величину в реальных единицах. Давайте рассмотрим, почему это происходит. Как известно, изображение на экране монитора строится на основе пикселей. Пиксель является минимальной единицей измерения, то есть не бывает величины 0.5 пикселя. Чтобы отобразить на экране, скажем, два дюйма, операционная система переводит реальную величину в пиксели. И тут вступают в расчет все вышеперечисленные факторы. Во-первых, физические размеры монитора, во-вторых, разрешение монитора, в-третьих, экранное разрешение.

Возьмем конкретный пример. Монитор размером 13 дюймов по горизонтали и 9 дюймов по вертикали с разрешением 1024х768 в операционной системе Windows, то есть с экранным разрешением 96 пикселей на дюйм. Тогда величина два дюйма будет соответствовать 96*2=192 пикселям. Однако реальная высота этих двух дюймов будет (768/9)*2=171 пиксель. То есть получается несоответствие: браузер считает, что два дюйма - это 192 пикселя, а реальный размер двух дюймов на мониторе - 171 пиксель. Таким образом, если вы устанавливаете размер элемента в два дюйма, то на этом конкретном мониторе реальный размер элемента будет равен 2,22 дюйма. В то же время на другом мониторе с другими параметрами реальный размер может быть совершенно иным.

Исходя из всего этого, можно сделать простой вывод: использование в CSS реальных единиц измерения крайне ограничено. Принципиально использовать реальные единицы измерения можно только в том случае, когда известны параметры устройства вывода. Таким устройством может быть принтер, потому что для него известны геометрические размеры страницы и разрешение (например, 300 точек на дюйм и страница формата А4). Однако особого смысла использование реальных единиц и для печати не имеет.

Типографские единицы измерения

Типографские единицы измерения для дизайнера даже привычнее, чем реальные единицы, потому что они сталкиваются с ними повсеместно, в любом графическом пакете размер шрифта задается с помощью пунктов (pt). Так что использовать типографские единицы в CSS хочется по привычке. Однако придется изменить свои привычки по той простой причине, что пункты (pt) и пики (pc) принципиально ничем не отличаются от реальных единиц измерения. Это становится понятно, если вспомнить, что такое пункт. Так вот один пункт равен 1/72 дюйма, а пика равна 12 пунктам, то есть 1/6 дюйма. Таким образом, на использование данных типографских величин накладывается абсолютно такое же ограничение, как и на использование реальных величин. Получается, что использовать пункты и пики надо только в той таблице стилей, которая предназначается для вывода страницы на печать.

Надо сказать, что для принтера действительно лучше использовать типографские единицы, потому что они для него являются родными. Дело в том, что некоторые достаточно старые браузеры некорректно переводят пиксели в пункты. Например, если вы укажете размер шрифта 16 пикселей, то некоторые браузеры и распечатают его как шестнадцать точек. Но экранное разрешение значительно отличается от разрешения принтера. Например, принтер с разрешением 600dpi выведет 16 пикселей как 0,03 дюйма, что читаться не будет совершенно.

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

Кроме пунктов и пик есть еще одна достаточно интересная типографская единица - ex, которая соответствует высоте строчной букве "x". В отличие от всех предыдущих единиц, эта единица является относительной. Относительные единицы просто незаменимы в резиновой верстке, когда главным является сохранение пропорций. Что касается высоты буквы "x", то она может значительно варьироваться от шрифта к шрифту. У большинства шрифтов высоты буквы "x" равна половине высоты шрифта, однако у некоторых декоративных шрифтов может составлять всего одну треть от высоты шрифта.

Для чего же можно использовать единицу измерения, которая базируется на высоте буквы "x"? На самом деле, область применения данной единицы достаточно узка. Ее предпочтительно использовать для выравнивания по вертикали, чтобы точно выровнять какой-либо блок по линии текста. Кроме того, можно делать рамки, отступы и поля шириной по высоте текста. Вот, в общем-то, и все.

Для установки размера шрифта ex подходит слабо, потому что он обладает узким спектром значений. Например, невозможно задать размер шрифта на 25% больше, чем у родительского элемента. Для установки высоты строки тоже не подходит, потому что надо знать полную высоту шрифта, иначе расстояние между строками может быть совсем не таким, каким задумывалось.

В браузере Internet Explorer 5.0 1ex равен 0.5em, что абсолютно неверно, потому что у разных шрифтов соотношение высоты буквы "х" и высоты шрифта может быть и 0.3em, и 0.6em. Так что использованию данной единицы измерения мешает еще и плохая реализация ее поддержки браузерами.

Относительные единицы измерения

Относительные единицы

Относительные единицы обычно используют для работы с текстом, либо когда надо вычислить процентное соотношение между элементами. В табл. 1 перечислены основные относительные единицы.

Относительные единицы измерения
Единица	Описание
em	Высота шрифта текущего элемента
ex	Высота символа x
px	Пиксел
%	Процент

Изменяемое значение, которое зависит от размера шрифта текущего элемента (он устанавливается через стилевое свойство font-size). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию. Соответственно, устанавливая размер текста для всей страницы в em, мы работаем именно с этим параметром. В том случае, когда em используется для определенного элемента, за 1em принимается размер шрифта его родителя.

ex определяется как высота символа «x» в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.

Пиксел это элементарная точка, отображаемая монитором или другим подобным устройством, например, смартфоном. Размер пиксела зависит от разрешения устройства и его технических характеристик.

Абсолютные единицы

Абсолютные единицы применяются реже, чем относительные и, как правило, при работе с текстом. В табл. 2 перечислены основные такие единицы.

Абсолютные единицы измерения
Единица	Описание
in	Дюйм (1 дюйм равен 2,54 см)
cm	Сантиметр
mm	Миллиметр
pt	Пункт (1 пункт равен 1/72 дюйма)
pc	Пика (1 пика равна 12 пунктам)

Самой, пожалуй, распространенной единицей является пункт, который используется для указания размера шрифта. Многие люди привыкли задавать размер шрифта в текстовых редакторах, например, 12. А что это число означает, не понимают. Так это именно пункты и есть, они родные. Конечно они нам не родные, мы привыкли измерять все в миллиметрах и подобных единицах, но пункт, пожалуй, единственная величина из не метрической системы измерения, которая используется у нас повсеместно. И все благодаря текстовым редакторам и издательским системам. В примере 2 показано использование пунктов и других единиц.

Свойства CSS: шрифт

Свойства шрифта

Свойство стиля	Описание свойства	Значения	Значение по умолчанию
font-family	Гарнитура шрифта	список имен шрифтов, перечисленных через запятую в порядке убывания предпочтения; список может заканчиваться одним из родовых имен: serif (с засечками, "антиква"), sans-serif (без засечек, "рубленый"), cursive (курсив), fantasy (аллегорический), monospace (моноширинный)
font-size	Размер шрифта	размер, процент, xx-small,x-small, small, medium, large, x-large, xx-large, larger, smaller	medium
font-style	Начертание шрифта	normal, italic (курсив), oblique (наклонный)	normal
font-weight	Насыщенность шрифта	число от 100 до 900 (кратное 100), normal, bold, bolder, lighter	normal
font-variant	Может задать вывод капителью (символами, похожими на прописные, но малого размера); капитель есть не во всяком шрифте	normal, small-caps (капитель)	normal
font-stretch	Задание нормального, разреженных (expanded) или сжатых (condensed) начертаний из текущей гарнитуры шрифта	normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded	normal
font	Стенографическое свойство для одновременного задания нескольких свойств шрифта	список свойств шрифта, разделенных пробелами, в следующем порядке: font-style, font-variant, font-weight, font-size, line-height, font-family

 

Пример задания свойства font-family: { font-family: Arial, Helvetica, sans-serif }

Пример задания стенографического свойства font: { font: italic normal bold 20px Arial; }

Свойства CSS: цвет и фон

Свойства цвета и фона

Свойство стиля	Описание свойства	Значения	Значение по умолчанию
сolor	Цвет текста	цвет
background-color	Цвет фона элемента	цвет, transparent	transparent
background-image	Фоновое изображение	URL / URI
background-position	Исходное положение фонового изображения. При использовании значений типа размер и процент указываются отступы по горизонтали и вертикали от левого верхнего угла окна.	размер, процент, left, top, center, right, bottom	0% 0% (верхний левый угол окна)
background-attachment	Указывает, будет ли фоновое изображение стационарным или прокручиваемым	scroll, fixed	scroll
background-repeat	Тип заполнения элемента фоновым изображением	repeat - повторяется no-repeat - не повторяется repeat-x - повторяется по оси x repeat-y - повторяется по оси y	repeat
background	Стенографическое свойство для задания всех свойств фона	список свойств background-color, background-image, background-position, background-attachment, background-repeat, разделенных пробелами, в любом порядке

 

Пример задания свойства стенографического свойства background:{ background: blue fixed no-repeat }

Свойства CSS: текст

 

Свойство стиля	Описание свойства	Значения	Значение по умолчанию
text-indent	Отступ первой строки текста в блоке	размер, процент (относительно ширины блока)
text-align	Выравнивание текста	left, right, center, justify
text-decoration	Декорирование текста	none (нет), underline (подчеркнутый), overline (надчеркнутый), line-through (перечеркнутый), blink (мерцающий)	none
text-shadow	Эффекты затенения текста	none, список эффектов затенения, перечисляемых через запятую; каждый эффект представлет собой набор из максимум четырех разделенных пробелами элементов, любой из которых можно опустить: цвет размер1 размер2 размер3 цвет - цвет тени; размер1 - смещение тени по горизонтали; размер2 - смещение тени по вертикали; размер3 - радиус размытия тени	none
letter-spacing	Межсимвольное расстояние	размер, normal	normal
word-spacing	Расстояние между словами	размер, normal	normal
text-transform	Преобразование текста	none, capitalize (первая буква каждого слова заглавная), uppercase (все буквы заглавные), lowercase (все буквы строчные)	none
line-height	Межстрочный интервал	normal, число, размер, процент (относительно размера текущего шрифта)	normal
white-space	Способ обработки символов пустого пространства внутри блока	normal, pre (не изменять символы пустого пространства), nowrap (не разрывать строку)	normal
vertical-align	Вертикальное выравнивание текста в строке	baseline - Выравнивает базовую линию элемента по базовой линии родителя. bottom - Выравнивает элемент по нижней части стрки. middle - Выравнивает средину элемента по базовой линии родителя и прибавляет половину высоты родительского элемента. sub - Нижний индекс (размер шрифта не меняется). super - Верхний индекс (размер шрифта не меняется). text-bottom - Нижняя граница элемента выравнивается по нижнему краю строки. text-top - Верхняя граница элемента выравнивается по верхнему краю строки. top - Выравнивает элемент по верхней части строки.

 

Пример задания эффекта затенения: { text-shadow: green 2px 3px 5px, red 5px; }

 

Блоки в HTML Виды блоков

В языке HTML все элементы можно разделить на два типа: блочные и строчные. Блочные элементы создают визуально самостоятельную структурную единицу - блок. Примером блочных элементов могут быть элементы H1-Р6, Р, DIV. Как мы уже говорили ранее, они даже отделяются от других абзацными отступами.

Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.

Тег <address> – предназначен для хранения информации об авторе

Тег <blockquote> – Предназначен для выделения длинных цитат внутри документа.

Тег <center> – Выравнивает содержимое контейнера по центру относительно родительского элемента.

Тег <div> – Универсальный блочный элемент.

Тег <fieldset> – Предназначен для группирования элементов формы.

Тег <form> – Устанавливает форму на веб-странице.

Тег <h1> – Заголовок первого уровня.

Тег <h2> – Заголовок второго уровня.

Тег <h3> – Задает заголовок третьего уровня.

Тег <h4> – Задает заголовок четвертого уровня.

Тег <h5> – Задает заголовок пятого уровня.

Тег <h6> – Задает заголовок шестого уровня.

Тег <hr> – Рисует горизонтальную линию.

Тег <isindex> – Используется для поискового индекса в текущем документе.

Тег <menu> – Отображает список меню.

Тег <ol> – Устанавливает нумерованный список.

Тег <p> – Определяет текстовый абзац.

Тег <pre> – Определяет блок предварительно форматированного текста.

Тег <table> – Создает таблицу.

Тег <ul> – Устанавливает маркированный список.

Ширина и высота блока

Как Вы уже наверное заметили, по умолчанию высота и ширина блоков определяются автоматически, т.е. чем больше текста (или другого содержимого) тем шире и выше блок.

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

HEIGHT - свойство устанавливающее высоту блока;

WIDTH - свойство устанавливающее ширину блока;

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

Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задаётся свойством width, а высота через height; вокруг контента идут поля (padding), они создают пустое пространство от контента до внутреннего края границ; затем идут собственно сами границы (border) и завершают блок отступы (margin), невидимое пустое пространство от внешнего края границ.

 

 

Ширина блока это комплексная величина и складывается из нескольких значений свойств:

- width — ширина контента, т.е. содержимого блока;

- padding-left и padding-right — поле слева и справа от контента;

- border-left и border-right — толщина границы слева и справа;

- margin-left и margin-right — отступ слева и справа.

Если значение width не задано, то оно по умолчанию устанавливается как auto. В этом случае ширина блока будет занимать всю доступную ширину при сохранении значений полей, границ и отступов. Под доступной шириной в данном случае подразумевается ширина контента у родительского блока, а если родителя нет, то ширина контента браузера.

Visibility. Overflow

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

Синтаксис: visibility: visible | hidden | collapse | inherit

Значения

Visible – Отображает элемент как видимый.

Hidden – Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.

Collapse – Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer.

Inherit – Наследует значение родителя.

 

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

Синтаксис: overflow: auto | hidden | scroll | visible | inherit

Значения

Visible – Отображается все содержание элемента, даже за пределами установленной высоты и ширины.

Hidden – Отображается только область внутри элемента, остальное будет скрыто.

Scroll – Всегда добавляются полосы прокрутки.

Auto – Полосы прокрутки добавляются только при необходимости.

Inherit – Наследует значение родителя.

Табличная верстка: достоинства и недостатки

Преимущества таблиц

Таблицы довольно долго властвовали в области верстки, поскольку предлагали достаточно простые методы для размещения разных элементов на веб-странице при отсутствии явных конкурентов. Благодаря наличию большого числа параметров, особенно границе нулевой толщины, таблица выступает в роли невидимой модульной сетки, относительно которой добавляется текст, изображения и другие элементы. Удобство и широкие возможности верстки — вот основной реверанс в пользу таблиц. И на этом список не заканчивается, далее рассмотрены и другие плюсы таблиц.

Создание колонок

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

Резиновый» макет

Таблицы удачно подходят для «резинового» макета, ширина которого привязана к ширине окна браузера. Благодаря тому, что размер таблицы можно задавать в процентах, она занимает все отведенное ей свободное пространство. Также можно регулировать и высоту содержимого. Например, если текста немного, то «подвал» страницы может висеть в ее середине. Параметрами таблицы можно отрегулировать это так, что при небольшом тексте «подвал» плотно прилегает к нижнему краю окна браузера, независимо от размеров окна.

Склейка» изображений

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

Фоновые рисунки

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

Выравнивание элементов

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

Особенности браузеров

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

Недостатки таблиц

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

Долгая загрузка

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

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

Громоздкий код

Таблицы содержат сложную иерархическую структуру вложенных тегов, которая увеличивает объем кода, и повышает сложность изменения отдельных параметров. В некоторых случаях для достижения желаемого результата приходится вкладывать одну таблицу внутрь другой, а это также влияет на размер «шелухи», т.е. кода, который не принимает непосредственного участия в отображении веб-страницы.