Instituto FOC – FP Informática Online

Tipos de hojas de estilos que podemos aplicar en nuestra página web.

Las hojas de estilos CSS en inglés Cascading Style Sheets (en español Hojas de Estilo en Cascada), permiten el control total sobre la presentación de las páginas web.

Con las  hojas de estilos CSS, puede colocar y definir con precisión la apariencia de los elementos de una página web.

Una hoja de estilos CSS puede ser:

El orden de prioridad de las hojas de estilos es la siguiente:

  1. La hoja de estilos en línea frente a la externa e interna
  2. La hojas de estilos interna frente a la externa

Además debemos tener presente que una página web puede usar uno o varios de estos tipos de CSS a la vez.

Para que sirven los distintos tipos de hojas de estilos.

Por ejemplo:

<div id=»reloj» style=»font-family: ‘DS-Digital’; width: 450px; background-color: black;font-size:100px;color: green ; text-align: center «></div>

En el artículo de la semana pasada, usamos Javascript para aplicar estilos al reloj digital propuesto, mediante estilos en línea. Estos mismos estilos los podemos aplicar mediante:

  1. <script type=»text/javascript»>
  2. function startTime(){
  3. today=new Date();
  4. h=today.getHours();
  5. m=today.getMinutes();
  6. s=today.getSeconds();
  7. m=checkTime(m);
  8. s=checkTime(s);
  9. document.getElementById(‘reloj’).innerHTML=h+»:»+m+»:»+s;
  10. t=setTimeout(‘startTime()’,500);}
  11. function checkTime(i)
  12. {if (i<10) {i=»0″ + i;}return i;}
  13. window.onload=function(){startTime();}
  14. </script>
  15. <div id=»reloj» ></div>
  16. <head>
  17. <style type=»text/css»>
  18. #reloj { font-family: ‘DS-Digital’;
  19.         width: 450px;
  20.                                background-color: black;
  21.                                font-size:100px;
  22.                                color: green ;
  23.                                text-align: center;
  24.                                }
  25.      </style>
  26. </head>

Contenido fichero externo con los estilos CSS. Lo llamaremos estilos_reloj.css.

  1. #reloj {
  2.                                font-family: ‘DS-Digital’;
  3.         width: 450px;
  4.                                background-color: black;
  5.                                font-size:100px;
  6.                                color: green ;
  7.                                text-align: center;
  8. }

Contenido fichero con el código principal:

  1. <script type=»text/javascript»>
  2. function startTime(){
  3. today=new Date();
  4. h=today.getHours();
  5. m=today.getMinutes();
  6. s=today.getSeconds();
  7. m=checkTime(m);
  8. s=checkTime(s);
  9. document.getElementById(‘reloj’).innerHTML=h+»:»+m+»:»+s;
  10. t=setTimeout(‘startTime()’,500);}
  11. function checkTime(i)
  12. {if (i<10) {i=»0″ + i;}return i;}
  13. window.onload=function(){startTime();}
  14. </script>
  15. <div id=»reloj» ></div>
  16. <head>
  17. <meta http-equiv=»Content-Type» content=»text/html; charset=iso-8859-1″ />
  18. <title>Ejemplo de estilos CSS en un archivo externo</title>
  19. <link rel=»stylesheet» type=»text/css» href=»estilos_reloj.css» media=»screen» />
  20. </head>

Animo a lector a desarrollar sus estilos para este reloj digital y publicar el código. Es un ejercicio muy gratificante.

Todos nuestros alumnos  que han cursado el certificado de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web, y el IFCD0110 Confección y publicación de páginas web, conocen bien todos estos aspectos de las CSS y saben como aplicarlas según los requerimientos de la web que estén programando.