{"id":1364,"date":"2024-08-01T19:16:01","date_gmt":"2024-08-01T17:16:01","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1364"},"modified":"2024-08-01T19:16:02","modified_gmt":"2024-08-01T17:16:02","slug":"51-unidades-en-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/51-unidades-en-css\/","title":{"rendered":"51. Unidades en CSS"},"content":{"rendered":"\n

CSS<\/strong> tiene varias unidades diferentes para expresar una longitud. Muchas propiedades CSS toman valores de \u00ablongitud\u00bb, como width<\/em><\/strong>, margin<\/em><\/strong>, padding<\/em><\/strong>, fontsize…<\/em><\/strong><\/p>\n\n\n\n\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

Establece distintos valores de longitud expresados en pixeles<\/p>\n\n\n\n

h1 {\n  font-size: 60px;\n}\n\np {\n  font-size: 25px;\n  line-height: 50px;\n}<\/pre>\n\n\n\n
\n
Nota<\/strong>: No puede aparecer un espacio en blanco entre el n\u00famero y la unidad. Sin embargo, si el valor es 0, se puede omitir la unidad.<\/p>\n<\/blockquote>\n\n\n\n
Para algunas propiedades de CSS, se permiten longitudes negativas. Hay dos tipos de unidades de longitud: absolutas<\/strong> y relativas<\/strong>.<\/p>\n\n\n\n
Longitudes absolutas<\/h2>\n\n\n\n
Las unidades de longitud absoluta<\/strong> son fijas y una longitud expresada en cualquiera de ellas aparecer\u00e1 exactamente como ese tama\u00f1o.<\/p>\n\n\n\n
Las unidades de longitud absoluta<\/strong> no se recomiendan para usar en pantalla, porque los tama\u00f1os de pantalla var\u00edan mucho. Sin embargo, se pueden utilizar si se conoce el medio de salida, por ejemplo, para el dise\u00f1o de impresi\u00f3n.<\/p>\n\n\n\n
Unidad<\/th>Descripci\u00f3n<\/th><\/tr>
cm<\/td>cent\u00edmetros<\/td><\/tr>
mm<\/td>mill\u00edmetros<\/td><\/tr>
in<\/td>inches (1in = 96px = 2.54cm)<\/td><\/tr>
px *<\/td>pixeles (1px = 1\/96th of 1in)<\/td><\/tr>
pt<\/td>points \/ puntos (1pt = 1\/72 of 1in)<\/td><\/tr>
pc<\/td>picas (1pc = 12 pt)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Longitudes relativas<\/h2>\n\n\n\n
Las unidades de longitud relativa<\/strong> especifican una longitud relativa a otra propiedad de longitud. Las unidades de longitud relativa<\/strong> escalan mejor entre diferentes medios de representaci\u00f3n.<\/p>\n\n\n\n
Unidad<\/th>Descripci\u00f3n<\/th> <\/th><\/tr>
em<\/td>Relativo al tama\u00f1o de fuente del elemento (2em significa 2 veces el tama\u00f1o de la fuente actual)<\/td><\/tr>
ex<\/td>En relaci\u00f3n con la altura x de la fuente actual (rara vez se usa)<\/td><\/tr>
ch<\/td>Relativo al ancho del \u00ab0\u00bb (cero)<\/td><\/tr>
rem<\/td>Relativa al tama\u00f1o de fuente del elemento ra\u00edz<\/td><\/tr>
vw<\/td>Relativa al 1% del ancho de la ventana gr\u00e1fica *<\/td><\/tr>
vh<\/td>Relativa al 1% de la altura de la ventana gr\u00e1fica *<\/td><\/tr>
vmin<\/td>Relativa al 1% de la dimensi\u00f3n m\u00e1s peque\u00f1a de la ventana gr\u00e1fica<\/td><\/tr>
vmax<\/td>Relativa al 1% de la dimensi\u00f3n m\u00e1s grande de la ventana gr\u00e1fica<\/td><\/tr>
%<\/td>Relativo al elemento padre<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
CSS tiene varias unidades diferentes para expresar una longitud. Muchas propiedades CSS toman valores de \u00ablongitud\u00bb, como width, margin, padding, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":50,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1364","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"CSS tiene varias unidades diferentes para expresar una longitud. Muchas propiedades CSS toman valores de \u00ablongitud\u00bb, como width, margin, padding, […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1364"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1364\/revisions"}],"predecessor-version":[{"id":1366,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1364\/revisions\/1366"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}