{"id":995,"date":"2023-06-20T11:40:00","date_gmt":"2023-06-20T11:40:00","guid":{"rendered":"https:\/\/www.appyweb.es\/diccionario\/?page_id=995"},"modified":"2024-03-21T11:45:08","modified_gmt":"2024-03-21T11:45:08","slug":"css","status":"publish","type":"page","link":"https:\/\/www.appyweb.es\/diccionario\/css\/","title":{"rendered":"CSS"},"content":{"rendered":"<h1 class=\"entry-title main_title\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11972\" src=\"https:\/\/www.appyweb.es\/diccionario\/wp-content\/uploads\/2024\/03\/css-300x180.jpg\" alt=\"css\" width=\"1140\" height=\"684\" srcset=\"https:\/\/www.appyweb.es\/diccionario\/wp-content\/uploads\/2024\/03\/css-300x180.jpg 300w, https:\/\/www.appyweb.es\/diccionario\/wp-content\/uploads\/2024\/03\/css-768x461.jpg 768w, https:\/\/www.appyweb.es\/diccionario\/wp-content\/uploads\/2024\/03\/css.jpg 1000w\" sizes=\"auto, (max-width: 1140px) 100vw, 1140px\" \/><\/h1>\n<div class=\"entry-content\">\n<p>Se trata de un lenguaje de programaci\u00f3n para dise\u00f1o gr\u00e1fico,\u00a0<strong>CSS permite la creaci\u00f3n de un documento basado en lenguaje de marcado<\/strong>\u00a0o etiquetas. Se utiliza m\u00e1s que nada para establecer el dise\u00f1o visual de un sitio web o interfaces escritas en c\u00f3digo HTML.<\/p>\n<h2><span id=\"%F0%9F%93%8C_%C2%BFQue_es_CSS\" class=\"ez-toc-section\"><\/span>\u00bfQu\u00e9 es CSS?<\/h2>\n<p>Son las siglas de\u00a0<em>Cascading Style Sheet<\/em>, en espa\u00f1ol se traduce como \u201chojas estilo cascada\u201d. Este tipo de programaci\u00f3n permite\u00a0<a href=\"https:\/\/www.appyweb.es\/diseno-web\/\">crear dise\u00f1os web altamente atractivos<\/a>\u00a0e intuitivos para el usuario. Gracias a su tecnolog\u00eda de separaci\u00f3n de contenido,\u00a0<strong>permite estructurar el texto de forma individual del c\u00f3digo<\/strong>, para indicar caracter\u00edsticas como las etiquetas de encabezado, los colores y las fuentes.<\/p>\n<p>Gracias a este sistema, el documento web puede contar con mayor flexibilidad y accesibilidad, incluso permite\u00a0<strong>crear diferentes documentos HTML con el mismo estilo<\/strong>\u00a0o la misma hoja de estilo. Una de sus funciones m\u00e1s importantes es que permite reducir la complejidad y la repetici\u00f3n constante del c\u00f3digo en la estructura.<\/p>\n<h2><span id=\"%F0%9F%93%8C_%C2%BFComo_funciona\" class=\"ez-toc-section\"><\/span>\u00bfC\u00f3mo funciona?<\/h2>\n<p>Como ya se mencion\u00f3 anteriormente, funciona a trav\u00e9s de la separaci\u00f3n del formato y del contenido, pero que forman parte de un mismo documento. De forma que se pueden utilizar diferentes estilos para diferentes m\u00e9todos de renderizado, por ejemplo, para ver la informaci\u00f3n en pantalla o a trav\u00e9s de un lector de voz.<\/p>\n<p>Igualmente, para hacer esto\u00a0<strong>se establece una estructura o una especificaci\u00f3n CSS<\/strong>\u00a0para determinar cu\u00e1les son las reglas del estilo, esto se hace a trav\u00e9s de un m\u00e9todo de prioridades en las cuales se calculan y se asignan las reglas espec\u00edficas, de forma que todos los resultados sean predecibles, a esto se le conoce como\u00a0<em>sistema cascada<\/em>.<\/p>\n<h2><span id=\"%F0%9F%93%8C_Ventajas_del_CSS\" class=\"ez-toc-section\"><\/span>Ventajas del CSS<\/h2>\n<ul>\n<li>Permite publicar contenido para diferentes formatos, seg\u00fan las preferencias del usuario, diferentes navegadores web, tipo de dispositivos, entre otros.<\/li>\n<li>Ayuda a los dise\u00f1adores a mantener una consistencia en el sitio, ya que puede utilizarse para aplicarlo a todas las p\u00e1ginas.<\/li>\n<li>Es ideal para reducir el ancho de banda, ya que se trata de\u00a0<strong>una hoja de estilo externa que guarda los datos en el cach\u00e9<\/strong>\u00a0del navegador.<\/li>\n<li>El formateo de la p\u00e1gina se realiza autom\u00e1ticamente, incluso si el cambio es una sola l\u00ednea, esto ofrece el beneficio de tener una mejor accesibilidad.<\/li>\n<li>Tambi\u00e9n\u00a0<a href=\"https:\/\/www.appyweb.es\/rediseno-web\/\">es ideal para hacer redise\u00f1os web<\/a>\u00a0con optimizaciones de sitio, como es el dise\u00f1o responsive.<\/li>\n<\/ul>\n<h2><span id=\"%F0%9F%93%8C_Ejemplo_de_CSS\" class=\"ez-toc-section\"><\/span>Ejemplo de CSS<\/h2>\n<p>En la siguiente imagen se puede visualizar un ejemplo de c\u00f3mo se escribe el c\u00f3digo CSS, como se puede notar, la estructura tiene una vista vertical donde el dise\u00f1ador puede adjuntar el t\u00edtulo, el estilo del texto, el color y la fuente en l\u00ednea diferentes. Esto tambi\u00e9n permite un orden de c\u00f3digo m\u00e1s f\u00e1cil de leer y editar.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2><span id=\"%F0%9F%93%8C_Mas_informacion_sobre_CSS\" class=\"ez-toc-section\"><\/span>M\u00e1s informaci\u00f3n sobre CSS<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.appyweb.es\/diccionario\/lenguaje-de-programacion\/\">\u00bfQu\u00e9 es el Lenguaje de programaci\u00f3n y para qu\u00e9 sirve?<\/a><\/li>\n<li><a href=\"https:\/\/es.wikipedia.org\/wiki\/Hoja_de_estilos_en_cascada#Niveles\" rel=\"nofollow noopener\" target=\"_blank\">Niveles de la cascada del CSS<\/a>.<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se trata de un lenguaje de programaci\u00f3n para dise\u00f1o gr\u00e1fico,\u00a0CSS permite la creaci\u00f3n de un documento basado en lenguaje de marcado\u00a0o etiquetas. Se utiliza m\u00e1s que nada para establecer el dise\u00f1o visual de un sitio web o interfaces escritas en c\u00f3digo HTML. \u00bfQu\u00e9 es CSS? Son las siglas de\u00a0Cascading Style Sheet, en espa\u00f1ol se traduce [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":11972,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-995","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/pages\/995","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/comments?post=995"}],"version-history":[{"count":5,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/pages\/995\/revisions"}],"predecessor-version":[{"id":11974,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/pages\/995\/revisions\/11974"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/media\/11972"}],"wp:attachment":[{"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/media?parent=995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}