Наука + Бизнес = $$$

Карта Сайта

Среда, 13.12.2017, 08:35
Приветствуем Вас Гость
Главное Меню
Помощь Сайту
Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:

Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139

Урок №7: единицы измерения в CSS

Единицы измерения в 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: Оформление ссылок


Форма входа
Поиск по сайту
Полезные Сайты
Счетчики
Счетчик PR-CY.Rank
Подписка на обновления
Ваш e-mail: *
Ваше имя: *
Контакты
PhantomX5 © 2014-2017Пишем нам: PhantomX5@mail.ru