Рубрика: Веб-разработка » CSS »

Задание размеров в CSS

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

Единицы измерения

Абсолютные единицы измерения задают точный размер, а относительные - размер
относительно другого размера.

Абсолютные единицы измерения
inдюймы (1 дюйм = 2.54 см = 25.4 мм = 72 точки = 6 пик)
cmсантиметры (1 см = 10 мм = 0.39 дюйма = 2.36 пики = 28.35 точки)
mmмиллиметры (1 мм = 0.1 см = 0.039 дюйма = 0.24 пики = 2.84 точки)
ptпункты (1 пункт = 1/12 пики = 1/72 дюйма = 0.035 см = 0.35 мм)
pcпики (1 пика = 12 пунктов = 1/6 дюйма = 0.423 см = 4.23 мм)
Относительные единицы измерения
emразмер применяемого  шрифта (размер большой буквы 'M')
exвысота строчных букв применяемого  шрифта (высота буквы 'x', x-height)
pxпикселы (зависит от размеров и разpешения экрана: разрешение экpана 1024х768 означает, что на экране располагается 1024 пикселов по гоpизонтали и 768 пикселов по веpтикали. Чем больше разрешение, тем меньше фактические размеры пиксела.)

Например:

H1 {
  margin: 0.5em;
  text-indent: 1ex;
  font-size: 16px;
}
H2 {
  margin: 0.5in;
  line-height: 3cm;
  word-spacing: 4mm;
  font-size: 1pc;
}

Пример задания размера в процентах:

H1 { font-size: 120% }

Размер шрифта

Синтаксис:
font-size: xx-small | x-small | small | medium | large | x-large |
                          xx-large | larger | smaller | <размер> | <процент>

По умолчанию: medium

xx-small | x-small | small | medium | large | x-large | xx-large
абсолютный размер шрифта (от наименьшего к наибольшему)
smaller | larger
размер шрифта относительно родительского шрифта (меньше | больше)
<размер>
фиксированный размер (отрицательные значения недопустимы)
<процент>
относительно размера родительского шрифта

Пример:

xx-small
x-small
small
medium
large
x-large
xx-large

Опубликовано в рубрике CSS | с метками . |

Еще записи

Один комментарий на «Задание размеров в CSS»

  1. Legioner говорит:

    Xорошо рассказано 🙂

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *