{"id":748,"date":"2020-07-03T23:58:28","date_gmt":"2020-07-04T02:58:28","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=748"},"modified":"2022-12-09T08:22:27","modified_gmt":"2022-12-09T11:22:27","slug":"unidades-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/unidades-css\/","title":{"rendered":"Unidades CSS"},"content":{"rendered":"

CSS possui v\u00e1rias unidades diferentes para expressar um comprimento.<\/p>\n

Muitas propriedades CSS assumir valores “comprimento”, tais como width, margin, padding, font-size,<\/code> etc.<\/p>\n

Comprimento \u00e9 um n\u00famero seguido por uma unidade de comprimento, como 10px, 2em, etc.<\/p>\n

Um espa\u00e7o em branco n\u00e3o pode aparecer entre o n\u00famero e a unidade. No entanto, se o valor for 0, a unidade poder\u00e1 ser omitida.<\/p>\n

Para algumas propriedades CSS, comprimentos negativos s\u00e3o permitidos.<\/p>\n

Existem dois tipos de unidades de comprimento: absoluto e relativo.<\/p>\n

Comprimentos absolutos<\/strong>
\nAs unidades de comprimento absoluto s\u00e3o fixas e um comprimento expresso em qualquer uma dessas op\u00e7\u00f5es aparecer\u00e1 exatamente com esse tamanho.<\/p>\n

As unidades de comprimento absoluto n\u00e3o s\u00e3o recomendadas para uso na tela, porque os tamanhos das telas variam muito. No entanto, eles podem ser usados \u200b\u200bse a m\u00eddia de sa\u00edda for conhecida, como no layout de impress\u00e3o.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

* Pixels (px) s\u00e3o relativos ao dispositivo de visualiza\u00e7\u00e3o. Para dispositivos de baixa resolu\u00e7\u00e3o, 1 px \u00e9 um pixel de dispositivo (ponto) da tela. Para impressoras e telas de alta resolu\u00e7\u00e3o, 1px implica v\u00e1rios pixels do dispositivo.<\/p>\n

 <\/p>\n

Comprimentos relativos<\/strong>
\nAs unidades de comprimento relativo especificam um comprimento em rela\u00e7\u00e3o a outra propriedade de comprimento. As unidades de comprimento relativo escalam melhor entre diferentes meios de renderiza\u00e7\u00e3o.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Veja alguns exemplos<\/strong><\/p>\n

Cent\u00edmetros<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1 {font-size: 1.5cm;}\r\nh2 {font-size: 1cm;}\r\np {\r\n  font-size: 0.5cm;\r\n  line-height: 1cm;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>This is heading 1<\/h1>\r\n<h2>This is heading 2<\/h2>\r\n<p>This is a paragraph.<\/p>\r\n<p>This is another paragraph.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Mil\u00edmetros<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1 {font-size: 15mm;}\r\nh2 {font-size: 10mm;}\r\np {\r\n  font-size: 5mm;\r\n  line-height: 10mm;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>This is heading 1<\/h1>\r\n<h2>This is heading 2<\/h2>\r\n<p>This is a paragraph.<\/p>\r\n<p>This is another paragraph.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
In<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1 {font-size: 1in;}\r\nh2 {font-size: 0.5in;}\r\np {\r\n  font-size: 0.2in;\r\n  line-height: 0.5in;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>This is heading 1<\/h1>\r\n<h2>This is heading 2<\/h2>\r\n<p>This is a paragraph.<\/p>\r\n<p>This is another paragraph.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
px<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1 {font-size: 50px;}\r\nh2 {font-size: 30px;}\r\np {\r\n  font-size: 15px;\r\n  line-height: 20px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>This is heading 1<\/h1>\r\n<h2>This is heading 2<\/h2>\r\n<p>This is a paragraph.<\/p>\r\n<p>This is another paragraph.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
pt<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1 {font-size: 50pt;}\r\nh2 {font-size: 25pt;}\r\np {\r\n  font-size: 15pt;\r\n  line-height: 25pt;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>This is heading 1<\/h1>\r\n<h2>This is heading 2<\/h2>\r\n<p>This is a paragraph.<\/p>\r\n<p>This is another paragraph.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
pc<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1 {font-size: 4.5pc;}\r\nh2 {font-size: 3pc;}\r\np {\r\n  font-size: 1.5pc;\r\n  line-height: 3pc;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>This is heading 1<\/h1>\r\n<h2>This is heading 2<\/h2>\r\n<p>This is a paragraph.<\/p>\r\n<p>This is another paragraph.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
em<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np {\r\n  font-size: 16px;\r\n  line-height: 2em;\r\n}\r\n\r\ndiv {\r\n  font-size: 30px;\r\n  border: 1px solid black;\r\n}\r\n\r\nspan {\r\n  font-size: 0.5em;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>These paragraphs have a calculated line-height of: 2x16px = 32px.<\/p>\r\n<p>These paragraphs have a calculated line-height of: 2x16px = 32px.<\/p>\r\n<p>These paragraphs have a calculated line-height of: 2x16px = 32px.<\/p>\r\n<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 0.5em, which equals to 0.5x30 = 15px<\/span>.<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
ex<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ndiv {\r\n  font-size: 30px;\r\n  border: 1px solid black;\r\n}\r\n\r\nspan {\r\n  font-size: 1ex;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 1ex<\/span>.<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
ch<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody {\r\n  font-size:16px;\r\n}\r\n\r\ndiv {\r\n  font-size: 3ch;\r\n  border: 1px solid black;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>The font-size of this document is 16px.<\/p>\r\n\r\n<div>The font-size of this div element is 3ch.<\/div>\r\n\r\n<p>The ch unit sets the font-size relative to the width of the character \"0\".<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
rem<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nhtml {\r\n  font-size:16px;\r\n}\r\n\r\ndiv {\r\n  font-size: 3rem;\r\n  border: 1px solid black;\r\n}\r\n\r\n#top-div {\r\n  font-size: 2rem;\r\n  border: 1px solid red;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>The font-size of this document is 16px.<\/p>\r\n\r\n<div id=\"top-div\">\r\nThe font-size of this div element is 2rem, which translates to 2 x the browser's font size.\r\n<div>The font-size of this div element is 3rem. It also shows that it does not inherit from its parent element font size.<\/div>\r\n<\/div>\r\n\r\n<p>The rem unit sets the font-size relative to the browsers base font-size, and will not inherit from its parents.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
vw<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1 {\r\n  font-size: 20vw;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Hello<\/h1>\r\n\r\n<p>Resize the width of the browser window to see how the font-size of h1 changes.<\/p>\r\n<p>1vw = 1% of viewport width.<\/p>\r\n<p>The vw unit is not supported in IE8 and earlier.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
vh<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1 {\r\n  font-size: 20vh;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Hello<\/h1>\r\n\r\n<p>Resize the height of the browser window to see how the font-size of h1 changes.<\/p>\r\n<p>1vh = 1% of viewport height.<\/p>\r\n<p>The vh unit is not supported in IE8 and earlier.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
vmin<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1 {\r\n  font-size: 15vmin;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Hello<\/h1>\r\n\r\n<p>Resize the browser window (both width and height) to see how the font-size of h1 changes.<\/p>\r\n<p>1vmin = 1vw or 1vh, whichever is smaller.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
vmax<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1 {\r\n  font-size: 15vmax;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Hello<\/h1>\r\n\r\n<p>Resize the browser window (both width and height) to see how the font-size of h1 changes.<\/p>\r\n<p>1vmax = 1vw or 1vh, whichever is larger.<\/p>\r\n<p>The vmax unit is not supported in Edge 15 and earlier, nor in Safari 6.1 and earlier.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
%<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody {\r\n font-size:16px;\r\n}\r\n\r\ndiv {\r\n  font-size: 150%;\r\n  border: 1px solid black;\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>The font-size of this document is 16px.<\/p>\r\n\r\n<div>The font-size of this div element is 150%.<\/div>\r\n\r\n<p>The % unit sets the font-size relative to the current font-size.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n