Codificación aprenderaprogramar.com: CU01009D
ESTILOS POR DEFECTO
Podemos dar formato a nuestros documentos HTML de varias maneras: incluyendo propiedades CSS en las propias líneas de HTML (aplicación de estilos en línea), en la parte inicial del documento HTML (aplicación de estilos interna) o en un archivo de extensión .css independiente del archivo HTML (aplicación de estilos externa).
Antes de escribir nuestro primer código CSS remarquemos una cuestión importante: al crear un documento HTML este ya posee un estilo. ¿Cuál? El estilo por defecto que aplican los navegadores. Este estilo por defecto suele comprender un tipo de letra, color negro para el texto y color blanco de fondo para el texto. El estilo por defecto para los enlaces (links) suele ser color azul y subrayado, aunque esto puede variar según el navegador que utilicemos. Es importante tener esto en cuenta porque nos podemos encontrar que ciertos elementos se visualicen de distinta manera en dos navegadores diferentes (por ejemplo Internet Explorer y Mozilla Firefox) debido a que un navegador aplique un diferente estilo por defecto.
Considera el formulario en el ejemplo que venimos usando para el desarrollo del curso (código base del curso). Fíjate en la siguiente imagen cómo se visualiza el mismo código HTML en dos navegadores distintos sin haber aplicado estilos:
Podemos señalar algunas diferencias:
a) En el navegador 2 el botón “Enviar” aparece remarcado con un borde azul y es un poco más pequeño que en el navegador 1.
b) En el navegador 2 la visualización del textarea correspondiente al mensaje incluye un scroll en el lateral derecho, que no existe en el navegador 1.
c) Otras: por ejemplo la altura de la caja del textarea es más pequeña en el navegador 2 que en el navegador 1.
Aquí nos encontramos con algo a lo que debemos acostumbrarnos como desarrolladores web. En general, no es posible (o quizás sí sea posible, pero llevaría demasiado tiempo y sería demasiado costoso) conseguir “exactamente” la misma visualización en distintos navegadores web.
Muchas personas pasan horas tratando de “cuadrar” con exactitud los elementos de una página web y muchas veces este trabajo, o parte de este trabajo, carece de sentido, ya que al cambiar de navegador (o de sistema operativo con el mismo navegador) todo lo que se había cuadrado puede aparecer descuadrado, o al menos no exactamente como se pensaba, dando lugar a grandes decepciones.
Nuestra recomendación es no obsesionarse con pequeños detalles y, cuando se trate de desarrollos importantes, probar las webs en distintos navegadores y ordenadores. Para este curso empezaremos trabajando con un solo navegador ya que para el aprendizaje nos resulta suficiente. Nosotros usaremos Mozilla Firefox, pero puedes usar otro si lo deseas. Cuando hayamos avanzado iremos explicando algunos detalles o características específicas de los distintos navegadores. Cuando trates de visualizar las páginas web que construiremos durante el curso ten en cuenta que puedes obtener visualizaciones distintas de aquellas que mostramos nosotros debido a que tu navegador no interprete exactamente de la misma manera el código. No te preocupes ahora por los pequeños detalles, trata de aprender los conceptos e ideas que hay en torno a CSS, más adelante ya habrá tiempo de definir cómo se debe manejar la problemática del distinto comportamiento entre navegadores.
ESTILOS EN LÍNEA
Una de las formas más simples e intuitivas de dotar de estilos al código HTML es usando el atributo style que admiten la mayoría de las etiquetas HTML.
Supón que sobre el código de ejemplo que estamos utilizando en el curso deseamos que el texto de los elementos del menú se muestre de color verde y el texto de los párrafos de color azul. Para aplicar un estilo en línea utilizaremos esta sintaxis:
<nombreDeEtiqueta style = “propiedadCSS : valorEstablecido;” > … </nombreDeEtiqueta>
En nuestro caso para un párrafo usaríamos <p style =”color: blue;”> … </p>
Para aplicar el color verde a los elementos del menú, que están en una lista, podemos probar a aplicarle el atributo style y la propiedad color a la etiqueta <ul> … </ul>. El código quedaría como sigue:
|
<ul style = "color: green;"> |
El resultado obtenido lo vemos a continuación:
Podremos comprobar que no hemos obtenido el efecto deseado. Queríamos poner el texto de los elementos del menú en color verde y sin embargo continúa en color azul. Sí podemos observar, sin embargo, que las viñetas o iconos circulares que aparecen en el lateral izquierdo han cambiado de color negro a color verde. ¿Cómo explicamos este comportamiento? Tenemos que pensar en el modelo de cajas para comprender qué es lo que ocurre. El modelo de cajas para los elementos del menú sería el siguiente:
En este esquema tenemos cajas en tres niveles: la caja más exterior correspondiente a la lista, las cajas dentro de la lista correspondientes a cada uno de los elementos dentro de la lista, y las cajas más interiores correpondientes a las etiquetas <a> … <a> que definen los link.
El navegador actúa aplicando estilos desde los niveles más exteriores hacia los niveles más interiores, de forma que el estilo que se ve cuando existen varios es el más interior entre todos los posibles estilos que afectan a un elemento.
En este caso, toda la lista se establece con color verde, lo cual afecta a las viñetas y al texto. En las etiquetas <li> no existe estilo propio que contradiga el color verde. Sin embargo, los elementos link tienen un estilo propio, un estilo que en este caso es incorporado por defecto por el navegador, según el cual estos elementos aparecen en color azul y subrayados. Este es el último estilo que lee el navegador y el que aplica a la caja de los elementos <a> y esta caja al ser la más interna es la que se visualiza, mostrándose el texto en color azul al estar dentro de las etiquetas <a> … </a>.
Para resolver este conflicto añadiremos estilos que modifican el color para los links:
|
<ul style = "color: green;"> |
Ahora sí hemos conseguido el efecto deseado.
Fíjate en que hemos mantenido el estilo aplicado a la etiqueta <ul> … </ul> par que el color de las viñetas se mantenga en verde. Si no aplicáramos ese estilo, el estilo aplicado sería el estilo por defecto según el cual las viñetas se mostrarían en negro.
Nos planteamos ahora dejar las viñetas en color rojo y el texto del menú en color verde pero sin subrayado. Para ello tendremos que añadir una propiedad al link que elimine el estilo subrayado que por defecto incorpora el navegador. Esta propiedad será text-decoration cuyos posibles valores son none (ninguno), underline (subrayado), overline (línea superior), line-through (tachado). El código será el siguiente:
|
<ul style = "color: red;"> |
Y el resultado:
Decimos que hemos sobreescrito una propiedad CSS, en este caso la propiedad de subrayado de los links, reemplazándola por una nueva propiedad.
Hay una cosa que llama la atención: vemos que el código CSS está “entremezclado” o “embebido” dentro del código HTML. Por ejemplo en <ul style="color: red;"> vemos que HTML y CSS están íntimamente relacionados, tanto que resulta difícil distinguir qué es HTML y qué es CSS. Esta es una característica a la que debes acostumbrarte, en los desarrollos web se entremezclan distintos lenguajes o metalengajes. Podríamos decir que HTML y CSS son sublenguajes de un supralenguaje: el lenguaje de los desarrollos web.
EJERCICIO
A partir del siguiente código:
|
<!DOCTYPE html> <html> <head> <title>Portal web - aprenderaprogramar.com</title> <meta name="description" content="Portal web aprenderaprogramar.com"> <meta name="keywords" content="aprender, programar, cursos, libros"> <meta charset="utf-8"> </head> <body> <p><a href="principal.html" title="Página principal" >Ir a la pagina principal</a></p> <h1>Novedades</h1> <p>Aquí presentamos las novedades del sitio.</p> <h3>Lanzamos el producto X-FASHION</h3> <p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p> <p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p> <h3>Mejoramos el producto T-MOTION</h3> <p>Hemos lanzado una nueva versión del producto T-MOTION</p> <p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p> </body> </html> |
Modifica el código HTML anterior para cumplir con estos requisitos mediante la aplicación de estilos en línea:
a) La etiqueta h1 debe mostrar su texto en color rojo.
b) La etiqueta h3 con el texto relativo a X-FASHION debe mostrar su texto en color verde.
c) La etiqueta h3 con el texto relativo a X-MOTION debe mostrar su texto en color azul.
d) Todos los párrafos deben mostrar su texto en color brown (marrón).
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
