Уроки 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>
100 миллиметров
50 процентов
◄ Предыдущий урок | Содержание | Следующий урок ► |