Pequeña introducción al CSS
¿Qué es CSS?
Estas siglas significan Cascade Style Sheet, traducido Hoja de estilo en cascada o simplente Hojas de estilo. Esta lenguaje nos da la posibilidad de manejar la presentación de la estructura de una página, ya sea en HTML o XML.
Después de esta nano introducción nos vamos a las formas de aplicar este lenguaje con ejemplos simples.
Formas de aplicar los estilos.
Existen tres formas de aplicar las reglas de estilos. Las dos primeras formas van dentro de la cabecera, es decir, dentro de las etiquetas <head></head>
Ejemplos, con poca teoría:
1. Hoja de estilo interna: Dentro del documento
<style type="text/css"></style>
Simple. Sólo aplicas las reglas en la cabecera. No más.
Caso: Darle el siguiente formato a todo texto que se encuentr en el documento: Fuente Calibri, tamaño 14 píxeles y color azul.
<style type="text/css">
body { font-family:Calibri; font-size:14px; color:blue; }
</style>
Puedes ver el ejemplo aquí.
2. Hoja de estilo externa: Vinculando la hoja de estilo
<link href="estilo.css" rel="stylesheet" type="text/css" />
Lo que hace esta línea de código es Vincular la hoja de estilo con el documento actual. Es diferente a importar una hoja de estilo. El archivo vinculado no necesita las etiquetas <style></style>, como en el caso de Hoja de estilo interna.
Caso: Del anterior.
<link href="ejemplo2.css" rel="stylesheet" type="text/css" />
Puedes ver el ejemplo aquí y el código aquí.
3. Estilo en linea: Directamente al elemento (en la etiqueta).
<div style="propiedad:valor"></div>
La etiqueta div es de ejemplo. Esta forma la puedes usar casi para cualquier etiqueta. Ej: p, a, span, body...
Caso: Se desea que el color de fondo de la página sea aleatorio de entre estos 6 colores: rojo, azul, verde, amarillo, negro y blanco... Para esto aplicaremos un poco de PHP.
Primero se crea un array con los colores que se desean.
<?php $color = array("#F00", "#00F", "#FF0", "#0F0", "#000", "#FFF"); ?>
En la etiqueta body se inserta el estilo con la regla del color del fondo. Para esto, dentro del "style" se coloca la propiedad: valor. En este caso, como ejemplo sería background:#FFF
<body style="background: <?php echo $color[mt_rand(0,6)]; ?> "></body>
Puedes ver el ejemplo aquí.
De estas 3 formas, la más recomendable es la segunda. ¿Por qué?. Porque código de el documento (la página) queda mucho más limpio. El estilo queda en caché; y solo es necesario que cargue una vez.
* Una página puede tener varias hojas de estilos
* La última versión es la CSS2, la CSS3 está en desarrollo
* Existen diferencias en cuanto a propiedades en los diferentes navegadores
Votación
Universidad de San Martín de Porres
Facultad de Ingeniería y Arquitectura
Puedes reproducir, difundir y modificar el contenido de esta web haciendo referencia a la fuente.
Servidores gracias a
Comentarios
Enviar un comentario nuevo