Home » 2014 » Октомври » 6 » Урок №6 Мерни единици в CSS
3:29 AM
Урок №6 Мерни единици в CSS

 CSS - мерни единици

В CSS командите често се използват различни единици за размер, например за задаване размер на текста, междуредово разстояние, абсолютно позициониране на текст или изображение и т.н. Преди да продължим с подробно описание на отделните CSS команди, нека разгледаме какви мерни единици може да се използват.

Абсолютни единици

Размер или разстояние, зададени с абсолютни мерни единици, не зависят от избраната големина на шрифта.

  • mm - милиметър
  • cm - сантиметър
  • in - инч(inch), приблизително 2.56 сантиметра
  • pt - point, 1/72 от инча
  • pc - pica, равна на 12 points

Относителни единици

Браузърите позволяват на потребителите да променят размера на текста на интернет страниците. Ако за позициониране на някой елемент (например снимка) са използвани абсолютни единици, има голяма вероятност при смяна големината на текста елементът да се окаже на неочаквано място в страницата. За да се предотврати подобно нарушаване на дизайна на страниците, е удобно да се използват относителни единици.

  • px - pixel, една точка (пиксел) на компютърния екран. Абсолютният размер зависи от разделителната способност на монитора, на който е показана интернет страницата.
  • em - 1em винаги е равно на големината на използвания в момента шрифт за дадения елемент. Размерът на текста по подразбиране в браузърите е 16 px и следователно, ако не е указано нещо друго, за текста на страниците 1em=16 px.
  • Понеже em е относителна единица, ако настоящия шрифт за заглавие h1 е примерно 18 px, то междуредово разстояние, зададено с

h1{ line-height: 0.5em}

  • ще отговаря на 9px , а ако размерът за h1 бъде сменен на 24px, 0.5em вече ще бъде 12px.
  • ex - подобно на em, ex зависи от големината на избрания шрифт и е равно на големината на малката буква x (екс).

Проценти

Стойност, зададена с процент, %, може да има съвсем различно измерение - каква ще бъде конкретната стойност зависи от контекста.

Ако имате затруднения или въпроси по темата или просто искате да допълните нещо моля направете го в коментарите след урока!

Категория: CSS | Преглеждания: 683 | Довавено от: knif3r | Оценка: 5.0 | Гласували :2 | Tags: PT, урок, mm, cm, 12, Urok, px, Point, pixel, Мерни единици

Ако урокът ви е харесал можете да го споделите с вашите приятели във фейсбук :
Всички коментари: 0
avatar
Социални Мрежи

PC-Tools.inc | Copyright © 2014-2015
DMCA.com Protection Status Mozilla Firefox+4.0 Chrome+13.2 Opera+5.6 IE+7.9 Safari+2.0