![\"css\"](\"http:\/\/www.foc.es\/wp-content\/uploads\/2017\/08\/css-1-300x298.png\")
<\/p>\n
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
Una hoja de estilos CSS puede ser:<\/p>\n
- \n
- Externa<\/strong><\/li>\n
- Interna<\/strong><\/li>\n
- En l\u00ednea<\/strong><\/li>\n<\/ul>\n
El orden de prioridad de las hojas de estilos es la siguiente:<\/p>\n
- \n
- La hoja de estilos en l\u00ednea frente a la externa e interna<\/strong><\/li>\n
- La hojas de estilos interna frente a la externa<\/strong><\/li>\n<\/ol>\n
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
Para que sirven los distintos tipos de hojas de estilos.<\/p>\n
- \n
- 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
- 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 <head> de las p\u00e1ginas web.<\/li>\n
- 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
Por ejemplo:<\/p>\n
<div id=\u00bbreloj\u00bb style=\u00bbfont-family: \u2018DS-Digital\u2019; width: 450px; background-color: black;font-size:100px;color: green ; text-align: center \u00ab><\/div><\/em><\/strong><\/p>\n
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
- \n
- CSS interna, de la siguiente manera:<\/strong><\/li>\n<\/ul>\n
- \n
- <script type=\u00bbtext\/javascript\u00bb><\/li>\n
- function startTime(){<\/li>\n
- today=new Date();<\/li>\n
- h=today.getHours();<\/li>\n
- m=today.getMinutes();<\/li>\n
- s=today.getSeconds();<\/li>\n
- m=checkTime(m);<\/li>\n
- s=checkTime(s);<\/li>\n
- document.getElementById(‘reloj’).innerHTML=h+\u00bb:\u00bb+m+\u00bb:\u00bb+s;<\/li>\n
- t=setTimeout(‘startTime()’,500);}<\/li>\n
- function checkTime(i)<\/li>\n
- {if (i<10) {i=\u00bb0″ + i;}return i;}<\/li>\n
- window.onload=function(){startTime();}<\/li>\n
- <\/script><\/li>\n
- <div id=\u00bbreloj\u00bb ><\/div><\/li>\n
- <head><\/strong><\/li>\n
- <style type=\u00bbtext\/css\u00bb><\/strong><\/li>\n
- #reloj { font-family: ‘DS-Digital’;<\/strong><\/li>\n
- \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width: 450px; <\/strong><\/li>\n
- \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
- \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
- \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
- \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>text-align: center;<\/strong><\/li>\n
- \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
- \u00a0\u00a0\u00a0\u00a0 <\/style><\/strong><\/li>\n
- <\/head><\/strong><\/li>\n<\/ol>\n
- \n
- CSS externa, de la siguiente manera:<\/strong><\/li>\n<\/ul>\n
Contenido fichero externo con los estilos CSS. Lo llamaremos estilos_reloj.css.<\/p>\n
- \n
- #reloj {<\/li>\n
- \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: ‘DS-Digital’;<\/li>\n
- \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width: 450px;<\/li>\n
- \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
- \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
- \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
- \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>\n<\/ol>\n
Contenido fichero con el c\u00f3digo principal:<\/p>\n
- \n
- <script type=\u00bbtext\/javascript\u00bb><\/li>\n
- function startTime(){<\/li>\n
- today=new Date();<\/li>\n
- h=today.getHours();<\/li>\n
- m=today.getMinutes();<\/li>\n
- s=today.getSeconds();<\/li>\n
- m=checkTime(m);<\/li>\n
- s=checkTime(s);<\/li>\n
- document.getElementById(‘reloj’).innerHTML=h+\u00bb:\u00bb+m+\u00bb:\u00bb+s;<\/li>\n
- t=setTimeout(‘startTime()’,500);}<\/li>\n
- function checkTime(i)<\/li>\n
- {if (i<10) {i=\u00bb0″ + i;}return i;}<\/li>\n
- window.onload=function(){startTime();}<\/li>\n
- <\/script><\/li>\n
- <div id=\u00bbreloj\u00bb ><\/div><\/li>\n
- <head><\/strong><\/li>\n
- <meta http-equiv=\u00bbContent-Type\u00bb content=\u00bbtext\/html; charset=iso-8859-1″ \/><\/strong><\/li>\n
- <title>Ejemplo de estilos CSS en un archivo externo<\/title><\/strong><\/li>\n
- <link rel=\u00bbstylesheet\u00bb type=\u00bbtext\/css\u00bb href=\u00bbestilos_reloj.css\u00bb media=\u00bbscreen\u00bb \/><\/strong><\/li>\n
- <\/head><\/strong><\/li>\n<\/ol>\n
Animo a lector a desarrollar sus estilos para este reloj digital y publicar el c\u00f3digo. Es un ejercicio muy gratificante.<\/p>\n
- <meta http-equiv=\u00bbContent-Type\u00bb content=\u00bbtext\/html; charset=iso-8859-1″ \/><\/strong><\/li>\n
- <style type=\u00bbtext\/css\u00bb><\/strong><\/li>\n
- 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 <head> de las p\u00e1ginas web.<\/li>\n
- La hojas de estilos interna frente a la externa<\/strong><\/li>\n<\/ol>\n
- Interna<\/strong><\/li>\n