{"id":58869,"date":"2025-12-31T13:05:23","date_gmt":"2025-12-31T12:05:23","guid":{"rendered":"https:\/\/www.carolinacampalans.com\/glossary\/lenguaje-de-hojas-de-estilo\/"},"modified":"2025-12-31T13:05:23","modified_gmt":"2025-12-31T12:05:23","slug":"lenguaje-de-hojas-de-estilo","status":"publish","type":"glosario","link":"https:\/\/www.carolinacampalans.com\/?glosario=lenguaje-de-hojas-de-estilo","title":{"rendered":"lenguaje de hojas de estilo"},"content":{"rendered":"
<\/div>

Un lenguaje inform\u00e1tico especializado que se utiliza para describir la presentaci\u00f3n y el formato de un documento que ya tiene una estructura definida (normalmente por un lenguaje de marcado).<\/p>\n<\/div>

\n<\/div><\/div><\/div><\/div><\/div>

Descripci\u00f3n<\/h2><\/div>

El objetivo fundamental del lenguaje de hojas de estilo es la separaci\u00f3n de incumbencias: el contenido y la estructura van por un lado y la est\u00e9tica por otro.<\/p>\n<\/div><\/div><\/div>

Funcionamiento<\/h3><\/div>

Imaginemos que tenemos delante un libro. La autora escribi\u00f3 el texto y decidi\u00f3 qu\u00e9 es un cap\u00edtulo y qu\u00e9 es una nota al pie (eso es el marcado). Luego, un dise\u00f1ador decidi\u00f3 que los t\u00edtulos de los cap\u00edtulos deb\u00edan ser rojos, en letra Arial y de tama\u00f1o 20 (eso es la hoja de estilo).<\/p>\n<\/div><\/div><\/div>

Componentes principales<\/h3><\/div>

Todos los lenguajes de este tipo comparten tres elementos b\u00e1sicos:<\/p>\n

<\/span>Selector<\/span><\/h4>\n

Indica a qu\u00e9 parte del documento se le va a aplicar el dise\u00f1o.<\/p>\n

<\/span>Propiedad<\/span><\/h4>\n

Qu\u00e9 aspecto se quiere cambiar (color, margen, fuente).<\/p>\n

<\/span>Valor<\/span><\/h4>\n

El ajuste espec\u00edfico (rojo, 10 p\u00edxeles, negrita).<\/p>\n<\/div><\/div><\/div><\/div><\/div>

Ejemplos<\/h2><\/div>

<\/i><\/i><\/span>CSS (Cascading Style Sheets)<\/span><\/a><\/h3><\/div>
\n

Es el est\u00e1ndar para p\u00e1ginas web (HTML) y gr\u00e1ficos vectoriales (SVG).<\/p>\n

<\/span>El concepto de \u00abcascada\u00bb<\/span><\/h4>\n

En estos lenguajes existe un orden de jerarqu\u00eda. Si una regla dice que el texto es azul y otra dice que es verde, el lenguaje tiene mecanismos para decidir cu\u00e1l gana (normalmente la m\u00e1s espec\u00edfica o la \u00faltima que se escribi\u00f3).<\/p>\n<\/div><\/div><\/div>

<\/i><\/i><\/span>DSSSL (Document Style Semantics and Specification Language)<\/span><\/a><\/h3><\/div>
\n

Un est\u00e1ndar antiguo para documentos t\u00e9cnicos complejos (SGML).<\/p>\n<\/div><\/div><\/div>

<\/i><\/i><\/span>Sass \/ Less<\/span><\/a><\/h3><\/div>
\n

Son \u00absuperlenguajes\u00bb que luego se convierten a CSS, permitiendo usar variables y funciones.<\/p>\n<\/div><\/div><\/div>

<\/i><\/i><\/span>XSL (Extensible Stylesheet Language)<\/span><\/a><\/h3><\/div>
\n

Se usa para transformar y dar formato a documentos XML.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>

Recursos adicionales<\/h2><\/div><\/div><\/div>

Recursos en l\u00ednea<\/h3><\/div>
<\/i><\/div>

W3 Schools<\/h4><\/a><\/div>
<\/div>
\n

Tutoriales para aprender lenguajes de programaci\u00f3n, lenguajes de marcado o lenguajes de hojas de estilo.<\/p>\n<\/div>

<\/div>w3schools.com<\/a>
<\/div><\/div><\/div>
<\/div><\/div><\/div><\/div><\/div><\/div>
<\/div><\/div><\/div><\/div><\/div><\/div>\n
<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"template":"","meta":{"inline_featured_image":false,"_vp_format_video_url":"","_vp_image_focal_point":[]},"glosario_categoria":[],"glosario_tag":[7091,7092,7014,7015],"class_list":["post-58869","glosario","type-glosario","status-publish","hentry","glosario_tag-desarrollo-web","glosario_tag-diseno-web","glosario_tag-informatica","glosario_tag-programacion"],"_links":{"self":[{"href":"https:\/\/www.carolinacampalans.com\/index.php?rest_route=\/wp\/v2\/glosario\/58869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.carolinacampalans.com\/index.php?rest_route=\/wp\/v2\/glosario"}],"about":[{"href":"https:\/\/www.carolinacampalans.com\/index.php?rest_route=\/wp\/v2\/types\/glosario"}],"wp:attachment":[{"href":"https:\/\/www.carolinacampalans.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=58869"}],"wp:term":[{"taxonomy":"glosario_categoria","embeddable":true,"href":"https:\/\/www.carolinacampalans.com\/index.php?rest_route=%2Fwp%2Fv2%2Fglosario_categoria&post=58869"},{"taxonomy":"glosario_tag","embeddable":true,"href":"https:\/\/www.carolinacampalans.com\/index.php?rest_route=%2Fwp%2Fv2%2Fglosario_tag&post=58869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}