Уроки CSS

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

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

В данном уроке вы познакомитесь с 4 основными видами – пиксель(px); пункт(pt); миллиметр(mm) и относительная единица измерения – процент(%).

Для наглядности создадим таблицу, в которой верхним ячейкам зададим длину - 50px; а нижним – 50pt.

<style>

#mytable {
border: 3px solid #EBE377;
background: #D9F3EC;
width: 350px;
}

table td.myst_1 {
background: #D6FFBB;
color: #06B5FF;
text-align: center;

height: 50px;
}


table td.myst_2 {
background: #FFC3BA;
color: #F6FFFF;
text-align: center;

height: 50pt;
}
</style>

<table id="mytable">
<tr>
<td class="myst_1">50 пикселей</td> 
<td class="myst_1">50 пикселей</td>
</tr>
<tr>
<td class="myst_2">50 пунктов</td> 
<td class="myst_2">50 пунктов</td>
</tr>
</table>

50 пикселей	50 пикселей
50 пунктов	50 пунктов

Теперь (для общего развития) сделаем два блока. С помощью селекторов одному из них зададим длину в миллиметров, а другому в процентах.

<style>
#my_dive_1 {
border: 2px solid #FFFFB2;
background: #F4CFA7;
text-align: center;
height: 50px;

width: 100mm;
}

#my_dive_2 {
border: 2px solid #EEE1FB;
background: #D2FBF5;
text-align: center;
height: 50px;

width: 50%;
}
</style>

<div id="my_dive_1">
100 миллиметров
</div>

<br>

<div id="my_dive_2">
50 процентов
</div>

◄ Предыдущий урок

Содержание

Следующий урок ►