{"id":2468,"date":"2016-09-02T14:46:17","date_gmt":"2016-09-02T12:46:17","guid":{"rendered":"http:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/?p=2468"},"modified":"2016-09-02T14:46:17","modified_gmt":"2016-09-02T12:46:17","slug":"estilos-css-web","status":"publish","type":"post","link":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web","title":{"rendered":"\u00bfQu\u00e9 son los estilos CSS y c\u00f3mo afectan a mi web?"},"content":{"rendered":"<p style=\"text-align: justify;\">Para todos aquellos que est\u00e9n familiarizados con el dise\u00f1o y desarrollo web no les ser\u00e1n desconocidas las siglas CSS (Cascading Style Sheets) pero qu\u00e9 son realmente estas hojas de estilo y lo m\u00e1s importante c\u00f3mo afectan a las web que se crean en la actualidad, son preguntas a las que intentaremos dar respuesta a lo largo de la siguiente entrada.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/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-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web\/#%C2%BFQue_es_una_hoja_de_estilo_CSS\" title=\"\u00bfQu\u00e9 es una hoja de estilo CSS?\">\u00bfQu\u00e9 es una hoja de estilo CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web\/#%C2%BFComo_funcionan\" title=\"\u00bfC\u00f3mo funcionan?\">\u00bfC\u00f3mo funcionan?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web\/#Tipos_de_hojas_de_estilo_CSS\" title=\"Tipos de hojas de estilo CSS\">Tipos de hojas de estilo CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web\/#%C2%BFComo_afecta_a_mi_web_el_uso_de_las_hojas_de_estilo\" title=\"\u00bfC\u00f3mo afecta a mi web el uso de las hojas de estilo?\">\u00bfC\u00f3mo afecta a mi web el uso de las hojas de estilo?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web\/#CSS3_y_el_diseno_web_responsive\" title=\"CSS3 y el dise\u00f1o web responsive\">CSS3 y el dise\u00f1o web responsive<\/a><\/li><\/ul><\/nav><\/div>\n<h3 style=\"text-align: left;\"><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_una_hoja_de_estilo_CSS\"><\/span><span style=\"font-size: 16pt; color: #333333;\">\u00bfQu\u00e9 es una hoja de estilo CSS?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\">Las hojas de estilo en cascada o CSS, son un simple mecanismo que describe c\u00f3mo se va a mostrar un documento en la pantalla, c\u00f3mo se va a imprimir o incluso c\u00f3mo se debe llevar a cabo su lectura desde dispositivos habilitados para ello. Es decir, son l\u00edneas de c\u00f3digo HTML o XML que est\u00e1n orientadas a darle un estilo espec\u00edfico a los elementos de un documento HTML, las utilizaremos para personalizar nuestra web (colores, backgrounds, fuentes, enlaces\u2026) con la finalidad de mantener limpio y estructurado el c\u00f3digo fuente sin carga de c\u00f3digo que dificulte su lectura o modificaci\u00f3n.<\/p>\n<p style=\"text-align: justify;\">Las especificaciones de las hojas de estilo han sido creadas por <a href=\"https:\/\/www.w3c.es\/\">W3C<\/a> (World Wide Web consortium), organizaci\u00f3n encargada de definir todos los est\u00e1ndares de la web y creada en 1994 por <a href=\"https:\/\/es.wikipedia.org\/wiki\/Tim_Berners-Lee\">Tim Berners Lee<\/a>, con la finalidad de validar el c\u00f3digo en HTML y conseguir un buen posicionamiento en buscadores. Asimismo define los est\u00e1ndares que un sitio web debe seguir para alcanzar un <strong>dise\u00f1o responsive<\/strong>.<\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"%C2%BFComo_funcionan\"><\/span><span style=\"font-size: 16pt; color: #333333;\">\u00bfC\u00f3mo funcionan?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\">Como ya hemos comentando CSS se usan para dar estilo a documentos HTML y XML, separando lo que es el contenido propiamente dicho de la presentaci\u00f3n del mismo. CSS permitir\u00e1 a los desarrolladores controlar el estilo y el formato de m\u00faltiples p\u00e1ginas Web al mismo tiempo, como se indica en W3C, \u201c<em>cualquier cambio en el estilo marcado para un elemento en la CSS afectar\u00e1 a todas las p\u00e1ginas vinculadas a esa CSS en las que aparezca ese elemento\u201d.<\/em><\/p>\n<p style=\"text-align: justify;\">Hasta la aparici\u00f3n de las hojas de estilo, los desarrolladores web deb\u00edan revisar todo el c\u00f3digo HTML de cada una de las p\u00e1ginas en las que quer\u00edan modificar, por peque\u00f1a fuera, la presentaci\u00f3n de un determinado elemento, lo que conllevaba entre otras cosas una gran p\u00e9rdida de tiempo y costes. Con el nacimiento de CSS, desaparecen las decenas de l\u00edneas repetitivas en el c\u00f3digo fuente, necesarias para darle estilo a una determinada etiqueta.<\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Tipos_de_hojas_de_estilo_CSS\"><\/span><span style=\"font-size: 16pt; color: #333333;\">Tipos de hojas de estilo CSS<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\">Existen tres tipos diferentes de hojas de estilo:<\/p>\n<ul style=\"text-align: justify;\">\n<li><strong>Externas: <\/strong>Est\u00e1n definidas en un documento aparte con extensi\u00f3n .css y que se vincula mediante la etiqueta &lt;link&gt; en la secci\u00f3n &lt;head&gt; del documento html.<\/li>\n<li><strong>Internas: <\/strong>Se definen en el interior del documento al que se quiere dar estilo utilizando el elemento &lt;style&gt; dentro de la secci\u00f3n &lt;head&gt;, de manera que los estilos sean reconocidos antes de que la p\u00e1gina se cargue por completo.<\/li>\n<li><strong>Inline: <\/strong>Se define el estilo directamente sobre aquellos elementos que lo permiten a trav\u00e9s del atributo &lt;style&gt; y dentro de &lt;body&gt;. En este caso se perder\u00eda la ventaja que ofrecen los otros tipos de CSS, de hacer un c\u00f3digo reutilizable y limpio.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Pero hablar de CSS no es simplemente comprender el manejo de colores, im\u00e1genes y transparencias para montar y estructurar p\u00e1ginas web, va m\u00e1s all\u00e1, se trata de reducir el tama\u00f1o de una web, disminuir el tiempo de carga en los diferentes dispositivos con lo que se puede visualizar una p\u00e1gina, reducir el procesamiento en los navegadores as\u00ed como mejorar la accesibilidad y el orden y legibilidad del c\u00f3digo.<\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"%C2%BFComo_afecta_a_mi_web_el_uso_de_las_hojas_de_estilo\"><\/span><span style=\"font-size: 16pt; color: #333333;\">\u00bfC\u00f3mo afecta a mi web el uso de las hojas de estilo?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\">Los beneficios de usar CSS son varios, por un lado evitamos hacer <strong>archivos demasiados<\/strong> <strong>pesados <\/strong>(adi\u00f3s a la espera en la carga de nuestro sitio web en el navegador, que tan tediosa resulta para el usuario final), ahora definimos el estilo de un sitio entero sin necesidad de hacerlo para cada una de las etiquetas de la web, lo que nos lleva a otra de las ventajas, la <strong>reutilizaci\u00f3n del c\u00f3digo<\/strong> y la <strong>mejora en la legibilidad<\/strong>, orden y estructuraci\u00f3n de los archivos que forman un proyecto de desarrollo web.<\/p>\n<p style=\"text-align: justify;\">Por otro lado <strong>trabajamos con est\u00e1ndares<\/strong>, lo que nos garantiza que la mayar\u00eda de navegadores disponibles en el mercado van a ajustarse a los mismos, mostrando nuestra p\u00e1gina web tal y como la hemos dise\u00f1ado, presentando al usuario final nuestro \u201c<em>sello<\/em>\u201d sin cambios en la estructura, colores o maquetaci\u00f3n del entorno.<\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"CSS3_y_el_diseno_web_responsive\"><\/span><span style=\"font-size: 16pt;\">CSS3 y el dise\u00f1o web responsive<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\">Ajust\u00e1ndonos a la \u00faltima versi\u00f3n del est\u00e1ndar (CSS3) podemos hacer un <strong>dise\u00f1o responsive<\/strong> de nuestro sitio web, esto no es m\u00e1s que presentar nuestra p\u00e1gina acorde a las caracter\u00edsticas del dispositivo en el que se visualiza. Debemos tener en cuenta, que actualmente el usuario final no solo accede al contenido en Internet a trav\u00e9s de un ordenador, sino que puede usar un Smartphone, una tablet, una consola o una SmartTV, y cada uno de ellos tiene un tama\u00f1o de pantalla concreto y unas caracter\u00edsticas espec\u00edficas, por lo que una web no tendr\u00e1 las mismas dimensiones o estructuraci\u00f3n seg\u00fan desde donde sea consultada.<\/p>\n<p style=\"text-align: justify;\">Las hojas de estilo nos permiten por tanto, personalizar una web para que su contenido se adapte a las pantallas de los diferentes dispositivos de forma transparente para el usuario, que tendr\u00e1 la sensaci\u00f3n de estar navegando siempre por el mismo sitio independientemente de que acceda con su tel\u00e9fono m\u00f3vil, tablet o PC. Esto nos permite crearnos una \u201cmarca\u201d, mostrar confianza al usuario final sobre nuestro sitio adem\u00e1s de evitar el uso engorroso de las barras para desplazarnos por el contenido y el tiempo de carga en funci\u00f3n del dispositivo.<\/p>\n<p style=\"text-align: justify;\"><strong>En conclusi\u00f3n<\/strong>, CSS es la tecnolog\u00eda creada con el fin de separar la estructura de la presentaci\u00f3n, y mejorar la usabilidad y experiencia de usuario de un sitio web, permitiendo el desarrollo web responsive y disminuyendo el procesamiento y el tiempo de carga, factores que pueden marcar la diferencia entre triunfar o morir en el intento.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculos desmontamos los archivos CSS, explicando su utilidad y sus ventajas para optimizar cualquier dise\u00f1o web en la actualidad.<\/p>\n","protected":false},"author":89272,"featured_media":2472,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"class_list":["post-2468","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-de-aplicaciones"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u00bfQu\u00e9 son los estilos CSS y c\u00f3mo afectan a mi web?<\/title>\n<meta name=\"description\" content=\"En este art\u00edculos desmontamos los archivos CSS, explicando su utilidad y sus ventajas para optimizar cualquier dise\u00f1o web en la actualidad.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00bfQu\u00e9 son los estilos CSS y c\u00f3mo afectan a mi web?\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculos desmontamos los archivos CSS, explicando su utilidad y sus ventajas para optimizar cualquier dise\u00f1o web en la actualidad.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web\" \/>\n<meta property=\"og:site_name\" content=\"Canal Inform\u00e1tica y TICS\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/InesemBusinessSchool\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-02T12:46:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-e1472820359386.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Paula Rochina\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@inesem\" \/>\n<meta name=\"twitter:site\" content=\"@inesem\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Paula Rochina\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web\"},\"author\":{\"name\":\"Paula Rochina\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/person\/b5904573ef1312c302269e2710d1f7c1\"},\"headline\":\"\u00bfQu\u00e9 son los estilos CSS y c\u00f3mo afectan a mi web?\",\"datePublished\":\"2016-09-02T12:46:17+00:00\",\"dateModified\":\"2016-09-02T12:46:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web\"},\"wordCount\":1085,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-e1472820359386.jpg\",\"keywords\":[\"CSS\",\"CSS3\",\"dise\u00f1o responsive\",\"etiquetas\",\"hojas de estilo\",\"HTML\",\"W3C\",\"web responsive\"],\"articleSection\":[\"Desarrollo de Aplicaciones\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web\",\"name\":\"\u00bfQu\u00e9 son los estilos CSS y c\u00f3mo afectan a mi web?\",\"isPartOf\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-e1472820359386.jpg\",\"datePublished\":\"2016-09-02T12:46:17+00:00\",\"dateModified\":\"2016-09-02T12:46:17+00:00\",\"description\":\"En este art\u00edculos desmontamos los archivos CSS, explicando su utilidad y sus ventajas para optimizar cualquier dise\u00f1o web en la actualidad.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web#primaryimage\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-e1472820359386.jpg\",\"contentUrl\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-e1472820359386.jpg\",\"width\":1020,\"height\":680,\"caption\":\"CSS y etqiuetas style\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desarrollo de Aplicaciones\",\"item\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/categorias\/desarrollo-de-aplicaciones\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u00bfQu\u00e9 son los estilos CSS y c\u00f3mo afectan a mi web?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#website\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/\",\"name\":\"Canal Inform\u00e1tica y TICS\",\"description\":\"Canal de Noticias gestionado por el Departamento Docente de Inform\u00e1tica y TICS de INESEM\",\"publisher\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#organization\",\"name\":\"Canal Inform\u00e1tica y TICS\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/logo\/image\/\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Canal Inform\u00e1tica y TICS\"},\"image\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/InesemBusinessSchool\/\",\"https:\/\/x.com\/inesem\",\"http:\/\/www.linkedin.com\/company\/2370697\",\"https:\/\/www.youtube.com\/user\/inesembusinesschool\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/person\/b5904573ef1312c302269e2710d1f7c1\",\"name\":\"Paula Rochina\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/wp-content\/uploads\/2016\/12\/Paula-Rochina_avatar_1480596807-96x96.jpg\",\"contentUrl\":\"https:\/\/www.inesem.es\/revistadigital\/wp-content\/uploads\/2016\/12\/Paula-Rochina_avatar_1480596807-96x96.jpg\",\"caption\":\"Paula Rochina\"},\"description\":\"EDUCACI\u00d3N: \u2022 M\u00e1ster en Formaci\u00f3n del Profesorado de Educaci\u00f3n Secundaria Obligatoria, Bachillerato, Formaci\u00f3n Profesional y Ense\u00f1anza de Idiomas (Especialidad en Inform\u00e1tica) en la Universidad de Granada. \u2022 Licenciada en Ingenier\u00eda T\u00e9cnica en Inform\u00e1tica de Sistemas en la Universidad de Granada. EXPERIENCIA: \u2022 Profesora del Departamento de Inform\u00e1tica y Comunicaciones de INESEM Business School. \u2022 Profesora de clases de rob\u00f3tica educativa. \u2022 Profesora de ciclos medios y superiores de Inform\u00e1tica. \u2022 Ayudante de coordinaci\u00f3n en el servicio de monitores de atenci\u00f3n al p\u00fablico en el Parque de las Ciencias de Granada. ESCRIBE SOBRE:Inform\u00e1tica \u2022 Ciberseguridad \u2022 Seguridad de la informaci\u00f3n \u2022 Big Data \u2022 Anal\u00edtica web \u2022 Web \u2022 Programaci\u00f3n Linkedin de Paula Ingeniera T\u00e9cnica en Inform\u00e1tica especializada en ense\u00f1anza. Amante de las nuevas tecnolog\u00edas y la innovaci\u00f3n educativa. Compagina su profesi\u00f3n con su vocaci\u00f3n como profesora del Departamento de Inform\u00e1tica de INESEM.\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/autores\/paula-rochina\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u00bfQu\u00e9 son los estilos CSS y c\u00f3mo afectan a mi web?","description":"En este art\u00edculos desmontamos los archivos CSS, explicando su utilidad y sus ventajas para optimizar cualquier dise\u00f1o web en la actualidad.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web","og_locale":"es_ES","og_type":"article","og_title":"\u00bfQu\u00e9 son los estilos CSS y c\u00f3mo afectan a mi web?","og_description":"En este art\u00edculos desmontamos los archivos CSS, explicando su utilidad y sus ventajas para optimizar cualquier dise\u00f1o web en la actualidad.","og_url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web","og_site_name":"Canal Inform\u00e1tica y TICS","article_publisher":"https:\/\/www.facebook.com\/InesemBusinessSchool\/","article_published_time":"2016-09-02T12:46:17+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-e1472820359386.jpg","type":"image\/jpeg"}],"author":"Paula Rochina","twitter_card":"summary_large_image","twitter_creator":"@inesem","twitter_site":"@inesem","twitter_misc":{"Escrito por":"Paula Rochina","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web#article","isPartOf":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web"},"author":{"name":"Paula Rochina","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/person\/b5904573ef1312c302269e2710d1f7c1"},"headline":"\u00bfQu\u00e9 son los estilos CSS y c\u00f3mo afectan a mi web?","datePublished":"2016-09-02T12:46:17+00:00","dateModified":"2016-09-02T12:46:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web"},"wordCount":1085,"commentCount":0,"publisher":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#organization"},"image":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web#primaryimage"},"thumbnailUrl":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-e1472820359386.jpg","keywords":["CSS","CSS3","dise\u00f1o responsive","etiquetas","hojas de estilo","HTML","W3C","web responsive"],"articleSection":["Desarrollo de Aplicaciones"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web","name":"\u00bfQu\u00e9 son los estilos CSS y c\u00f3mo afectan a mi web?","isPartOf":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web#primaryimage"},"image":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web#primaryimage"},"thumbnailUrl":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-e1472820359386.jpg","datePublished":"2016-09-02T12:46:17+00:00","dateModified":"2016-09-02T12:46:17+00:00","description":"En este art\u00edculos desmontamos los archivos CSS, explicando su utilidad y sus ventajas para optimizar cualquier dise\u00f1o web en la actualidad.","breadcrumb":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web#primaryimage","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-e1472820359386.jpg","contentUrl":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-e1472820359386.jpg","width":1020,"height":680,"caption":"CSS y etqiuetas style"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/"},{"@type":"ListItem","position":2,"name":"Desarrollo de Aplicaciones","item":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/categorias\/desarrollo-de-aplicaciones"},{"@type":"ListItem","position":3,"name":"\u00bfQu\u00e9 son los estilos CSS y c\u00f3mo afectan a mi web?"}]},{"@type":"WebSite","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#website","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/","name":"Canal Inform\u00e1tica y TICS","description":"Canal de Noticias gestionado por el Departamento Docente de Inform\u00e1tica y TICS de INESEM","publisher":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#organization","name":"Canal Inform\u00e1tica y TICS","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Canal Inform\u00e1tica y TICS"},"image":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/InesemBusinessSchool\/","https:\/\/x.com\/inesem","http:\/\/www.linkedin.com\/company\/2370697","https:\/\/www.youtube.com\/user\/inesembusinesschool\/"]},{"@type":"Person","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/person\/b5904573ef1312c302269e2710d1f7c1","name":"Paula Rochina","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/person\/image\/","url":"https:\/\/www.inesem.es\/revistadigital\/wp-content\/uploads\/2016\/12\/Paula-Rochina_avatar_1480596807-96x96.jpg","contentUrl":"https:\/\/www.inesem.es\/revistadigital\/wp-content\/uploads\/2016\/12\/Paula-Rochina_avatar_1480596807-96x96.jpg","caption":"Paula Rochina"},"description":"EDUCACI\u00d3N: \u2022 M\u00e1ster en Formaci\u00f3n del Profesorado de Educaci\u00f3n Secundaria Obligatoria, Bachillerato, Formaci\u00f3n Profesional y Ense\u00f1anza de Idiomas (Especialidad en Inform\u00e1tica) en la Universidad de Granada. \u2022 Licenciada en Ingenier\u00eda T\u00e9cnica en Inform\u00e1tica de Sistemas en la Universidad de Granada. EXPERIENCIA: \u2022 Profesora del Departamento de Inform\u00e1tica y Comunicaciones de INESEM Business School. \u2022 Profesora de clases de rob\u00f3tica educativa. \u2022 Profesora de ciclos medios y superiores de Inform\u00e1tica. \u2022 Ayudante de coordinaci\u00f3n en el servicio de monitores de atenci\u00f3n al p\u00fablico en el Parque de las Ciencias de Granada. ESCRIBE SOBRE:Inform\u00e1tica \u2022 Ciberseguridad \u2022 Seguridad de la informaci\u00f3n \u2022 Big Data \u2022 Anal\u00edtica web \u2022 Web \u2022 Programaci\u00f3n Linkedin de Paula Ingeniera T\u00e9cnica en Inform\u00e1tica especializada en ense\u00f1anza. Amante de las nuevas tecnolog\u00edas y la innovaci\u00f3n educativa. Compagina su profesi\u00f3n con su vocaci\u00f3n como profesora del Departamento de Inform\u00e1tica de INESEM.","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/autores\/paula-rochina"}]}},"autor_name":{"name":"Paula Rochina"},"featured_image":{"attachment_meta":{"width":1020,"height":680,"file":"2016\/09\/Fotolia_80894400_Subscription_Monthly_M-e1472820359386.jpg","sizes":{"thumbnail":{"file":"Fotolia_80894400_Subscription_Monthly_M-345x180.jpg","width":345,"height":180,"mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-345x180.jpg"},"medium":{"file":"Fotolia_80894400_Subscription_Monthly_M-175x117.jpg","width":175,"height":117,"mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-175x117.jpg"},"medium_large":{"file":"Fotolia_80894400_Subscription_Monthly_M-768x512.jpg","width":768,"height":512,"mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-768x512.jpg"},"large":{"file":"Fotolia_80894400_Subscription_Monthly_M-1024x682.jpg","width":1024,"height":682,"mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-1024x682.jpg"},"wysija-newsletters-max":{"file":"Fotolia_80894400_Subscription_Monthly_M-600x400.jpg","width":600,"height":400,"mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-600x400.jpg"},"thumb-small":{"file":"Fotolia_80894400_Subscription_Monthly_M-59x42.jpg","width":59,"height":42,"mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-59x42.jpg"},"thumb-standard":{"file":"Fotolia_80894400_Subscription_Monthly_M-110x110.jpg","width":110,"height":110,"mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-110x110.jpg"},"thumb-medium":{"file":"Fotolia_80894400_Subscription_Monthly_M-196x166.jpg","width":196,"height":166,"mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-196x166.jpg"},"thumb-large":{"file":"Fotolia_80894400_Subscription_Monthly_M-283x190.jpg","width":283,"height":190,"mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-283x190.jpg"},"thumb-anteriores":{"file":"Fotolia_80894400_Subscription_Monthly_M-230x163.jpg","width":230,"height":163,"mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-230x163.jpg"},"thumb-inverso":{"file":"Fotolia_80894400_Subscription_Monthly_M-369x261.jpg","width":369,"height":261,"mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-369x261.jpg"},"thumb-cercano":{"file":"Fotolia_80894400_Subscription_Monthly_M-650x200.jpg","width":650,"height":200,"mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-650x200.jpg"},"thumb-slider":{"file":"Fotolia_80894400_Subscription_Monthly_M-574x430.jpg","width":574,"height":430,"mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-574x430.jpg"},"thumb-busqueda":{"file":"Fotolia_80894400_Subscription_Monthly_M-580x375.jpg","width":580,"height":375,"mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-580x375.jpg"},"thumb-formacion-continua":{"file":"Fotolia_80894400_Subscription_Monthly_M-440x336.jpg","width":440,"height":336,"mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-440x336.jpg"},"advps-thumb-one":{"file":"Fotolia_80894400_Subscription_Monthly_M-600x220.jpg","width":600,"height":220,"mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2016\/09\/Fotolia_80894400_Subscription_Monthly_M-600x220.jpg"}},"image_meta":{"aperture":"0","credit":"cronislaw - Fotolia","camera":"","caption":"","created_timestamp":"0","copyright":"cronislaw - Fotolia","focal_length":"0","iso":"0","shutter_speed":"0","title":"Programming code on a monitor.","orientation":"0","keywords":["code","software","programming","coding","computer","development","abstract","screen","script","program","html","monitor","language","technology","text","information","data","internet","blue","background","application","line","java","letter","web","light","symbol","source","command","pc","function","string","display","procedure","black","www","css","point","pixel","design","developer"]}}},"_links":{"self":[{"href":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/wp-json\/wp\/v2\/posts\/2468"}],"collection":[{"href":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/wp-json\/wp\/v2\/users\/89272"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/wp-json\/wp\/v2\/comments?post=2468"}],"version-history":[{"count":0,"href":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/wp-json\/wp\/v2\/posts\/2468\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/wp-json\/wp\/v2\/media\/2472"}],"wp:attachment":[{"href":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/wp-json\/wp\/v2\/media?parent=2468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/wp-json\/wp\/v2\/categories?post=2468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}