Студия веб-разработки


Личный кабинет

Имя

Пароль

Запомнить меня


Забыли пароль?
Зарегистрироваться
Для задания размеров различных
элементов, в CSS используются абсолютные и относительные единицы
измерения. Абсолютные единицы не зависят от устройства вывода, а
относительные единицы определяют размер элемента относительно
значения другого размера.


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

align=center border=1>














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



Практически все браузеры вычисляют значение class=element>ex как удвоенное em.
Возможно это и резонное приближение, но технически неверное.


border=0>



Пример 1. Использование относительных единиц


cellPadding=4 width="100%" border=1>



<html>
<head>

<style>
.em, .ex, .px, .percent {
font-family: Verdana, Arial, sans-serif }
.em {
font-size: 2em }
.ex { font-size: 4ex }
.px {
font-size: 30px }
.percent { font-size: 200%
}
</style>


<body>
<span class=em>Размер в
em</span>
<span class=ex>Размер в
ex</span>
<span class=px>Размер в
пикселях</span>
<span
class=percent>Размер в процентах</span>

</body>
</html>








.em {
FONT-FAMILY: Verdana, Arial, sans-serif
}
.ex {
FONT-FAMILY: Verdana, Arial, sans-serif
}
.px {
FONT-FAMILY: Verdana, Arial, sans-serif
}
.percent {
FONT-FAMILY: Verdana, Arial, sans-serif
}
.em {
FONT-SIZE: 2em
}
.ex {
FONT-SIZE: 4ex
}
.px {
FONT-SIZE: 30px
}
.percent {
FONT-SIZE: 200%
}

Размер текстов получился примерно одинаковым, но единицы измерения
использовались различные.

align=center border=1>

Размер в em
class=ex>Размер в ex
Размер в
пикселях
Размер в
процентах



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


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

align=center border=1>

















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



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

border=0>



Пример 2. Использование абсолютных единиц


cellPadding=4 width="100%" border=1>



<html>
<head>

<style>
.in, .mm, .pt { font-family:
Verdana, Arial, sans-serif }
.in { font-size: 0.5in
}
.mm { font-size: 8mm }
.pt { font-size: 24pt
}
</style>


<body>
<span class=in>Размер в
дюймах</span>
<span class=mm>Размер в
миллиметрах</span>
<span class=pt>Размер
в
пунктах</span>
</body>
</html>







.in {
FONT-FAMILY: Verdana, Arial, sans-serif
}
.mm {
FONT-FAMILY: Verdana, Arial, sans-serif
}
.pt {
FONT-FAMILY: Verdana, Arial, sans-serif
}
.in {
FONT-SIZE: 0.5in
}
.mm {
FONT-SIZE: 8mm
}
.pt {
FONT-SIZE: 24pt
}

Результат использования абсолютных единиц измерения показан
ниже.

align=center border=1>

Размер в
дюймах
Размер в
миллиметрах
Размер в
пунктах



Примечание
Если размеры шрифта на странице заданы в
абсолютных единицах, то в опциях браузера эту величину изменить
нельзя. Поэтому, размер шрифтов лучше задавать в процентах, что
позволит делать их больше или меньше подбирая подходящий для
комфортного чтения.
Комментарии: (0)   Рейтинг:   Версия для печати
Быстрый переход
  • Услуги
  • Разработка сайтов
  • Дизайн
  • Продвижение
  • Консультация
  • Портфолио
  • Вопросы и ответы
  • Информация
  • Стоимость услуг
  • Сроки выполнения
  • Гарантии
  • Порядок оплаты
  • Порядок работ
  • Разработка сайтов
  • Поддержка и продвижение
  • Дизайн
  • О нас
  • Контакты