Claro que lo entiendo. Incluso un niño de cinco años podría entenderlo. ¡Que me traigan un niño de cinco años!

¿Cómo aplicamos el CSS?

Categorías: CSS y HTML por loretahur el 20 de diciembre, 2006

Existen tres formas de aplicar los estilos a nuestro código HTML:

  1. Directamente sobre un elemento: podemos aplicar el estilo a un bloque concreto de HTML, utilizando el atributo style. Es decir, dentro de una etiqueta definir cómo será su aspecto. Obviamente no es la mejor manera de proceder porque tendríamos que definir bloque por bloque.

    Ejemplo: <p style="font-size: 12pt; color: #000000">. Aquí estamos definiendo sobre este párrafo en concreto que la letra sea de tamaño 12 y de color negro. Esto no se aplicará sobre ningún párrafo más.

  2. En el propio documento: se pueden declarar los estilos en la cabecera del documento para poder utilizarlo en cualquier parte del HTML. Para ello se colocan entre las etiquetas <style>..atributos..</style>
  3. Ejemplo:

    <head>
    ...
    <style type="text/css">
    h1
    {
      border-width: 1;
      text-align: center
    }
    </style>
    </head>

    Aquí hemos definido todas las cabeceras que se encuentre entre la etiqueta <h1>. Como vemos, la etiqueta <style> tiene un atributo denominado type donde se define el tipo de la hoja de estilo. Puede tomar los valores: “text/css” y “text/javascript”.

  4. En un documento externo: creando una hoja de estilos ubicada en un fichero externo con extensión .css. En mi opinión es la forma más elegante puesto que hace que nuestra página HTML quede más simple al no incluir todas las líneas de estilo (sólo sería necesaria la declaración del lugar en el que se encuentra el .css). Además, con esta forma queda aún más clara la separación entre contenido y presentación.

    Para hacer referencia a una hoja de estilos externa desde un documento HTML se pueden utilizar también dos métodos:

    • El elemento <link>. Una vez hecho link, se pueden utilizar los estilos de la misma manera que si estuviesen definidos en el propio documento.
    • Ejemplo:
      <head>
      ...
      <link href="hoja_de_estilos.css" rel="stylesheet" type="text/css">
      </head>

    • El elemento @import. Por ejemplo:

      @import “estilos.css”;
      @import url(“/estilos/estilos.css”);

Entradas relacionadas:

  • No related posts

  • Puedes dejar un comentario, o un trackback. Comparte este post RSS 2.0

    10 comentarios en " ¿Cómo aplicamos el CSS? "

    1. morethanenoguh dice:

      me parece muy interesante todo lo que nos estas explicando. ¿Nos pondrás también ejercicios prácticos? 😀 Muchísimas grácias, no hay nada mejor que aprender mientras miramos tus blogs. El BOFH me encanta, trabajo de Help Desk, así que entiendo muy bién todo lo que explicais 😀

      Bueno, que me voy que estamos en el curro 😉

      Grácias de nuevo!!!

      20 de diciembre, 2006 a las 16:21

    2. loretahur dice:

      Pues sí que os tendré que poner deberes, y como nos los hagáis… 😀

      22 de diciembre, 2006 a las 20:27

    3. corsaria dice:

      Existe una variante del caso #3 muy interesante. Es la directiva @import.

      Mejor explicado:
      http://www.tierradenomadas.com/tw007.phtml

      Por cierto muy bueno todo lo que llevas explicado. 😉
      Saludos. 🙂

      23 de diciembre, 2006 a las 11:26

    4. eyko dice:

      Como ya han dicho (corsaria), para enlazar a hojas de estilo externas, está @import. Es preferible el uso de @import antes que link en lograr una web semántica. En el caso que uses estilos alternativos, puedes utilizar link como enlazador.

      27 de diciembre, 2006 a las 18:03

    5. loretahur dice:

      Muchas gracias por el aporte corsaria y eyko. Ya he actualizado la entrada (así da gusto aprender de forma colectiva)

      28 de diciembre, 2006 a las 23:15

    6. M@k, el Buscaimposibles dice:

      Andereño, andereño ;-)… ¿es cierto que si se usa un css externo los lectores de feeds no se enteran y no aplican el estilo que queremos?

      6 de enero, 2007 a las 15:06

    7. loretahur dice:

      @Mak: yo diría que no es cierto. De hecho, este blog tiene un css externo y sí se aplica. Sin embargo, te lo digo con la boca pequeñita ;-).

      7 de enero, 2007 a las 15:47

    8. M@k, el Buscaimposibles dice:

      Pues Bloglines, por ejemplo, saca los titulos de los posts en azul, en lugar de en rojo…

      9 de enero, 2007 a las 22:58

    9. loretahur dice:

      @Mak: Pero es que de lo que se alimenta Bloglines es de los feeds y no estoy muy segura de que esos feeds carguen css o los mismos css que el blog normal.

      10 de enero, 2007 a las 23:09

    10. Aprendiendo CSS » Atributos: “@import vs link” dice:

      […] es que no hace mucho Loretahur escribió un post sobre las diversas formas de añadir los estilos a una página web, a partir del cual, entre los […]

      4 de enero, 2008 a las 1:14

    Deja tu comentario

    Cerrar
    Enviar por e-mail