{"id":3822,"date":"2017-08-29T08:52:53","date_gmt":"2017-08-29T06:52:53","guid":{"rendered":"http:\/\/www.foc.es\/?p=3822"},"modified":"2019-11-15T09:10:13","modified_gmt":"2019-11-15T08:10:13","slug":"tipos-de-hojas-de-estilos-que-podemos-aplicar-en-nuestra-pagina-web","status":"publish","type":"post","link":"http:\/\/piloto.foc.es\/2017\/08\/29\/3822-tipos-de-hojas-de-estilos-que-podemos-aplicar-en-nuestra-pagina-web.html","title":{"rendered":"Tipos de hojas de estilos que podemos aplicar en nuestra p\u00e1gina web."},"content":{"rendered":"<p>Las hojas de estilos <strong>CSS<\/strong> en ingl\u00e9s Cascading Style Sheets (<em>en espa\u00f1ol Hojas de Estilo en Cascada<\/em>), permiten el control total sobre la presentaci\u00f3n de las p\u00e1ginas web.<\/p>\n<p><img loading=\"lazy\" class=\"wp-image-3827 aligncenter\" src=\"http:\/\/www.foc.es\/wp-content\/uploads\/2017\/08\/css-1-300x298.png\" alt=\"css\" width=\"209\" height=\"208\" srcset=\"http:\/\/piloto.foc.es\/wp-content\/uploads\/2017\/08\/css-1-300x300.png 300w, http:\/\/piloto.foc.es\/wp-content\/uploads\/2017\/08\/css-1-100x100.png 100w, http:\/\/piloto.foc.es\/wp-content\/uploads\/2017\/08\/css-1-600x595.png 600w, http:\/\/piloto.foc.es\/wp-content\/uploads\/2017\/08\/css-1-150x150.png 150w, http:\/\/piloto.foc.es\/wp-content\/uploads\/2017\/08\/css-1-80x80.png 80w, http:\/\/piloto.foc.es\/wp-content\/uploads\/2017\/08\/css-1-500x500.png 500w, http:\/\/piloto.foc.es\/wp-content\/uploads\/2017\/08\/css-1.png 726w\" sizes=\"(max-width: 209px) 100vw, 209px\" \/><\/p>\n<p>Con las \u00a0hojas de estilos CSS, puede colocar y definir con precisi\u00f3n la apariencia de los elementos de una p\u00e1gina web.<\/p>\n<p>Una hoja de estilos CSS puede ser:<\/p>\n<ul>\n<li><strong>Externa<\/strong><\/li>\n<li><strong>Interna<\/strong><\/li>\n<li><strong>En l\u00ednea<\/strong><\/li>\n<\/ul>\n<p>El orden de prioridad de las hojas de estilos es la siguiente:<\/p>\n<ol>\n<li><strong>La hoja de estilos en l\u00ednea frente a la externa e interna<\/strong><\/li>\n<li><strong>La hojas de estilos interna frente a la externa<\/strong><\/li>\n<\/ol>\n<p>Adem\u00e1s debemos tener presente que una p\u00e1gina web puede usar uno o varios de estos tipos de CSS a la vez.<\/p>\n<p>Para que sirven los distintos tipos de hojas de estilos.<\/p>\n<ul>\n<li><strong>Las CSS externas<\/strong> sirven para aplicar de forma coherente los mismos estilos a un proyecto web. De esta forma una modificaci\u00f3n en un estilo se aplica a todas las web de un proyecto, de forma autom\u00e1tica.<\/li>\n<li><strong>Las CSS internas<\/strong> o tambi\u00e9n conocidas como incrustadas, sirven para aplicar estilos a una sola web y tambi\u00e9n para modificar los estilos de heredados de una CSS externa. Las CSS internas se incluyen entre las etiquetas &lt;head&gt; de las p\u00e1ginas web.<\/li>\n<li><strong>Las CSS en l\u00ednea<\/strong> sirven para aplicar las propiedades de las hojas de estilos en cascada a elementos individuales de una p\u00e1gina sin tener que reutilizar el estilo. Los estilos en l\u00ednea se definen dentro de las etiquetas iniciales de los elementos HTML de p\u00e1ginas web.<\/li>\n<\/ul>\n<p>Por ejemplo:<\/p>\n<p><strong><em>&lt;div id=\u00bbreloj\u00bb style=\u00bbfont-family: \u2018DS-Digital\u2019; width: 450px; background-color: black;font-size:100px;color: green ; text-align: center \u00ab&gt;&lt;\/div&gt;<\/em><\/strong><\/p>\n<p>En el art\u00edculo de la semana pasada, usamos Javascript para aplicar estilos al reloj digital propuesto, mediante estilos en l\u00ednea. Estos mismos estilos los podemos aplicar mediante:<\/p>\n<ul>\n<li><strong>CSS interna, de la siguiente manera:<\/strong><\/li>\n<\/ul>\n<ol>\n<li>&lt;script type=\u00bbtext\/javascript\u00bb&gt;<\/li>\n<li>function startTime(){<\/li>\n<li>today=new Date();<\/li>\n<li>h=today.getHours();<\/li>\n<li>m=today.getMinutes();<\/li>\n<li>s=today.getSeconds();<\/li>\n<li>m=checkTime(m);<\/li>\n<li>s=checkTime(s);<\/li>\n<li>document.getElementById(&#8216;reloj&#8217;).innerHTML=h+\u00bb:\u00bb+m+\u00bb:\u00bb+s;<\/li>\n<li>t=setTimeout(&#8216;startTime()&#8217;,500);}<\/li>\n<li>function checkTime(i)<\/li>\n<li>{if (i&lt;10) {i=\u00bb0&#8243; + i;}return i;}<\/li>\n<li>window.onload=function(){startTime();}<\/li>\n<li>&lt;\/script&gt;<\/li>\n<li>&lt;div id=\u00bbreloj\u00bb &gt;&lt;\/div&gt;<\/li>\n<li><strong>&lt;head&gt;<\/strong><\/li>\n<li><strong>&lt;style type=\u00bbtext\/css\u00bb&gt;<\/strong><\/li>\n<li><strong>#reloj { font-family: &#8216;DS-Digital&#8217;;<\/strong><\/li>\n<li><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width: 450px; <\/strong><\/li>\n<li><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-color: black;<\/strong><\/li>\n<li><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 font-size:100px;<\/strong><\/li>\n<li><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 color: green ; <\/strong><\/li>\n<li><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/strong><strong>text-align: center;<\/strong><\/li>\n<li><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/strong><\/li>\n<li><strong>\u00a0\u00a0\u00a0\u00a0 &lt;\/style&gt;<\/strong><\/li>\n<li><strong>&lt;\/head&gt;<\/strong><\/li>\n<\/ol>\n<ul>\n<li><strong>CSS externa, de la siguiente manera:<\/strong><\/li>\n<\/ul>\n<p>Contenido fichero externo con los estilos CSS. Lo llamaremos estilos_reloj.css.<\/p>\n<ol>\n<li>#reloj {<\/li>\n<li>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 font-family: &#8216;DS-Digital&#8217;;<\/li>\n<li>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width: 450px;<\/li>\n<li>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-color: black;<\/li>\n<li>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 font-size:100px;<\/li>\n<li>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 color: green ;<\/li>\n<li>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 text-align: center;<\/li>\n<li>}<\/li>\n<\/ol>\n<p>Contenido fichero con el c\u00f3digo principal:<\/p>\n<ol>\n<li>&lt;script type=\u00bbtext\/javascript\u00bb&gt;<\/li>\n<li>function startTime(){<\/li>\n<li>today=new Date();<\/li>\n<li>h=today.getHours();<\/li>\n<li>m=today.getMinutes();<\/li>\n<li>s=today.getSeconds();<\/li>\n<li>m=checkTime(m);<\/li>\n<li>s=checkTime(s);<\/li>\n<li>document.getElementById(&#8216;reloj&#8217;).innerHTML=h+\u00bb:\u00bb+m+\u00bb:\u00bb+s;<\/li>\n<li>t=setTimeout(&#8216;startTime()&#8217;,500);}<\/li>\n<li>function checkTime(i)<\/li>\n<li>{if (i&lt;10) {i=\u00bb0&#8243; + i;}return i;}<\/li>\n<li>window.onload=function(){startTime();}<\/li>\n<li>&lt;\/script&gt;<\/li>\n<li>&lt;div id=\u00bbreloj\u00bb &gt;&lt;\/div&gt;<\/li>\n<li><strong>&lt;head&gt;<\/strong><\/li>\n<li><strong>&lt;meta http-equiv=\u00bbContent-Type\u00bb content=\u00bbtext\/html; charset=iso-8859-1&#8243; \/&gt;<\/strong><\/li>\n<li><strong>&lt;title&gt;Ejemplo de estilos CSS en un archivo externo&lt;\/title&gt;<\/strong><\/li>\n<li><strong>&lt;link rel=\u00bbstylesheet\u00bb type=\u00bbtext\/css\u00bb href=\u00bbestilos_reloj.css\u00bb media=\u00bbscreen\u00bb \/&gt;<\/strong><\/li>\n<li><strong>&lt;\/head&gt;<\/strong><\/li>\n<\/ol>\n<p>Animo a lector a desarrollar sus estilos para este reloj digital y publicar el c\u00f3digo. Es un ejercicio muy gratificante.<\/p>\n<p>Todos nuestros alumnos\u00a0 que han cursado el certificado de profesionalidad <a href=\"http:\/\/cdp.foc.es\/certificado-de-profesionalidad-ifcd0210-desarrollo-de-aplicaciones-con-tecnologias-web\">IFCD0210-Desarrollo de Aplicaciones con Tecnolog\u00edas Web<\/a>, y el IFCD0110 Confecci\u00f3n y publicaci\u00f3n de p\u00e1ginas web, conocen bien todos estos aspectos de las CSS y saben como aplicarlas seg\u00fan los requerimientos de la web que est\u00e9n programando.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Las hojas de estilos CSS en ingl\u00e9s Cascading Style Sheets (en espa\u00f1ol Hojas de Estilo en Cascada), permiten el control total sobre la presentaci\u00f3n de las p\u00e1ginas web. Con las \u00a0hojas de estilos CSS, puede colocar y definir con precisi\u00f3n la apariencia de los elementos de una p\u00e1gina web. Una hoja de estilos CSS puede ser: Externa Interna En l\u00ednea El orden de prioridad de las hojas de estilos es la siguiente: La hoja de estilos en l\u00ednea frente a la externa e interna La hojas de estilos interna frente a la externa Adem\u00e1s debemos tener presente que una p\u00e1gina web puede usar uno o varios de estos tipos de CSS a la vez. Para que sirven los distintos tipos de hojas de estilos. Las CSS externas sirven para aplicar de forma coherente los mismos estilos a un proyecto web. De esta forma una modificaci\u00f3n en un estilo se aplica a todas las web de un proyecto, de forma autom\u00e1tica. Las CSS internas o tambi\u00e9n conocidas como incrustadas, sirven para aplicar estilos a una sola web y tambi\u00e9n para modificar los estilos de heredados de una CSS externa. Las CSS internas se incluyen entre las etiquetas &lt;head&gt; de las p\u00e1ginas [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":3821,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[18,594,1],"tags":[725,535,703,552,528,706,753,489,550,530,566,133,236,157,62,724,546,65,722,726,78],"jetpack_featured_media_url":"http:\/\/piloto.foc.es\/wp-content\/uploads\/2017\/08\/CSS-01.png","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":3841,"url":"http:\/\/piloto.foc.es\/2017\/09\/06\/3841-como-medir-la-velocidad-de-carga-de-mi-pagina-web.html","url_meta":{"origin":3822,"position":0},"title":"\u00bfC\u00f3mo medir la velocidad de carga de mi p\u00e1gina web?","date":"6 septiembre, 2017","format":false,"excerpt":"Para conseguir una buena experiencia entre los usuarios de nuestra p\u00e1gina web, tenemos que conseguir que la carga de la p\u00e1gina sea lo m\u00e1s r\u00e1pida posible y conseguir que el tiempo de respuesta sea adecuado. Estas t\u00e9cnicas para la mejora de la experiencia de los usuarios web, son estudiadas por\u2026","rel":"","context":"En \u00abActualidad Tecnol\u00f3gica\u00bb","img":{"alt_text":"","src":"https:\/\/i2.wp.com\/piloto.foc.es\/wp-content\/uploads\/2017\/09\/tiempo-de-carga.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3855,"url":"http:\/\/piloto.foc.es\/2017\/09\/13\/3855-los-desarrolladores-siguen-prefiriendo-linux.html","url_meta":{"origin":3822,"position":1},"title":"Los desarrolladores siguen prefiriendo Linux.","date":"13 septiembre, 2017","format":false,"excerpt":"Aunque Microsoft ha dado un gran salto en el intento de agradar a los desarrolladores, con el lanzamiento de Windows 10. Otros sistemas de Microsoft no gustaron mucho a los desarrolladores, pero Windows 10 con la incorporaci\u00f3n de subsistemas Linux, empieza a tener cada vez m\u00e1s seguidores. \u00a0 Pero Linux\u2026","rel":"","context":"En \u00abActualidad Tecnol\u00f3gica\u00bb","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/piloto.foc.es\/wp-content\/uploads\/2017\/09\/PINGU-LINUX1.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3205,"url":"http:\/\/piloto.foc.es\/2017\/02\/13\/3205-quieres-crear-listas-css-con-animacion-en-javascript-como-un-programador-web-experto-pues-apuntate-con-nosotros.html","url_meta":{"origin":3822,"position":2},"title":"Quieres crear listas CSS con animaci\u00f3n en JavaScript como un programador web experto? Pues ap\u00fantate con nosotros.","date":"13 febrero, 2017","format":false,"excerpt":"A continuaci\u00f3n vamos a explicar c\u00f3mo crear listas CSS y c\u00f3mo aplicarles animaci\u00f3n con tan solo unas pocas l\u00edneas de c\u00f3digo JavaScript. En el siguiente c\u00f3digo puedes ver c\u00f3mo con unas pocas l\u00edneas en HTML y un c\u00f3digo JavaScript muy sencillo, podemos crear una lista con tres elementos, los cuales\u2026","rel":"","context":"En \u00abCertificado de Profesionalidad\u00bb","img":{"alt_text":"ListasCSS-Codigo","src":"https:\/\/i1.wp.com\/cdp.foc.es\/wp-content\/uploads\/2016\/08\/ListasCSS-Codigo.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3208,"url":"http:\/\/piloto.foc.es\/2017\/02\/13\/3208-hazte-un-experto-en-programacion-web-con-nosotros-y-podras-desarrollar-efectos-web-como-el-siguiente-rotar-un-trozo-del-texto-solo-aplicando-reglas-css.html","url_meta":{"origin":3822,"position":3},"title":"Hazte un experto en programaci\u00f3n web con nosotros y podr\u00e1s desarrollar efectos web como el siguiente: \u201dRotar un trozo del texto solo aplicando reglas CSS.\u201d","date":"13 febrero, 2017","format":false,"excerpt":"Si quieres dibujar un texto de manera vertical, puedes usar im\u00e1genes, pero no es lo m\u00e1s adecuado, por que puedes usar reglas CSS como las que te ense\u00f1amos a continuaci\u00f3n y que en cualquiera de nuestros dos certificados de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnolog\u00edas Web o IFCD0110-Confecci\u00f3n y publicaci\u00f3n\u2026","rel":"","context":"En \u00abCertificado de Profesionalidad\u00bb","img":{"alt_text":"div-contenedor","src":"https:\/\/i2.wp.com\/cdp.foc.es\/wp-content\/uploads\/2016\/09\/div-contenedor-1.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3219,"url":"http:\/\/piloto.foc.es\/2017\/02\/13\/3219-rendera-herramienta-0nline-para-aprender-programar-sin-necesidad-de-instalacion.html","url_meta":{"origin":3822,"position":4},"title":"Rendera: herramienta 0nline para aprender programar. \u00a1Sin necesidad de instalaci\u00f3n!","date":"13 febrero, 2017","format":false,"excerpt":"Todos los que programamos tenemos la necesidad, de poder probar el c\u00f3digo que desarrollamos de forma r\u00e1pida y eficiente. Para ello, necesitamos un entorno m\u00ednimo de programaci\u00f3n instalado en nuestro ordenador. Ahora sin necesidad de instalaci\u00f3n y todo Online, puedes escribir c\u00f3digo, HTML, CSS y JavaScripts y ver de forma\u2026","rel":"","context":"En \u00abCertificado de Profesionalidad\u00bb","img":{"alt_text":"Rendera-Hola_Mundo","src":"https:\/\/i0.wp.com\/cdp.foc.es\/wp-content\/uploads\/2016\/10\/Rendera-Hola_Mundo.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3199,"url":"http:\/\/piloto.foc.es\/2017\/02\/13\/3199-aplica-efectos-llamativos-a-las-imagenes-que-publiques-en-tus-webs-seras-un-experto-programador-web.html","url_meta":{"origin":3822,"position":5},"title":"Aplica efectos llamativos a las im\u00e1genes que publiques en tus webs. Ser\u00e1s un experto programador web.","date":"13 febrero, 2017","format":false,"excerpt":"Si realizas alguno de los siguientes certificados de profesionalidad con nosotros: IFCD0210-Desarrollo de Aplicaciones con Tecnolog\u00edas Web. IFCD0110-Confecci\u00f3n y publicaci\u00f3n de p\u00e1ginas web Ser\u00e1s capaz de aplicar efectos llamativos a las im\u00e1genes que publiques en tus webs de forma sencilla y eficiente. De esta forma mejorar\u00e1s la presentaci\u00f3n del tus\u2026","rel":"","context":"En \u00abCertificado de Profesionalidad\u00bb","img":{"alt_text":"web Mostrar Ocultar","src":"https:\/\/i0.wp.com\/cdp.foc.es\/wp-content\/uploads\/2016\/07\/web-Mostrar-Ocultar.png?resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_shortlink":"https:\/\/wp.me\/p6jO3Y-ZE","amp_validity":null,"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts\/3822"}],"collection":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/comments?post=3822"}],"version-history":[{"count":4,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts\/3822\/revisions"}],"predecessor-version":[{"id":3828,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts\/3822\/revisions\/3828"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/media\/3821"}],"wp:attachment":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/media?parent=3822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/categories?post=3822"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/tags?post=3822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}