{"id":7708,"date":"2022-04-09T14:04:53","date_gmt":"2022-04-09T14:04:53","guid":{"rendered":"https:\/\/conceptoabc.com\/?p=7708"},"modified":"2022-07-09T11:52:31","modified_gmt":"2022-07-09T11:52:31","slug":"css","status":"publish","type":"post","link":"https:\/\/conceptoabc.com\/css\/","title":{"rendered":"CSS"},"content":{"rendered":"<p><strong>CSS<\/strong> son las siglas en ingl\u00e9s que corresponden a \u201cHojas de Estilo en Cascada\u201d <strong>Cascading Style Sheets<\/strong>, que <strong>se refiere a un lenguaje de programaci\u00f3n<\/strong>. Este se encarga del <strong>dise\u00f1o y la apariencia<\/strong> que tendr\u00e1 un sitio web, es decir, como lo ver\u00e1n los usuarios.<\/p>\n<p>Se trata de una <strong>tecnolog\u00eda aprovechada por diversos sitios de internet para crear p\u00e1ginas y aplicaciones<\/strong> visualmente atractivas e interfaces de usuario escritas en HTML o XHTML. Puede ser aplicado a cualquier documento XML, incluyendo XHTML, RSS, XUL y abarca opciones relativas al color, la forma de la letra, fuentes, m\u00e1rgenes, ancho, l\u00edneas y m\u00e1s.<\/p>\n<p>Las hojas de estilos <strong>existen desde la d\u00e9cada de los 80<\/strong> y CSS fue dise\u00f1ada para suministrarlas a la web. Fue propuesto inicialmente por H\u00e5kon Wium Lie en octubre de 1994, pero al estar entre muchos otros lenguajes de hojas de estilo dio lugar a varias discusiones. Finalmente, en 1996 fue recomendado por el W3C debido a la influencia de Bert Bos quien es coautor y cocreador de CSS.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_24 counter-hierarchy counter-decimal ez-toc-grey\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Tabla de contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" style=\"display: none;\"><i class=\"ez-toc-glyphicon ez-toc-icon-toggle\"><\/i><\/a><\/span><\/div>\n<nav><ul class=\"ez-toc-list ez-toc-list-level-1\"><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/conceptoabc.com\/css\/#Funcionamiento_basico\" title=\"Funcionamiento b\u00e1sico\">Funcionamiento b\u00e1sico<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/conceptoabc.com\/css\/#Sintaxis\" title=\"Sintaxis\">Sintaxis<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/conceptoabc.com\/css\/#Selectores\" title=\"Selectores\">Selectores<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/conceptoabc.com\/css\/#Declaraciones\" title=\"Declaraciones\">Declaraciones<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/conceptoabc.com\/css\/#Versiones\" title=\"Versiones\">Versiones<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/conceptoabc.com\/css\/#Ventajas\" title=\"Ventajas\">Ventajas<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/conceptoabc.com\/css\/#Referencias\" title=\"Referencias\">Referencias<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Funcionamiento_basico\"><\/span>Funcionamiento b\u00e1sico<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CSS <strong>funciona como un mecanismo complementario de HTML<\/strong>, ya que permite indicarle al navegador el estilo que debe poseer al mostrar la informaci\u00f3n. Por ejemplo, HTML le indica qu\u00e9 parte es un subt\u00edtulo, enlace o p\u00e1rrafo y CSS le se\u00f1ala el color, fuente, el tama\u00f1o, la alineaci\u00f3n y los aspectos est\u00e9ticos que debe poseer.<\/p>\n<p>Ha evolucionado con el avance de internet, pues con la diversificaci\u00f3n de los buscadores fue necesario estandarizar los comandos. Por tal raz\u00f3n, el <strong>World Wide Web Consortium<\/strong> o W3C, en un esfuerzo por garantizar variedad y satisfacer la demanda de los dise\u00f1adores, lo recomend\u00f3.<\/p>\n<p><img loading=\"lazy\" loading=\"lazy\" class=\"size-medium wp-image-7911 aligncenter\" src=\"https:\/\/conceptoabc.com\/wp-content\/uploads\/2022\/03\/Funcionamiento-1-300x200.png\" alt=\"Funcionamiento\" width=\"300\" height=\"200\" srcset=\"https:\/\/conceptoabc.com\/wp-content\/uploads\/2022\/03\/Funcionamiento-1-300x200.png 300w, https:\/\/conceptoabc.com\/wp-content\/uploads\/2022\/03\/Funcionamiento-1.png 450w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Por otra parte, <strong>funciona con Javascript para potenciar las funciones que se aplican a las webs<\/strong>. Un ejemplo de ello es el cambio del color de los v\u00ednculos o links una vez que ya fue visitado, ayuda a crear elementos interactivos, dise\u00f1ar men\u00fas y todo un mundo donde la creatividad es la mayor ayudante.<\/p>\n<p><strong>Es un lenguaje ampliamente utilizado para dar formato a sitios webs<\/strong>, por ello se puede decir que es universal. Gracias a esta caracter\u00edstica se puede emplear en Edge, Safari, Chrome, entre otros y darle el estilo que requiere el usuario.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Sintaxis\"><\/span>Sintaxis<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>CSS tiene una sintaxis que emplea palabras claves en ingl\u00e9s<\/strong> para especificar las propiedades del estilo y es muy f\u00e1cil de usar. Sin embargo, posee una serie de reglas que a su vez tienen selectores y declaraciones. Una estructura b\u00e1sica comprende:<\/p>\n<p><img loading=\"lazy\" loading=\"lazy\" class=\"size-medium wp-image-7712 aligncenter\" src=\"https:\/\/conceptoabc.com\/wp-content\/uploads\/2022\/03\/Sintaxi-300x150.png\" alt=\"Sintaxi\" width=\"300\" height=\"150\" srcset=\"https:\/\/conceptoabc.com\/wp-content\/uploads\/2022\/03\/Sintaxi-300x150.png 300w, https:\/\/conceptoabc.com\/wp-content\/uploads\/2022\/03\/Sintaxi.png 600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Selectores\"><\/span>Selectores<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>En esta categor\u00eda de la estructura se aplican estilos que coincidan con la etiqueta o el atributo se\u00f1alado. Dentro de los selectores se pueden se\u00f1alar los siguientes:<\/p>\n<ul>\n<li><strong>Universal<\/strong>: Es el que se utiliza para todos los elementos de la p\u00e1gina, por ejemplo colocar el margen de la web.<\/li>\n<li><strong>De etiqueta<\/strong>: Este selector distingue los elementos del HTML cuya etiqueta combine con el valor del selector. Por ejemplo, h1{color: blue;} p: {color: black }, lo que indica que los t\u00edtulos de la p\u00e1gina estar\u00e1n en color azul y el p\u00e1rrafo en color negro.<\/li>\n<li><strong>Descendente<\/strong>: Se trata de a\u00f1adir una caracter\u00edstica a un elemento cuando se encuentra entre las etiquetas de apertura y cierre. Por ejemplo, &lt;p&gt;&lt;div&gt;&lt;span&gt;Texto span&lt;\/span&gt;&lt;\/div&gt;&lt;p&gt;.<\/li>\n<li><strong>Atributos<\/strong>: Este selector permite elegir elementos HTML en funci\u00f3n de sus propiedades. Un ejemplo es [type=\u201dtext\u201d] {width: 120px; }, lo que indica que en formato de tipo texto se aplicar\u00e1 un ancho de 120 px.<\/li>\n<li><strong>Selector de ID<\/strong>: Es el encargado de definir estilos sobre un elemento y se caracteriza por la necesidad de anteponer el signo numeral. Por ejemplo, #idelemento{ text- align: center; color: blue; }, lo que indica que los textos HTML con el atributo id estar\u00e1n centrados y ser\u00e1n de color azul.<\/li>\n<\/ul>\n<p>Existen otros selectores que le permiten dar mayor calidad visual a la p\u00e1gina web. Estos se pueden incluir en el documento de manera interna, externa o entre l\u00edneas.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Declaraciones\"><\/span>Declaraciones<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Las declaraciones en la sintaxis se refieren a una lista unida.<\/strong> Cada declaraci\u00f3n consiste en una propiedad, dos puntos (:), y un valor. En caso de que haya muchas declaraciones en un bloque, estas se separan con punto y coma (;).<\/p>\n<p>Las propiedades <strong>tienen un conjunto de posibles valores <\/strong>que afectan a un elemento o a un grupo particular de elementos. Por su parte, el valor puede estar compuesto por una palabra clave, por ejemplo center, o un n\u00famero, por ejemplo, 150px (150 p\u00edxeles).<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Versiones\"><\/span>Versiones<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>CSS se ha creado en perfiles y niveles<\/strong>, donde cada uno se construye sobre el anterior, incorporando nuevas funciones y potenciando su capacidad. Las versiones que se manejan son:<\/p>\n<p><img loading=\"lazy\" loading=\"lazy\" class=\"size-medium wp-image-7711 aligncenter\" src=\"https:\/\/conceptoabc.com\/wp-content\/uploads\/2022\/03\/Versiones-300x168.png\" alt=\"Versiones\" width=\"300\" height=\"168\" srcset=\"https:\/\/conceptoabc.com\/wp-content\/uploads\/2022\/03\/Versiones-300x168.png 300w, https:\/\/conceptoabc.com\/wp-content\/uploads\/2022\/03\/Versiones.png 600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<ul>\n<li><strong>CSS1:<\/strong> Es la primera versi\u00f3n y estuvo disponible desde el a\u00f1o 1995 hasta el 2008. Esta incluye funciones de fuente, color y atributo de texto, alineaci\u00f3n, propiedades de caja, presentaci\u00f3n de listas e identificaci\u00f3n.<\/li>\n<li><strong>CSS2:<\/strong> Apareci\u00f3 en el a\u00f1o 1998 e inclu\u00eda mejoras en la programaci\u00f3n. Se incluye funcionalidades de capa, el concepto de \"media types\", sombras, texto bidireccional, soporte para audio, entre otras. Tuvo una versi\u00f3n 2.1 que corrigi\u00f3 algunos errores de la versi\u00f3n original.<\/li>\n<li><strong>CSS3:<\/strong> Es la versi\u00f3n que se emplea en la actualidad desde el a\u00f1o 2011 y es la m\u00e1s completa. Est\u00e1 dividida en m\u00f3dulos que a\u00f1aden funcionalidades distintivas de manera que sea compatible con las anteriores.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Ventajas\"><\/span>Ventajas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El aspecto est\u00e9tico de una web est\u00e1 muy relacionado con la forma en c\u00f3mo se transmite un mensaje y la usabilidad de una plataforma. Por ello, al implementar CSS puedes disfrutar de los siguientes beneficios:<\/p>\n<p><img loading=\"lazy\" loading=\"lazy\" class=\"size-medium wp-image-7912 aligncenter\" src=\"https:\/\/conceptoabc.com\/wp-content\/uploads\/2022\/04\/Ventaja-300x180.png\" alt=\"Ventaja\" width=\"300\" height=\"180\" srcset=\"https:\/\/conceptoabc.com\/wp-content\/uploads\/2022\/04\/Ventaja-300x180.png 300w, https:\/\/conceptoabc.com\/wp-content\/uploads\/2022\/04\/Ventaja.png 500w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>Facilita la edici\u00f3n<\/strong>: En la mayor\u00eda de las p\u00e1ginas se administra gran cantidad de informaci\u00f3n, lo que puede ser complejo si no se posee herramientas adecuadas. CSS crea estilos ajustados a las necesidades del usuario y ahorra tiempo.<\/li>\n<li><strong>Brinda consistencia a la web<\/strong>: Al emplear la hoja de estilo cascada en forma correcta, se puede aplicar un estilo a la web y en caso de modificaci\u00f3n, solo se cambia la regla. Es mucho m\u00e1s sencillo y econ\u00f3mico.<\/li>\n<li><strong>Accesibilidad:<\/strong> Posee hojas de estilos estandarizadas que es accesible a todo tipo de usuario, buscador o dispositivo. La aplicaci\u00f3n de los cambios es eficaz en m\u00f3viles, PC o laptops.<\/li>\n<li><strong>Estimula la creatividad<\/strong>: Debido a la amplia gama de funciones, el uso de CSS permite a los dise\u00f1adores crear obras de arte digitales de manera r\u00e1pida y sencilla. Sin duda, simplifica las labores.<\/li>\n<\/ul>\n<p>Adem\u00e1s, a diferencia de otros lenguajes, <strong>CSS emplea menos c\u00f3digos<\/strong>, por lo que se puede aplicar en diversas webs. Esto se traduce en archivos peque\u00f1os y en menor tiempo de carga, optimizando el rendimiento.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Referencias\"><\/span>Referencias<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>Introducci\u00f3n a CSS y sintaxis b\u00e1sica. Curr\u00edculos exploratorios. website: <a href=\"http:\/\/contenidos.sucerman.com\/nivel3\/web2\/unidad3\/leccion1.html\" rel=\"nofollow noopener\" target=\"_blank\">http:\/\/contenidos.sucerman.com\/nivel3\/web2\/unidad3\/leccion1.html<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>CSS son las siglas en ingl\u00e9s que corresponden a \u201cHojas de Estilo&hellip;<\/p>\n","protected":false},"author":13,"featured_media":7709,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[33],"tags":[],"_links":{"self":[{"href":"https:\/\/conceptoabc.com\/wp-json\/wp\/v2\/posts\/7708"}],"collection":[{"href":"https:\/\/conceptoabc.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/conceptoabc.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/conceptoabc.com\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/conceptoabc.com\/wp-json\/wp\/v2\/comments?post=7708"}],"version-history":[{"count":6,"href":"https:\/\/conceptoabc.com\/wp-json\/wp\/v2\/posts\/7708\/revisions"}],"predecessor-version":[{"id":10118,"href":"https:\/\/conceptoabc.com\/wp-json\/wp\/v2\/posts\/7708\/revisions\/10118"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/conceptoabc.com\/wp-json\/wp\/v2\/media\/7709"}],"wp:attachment":[{"href":"https:\/\/conceptoabc.com\/wp-json\/wp\/v2\/media?parent=7708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/conceptoabc.com\/wp-json\/wp\/v2\/categories?post=7708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/conceptoabc.com\/wp-json\/wp\/v2\/tags?post=7708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}