Урок №7: единицы измерения в CSS
Для управления размером различных элементов, в таблицах стилей CSS используются относительные и абсолютные единицы измерения. Относительное единицы задают размер определенного элемента относительно размера другого элемента. Абсолютные единицы измерения не зависят от устройства вывода и задаются независимо от размеров других элементов.
В HTML существует всего два способа задать размер элемента. С помощью пикселей, например: <table width="600"> или с помощью процентов, например <table width="100%">. В CSS намного больше единиц измерения, и все же, в основном используют также пикселы, проценты и иногда величину em, которые и относятся к относительным величинам.
Относительные единицы измерения
Такие величины в основном используют для управления размером текста, или когда необходимо вычислить процентное соотношение элементов. Размер относительных величин зависит от других величин. Рассмотрим значения относительных величин в CSS более детально.
- px - пиксел, относительная единица длины и элементарная точка, которая отображается монитором или другим подобным устройством. Также стоит заметить, с недавних пор "CSS-ные" пиксели считают абсолютной единицей (физический пиксел не всегда соответствует пикселу в CSS).
- % - процент, очень удобная величина при работе с блоками, таблицами и другими элементами. В случае с текстом, задается процент от исходного текста.
- em - относительная величина, которая отвечает за высоту текущего элемента. Например 1em - это размер шрифта, который задан для браузера по умолчанию.
- ex - относительная величина, определяется как высота символа "x" в нижнем регистре. Работает аналогично величине em
Используем все относительные единицы измерения CSS на практике, зададим в наш css документ такие свойства:
.em, .ex, .px, .percent { font-family: Verdana, Arial;}
.em { font-size: 2em; }
.ex { font-size: 2ex; }
.px { font-size: 30px; }
.proc { font-size: 200%; }
Теперь используем заданные свойства css в HTML документе. Пишем код и смотрим результат. <p class="em">Размер 2 em</p>
<p class="ex">Размер 2 ex</p>
<p class="px">Размер 30 пикселов</p>
<p class="proc">Размер 200%</p>
Для сравнения можете подставить свои значения.
Абсолютные единицы измерения
Значительно реже применяются абсолютные единицы измерения. В основном их применяют при работе с текстом. Абсолютные величины не зависят от других элементов и обладают реальной величиной.
- in - задает значение в дюймах (1 дюйм равен 2,54 сантиметров)
- cm - задает значение в сантиметрах
- mm - задает значение в миллиметрах
- pt - задает значение в пунктах (1 пункт равен 1/72 дюйма)
- pc - задает значение в пиках (1 пика равна 12 пунктам)
Задаются абсолютные единицы аналогично относительным, для примера вставьте следующий код в HTML документ
<p> Абсолютные единицы! </p>
<p style="font-size: 5mm;"> 5 Миллиметров. </p>
<p style="font-size: 1cm;"> 1 сантиметр. </p>
<p style="font-size: 0.5in;"> Пол дюйма. </p>
<p style="font-size: 14pt;"> 14 пунктов - 14 шрифт. </p>
<p style="font-size: 1pc;"> 1 пика - 12 пунктов. </p>
Очевидно, что все эти величины не придется использовать, вполне хватит (px,em,%), однако для расшифровки css документов эти знания могут оказаться полезными.
Далее рассмотрим ссылки и их оформление с помощью CSS: Оформление ссылок
|
R598551293139
