Logotipo de Aprende Gratis.

CSS - Lección 3: Implementación del estilo en cascada

Hay tres formas de implementar el código css en nuestros documentos html. Las primera es estableciendo un atributo en la propia etiqueta html que deseemos darle un estilo. La segunda es en la cabecera de nuestra página web, a través de la etiqueta <style>. La tercera forma es la más flexible, se trata de un documento independiente en donde definir el diseño.

En relación a la primera forma, utilizaremos el atributo style en la propia etiqueta html a la cual deseemos proporcionarle diseño. En el siguiente código utilizamos esta forma de implementación css para darle a un párrafo color azul y un tipo de fuente arial.

   <!-- atributo style para un párrafo -->
<p style="color:blue; font-family:arial;">
Las hojas de estilo en cascada nos ayudan
enormemente a generar y mantener un diseño
gráfico para nuestro sitio web.</p>

Como ves, el valor que debe de tomar el atributo style son las declaraciones de la sintaxis css necesarias para dar el diseño deseado.

Con la segunda forma de utilizar código css, que hemos mencionado antes, podemos darle diseño a todo un documento html de forma integral. Para ello, escribiremos el código css en la cabecera de nuestra página web; dentro de la etiqueta <style>

<html>
  <!-- cabecera de la página -->
  <head>

    <!-- código css -->
    <style type="text/css">
       <!--
       h2 {
         color:red;
        }
  
       p {
         color:blue;
         text-align:center;
        }
       -->
    </style>
	
  </head>
  <!-- cuerpo de la página -->
  <body>

    <!-- título de la página -->
    <h2>Hojas de estilo en cascada</h2>
    <!-- primer párrafo -->
    <p>Con la etiqueta style podemos
    diseñar nuestras páginas webs.</p>
    <!-- segundo párrafo -->
    <p>Esta técnica de diseño web es
    muy flexible y potente para el
    webmaster.</p>
	
  </body>

</html>

En el código anterior tenemos un documento html con un título y dos párrafos en el cuerpo de la página. En su cabecera hemos definido un diseño para el documento, que hemos escrito en código css dentro de la etiqueta cerrada <style>. El atributo type="text/css" es opcional ponerlo para que el navegador sepa de que tipo de código se trata.

Observa también que hemos metido el contenido de la etiqueta <style> dentro de los símbolos de comentario html. La razón de esto es porque hay navegadores antiguos que no soportan esta etiqueta; entonces, al encontrarse con este código lo tomará como comentarios html y así no lo mostrará en nuestra página web.

Es recomendable que escribas el código anterior en tu blog de notas. Empieza escribiendo primero la estructura html; después sigue por el cuerpo de la página y, finalmente, por el título de la página y la etiqueta <style>.

Para la tercera forma de implementar css, vamos a utilizar una nueva etiqueta html: la etiqueta <link>. Se trata de una etiqueta abierta, que sirve para establecer una conexión o enlace entre la hoja de estilo en cascada y el documento html.

<html>

  <head>

    <title>Mi página web con diseño</title>
    <!-- hacemos la conexión al documento css -->
    <link href="midiseño.css" type="text/css" 
     rel="stylesheet" />

  </head>

  <body>

    <h2>Hojas de estilo independientes</h2>

    <p>Podemos escribir hojas de estilo
    independientes que se pueden aplicar
    a cualquier documento html.</p>

    <p>Con solo enlazar la página con la
    etiqueta link aplicaremos todo el
    diseño escrito en el archivo css.</p>

  </body>

</html>

Cuando usamos una hoja de estilos independiente: un documento css; es importante asignarle a la etiqueta link el atributo rel. Este atributo es imprescindible y sirve para especificar si se trata de un diseño persistente, es decir, que nunca se va alternar con otro diseño (valor stylesheet); o bien si vamos a ir alternando con otros diseños (valor alternate stylesheet). Este aspecto es algo obsoleto, ya que los navegadores actuales carecen de capacidad para hacer que el usuario elija el estilo alterno que quiera, aún así hay que especificar.

El enlace que establece la conexión entre los dos archivos; el html y el css, se realiza a través del atributo html href="midiseño.css" que se encuentra en la etiqueta <link>. El valor que toma el atributo href es el destino de la hoja de estilo. En la figura 2 podemos apreciarlo más gráficamente.

El enlace con la hoja de estilo en cascada
Figura 2. El atributo href es imprescindible con
los documentos css externos

No cabe duda que la forma más ventajosa es la última que hemos visto; en un solo documento definimos todo el diseño de nuestra web, de manera que para cambiar el aspecto de todo un web tan solo tenemos que acudir al documento css. Queda pro ver otra forma de implementación css, pero no lo veremos por ahora porque es para trabajar de forma más avanzada.


Ir a:


Aprende Gratis 2017 © Mario Raja | página web responsive.