NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Creación de páginas web desde cero (4 Estilos)

09 de Noviembre del 2011 por Josep Antoni Bover, 5 visitas, 0 comentarios, 0 votos
Categorías : HTML, CSS.
La web está en segundo plano, animación en pausa.
Cargando animación...
Creación de páginas web desde cero (4 Estilos)

Llegamos a un punto interesante donde veremos que podemos cambiar la apariencia de prácticamente cualquier etiqueta.

Pero que podemos hacer realmente con los estilos CSS? Pues si os digo la verdad en la actualidad se pueden hacer maravillas con ellos, ya que nos permiten adaptar cualquier etiqueta a nuestras necesidades, y además podemos hacerlo de una forma en la que reutilizamos código, por lo que podemos por ejemplo aplicar el mismo estilo a varias etiquetas distintas.

Esto es muy interesante a la larga ya que nos ahorrara muchas líneas de código además de ofrecernos una versatilidad enorme en cuanto a la apariencia de nuestros documentos html.

Para empezar vamos a utilizar el atributo style. Este atributo lo podemos agregar a cualquier etiqueta que represente un objeto visible en el documento html, como por ejemplo en las etiquetas "body", "a", "img", "h1", etc...

En este tutorial utilizaremos los estilos CSS mediante el atributo style, pero debéis saber que esta forma es la menos recomendable, aunque pienso que es la mejor forma para empezar a tratar con ellos sin mucha dificultad.

Pongamos por ejemplo que queremos que nuestra página tenga un fondo negro, y que el texto sea de color blanco. Para ello necesitaremos incluir el atributo style en la etiqueta body indicando la que propiedad background-color tenga el color negro, y que la propiedad color tenga el color blanco.

Veamos el siguiente ejemplo :

Cambiando los colores del documento
1
<body style='background-color:black; color:white;'>

Como podéis observar dentro del atributo style se ha especificado "background-color:black; color:white;", background-color se refiere al color del fondo, y color se refiere al color del texto. En este caso se ha indicado los colores con las palabras black y white, pero por norma se suele utilizar una notación al estilo hexadecimal, o una notación RGB.

NOTA : Es muy importante escribir correctamente los estilos si queremos que funcionen correctamente. Observad que primero se escribe el nombre de la propiedad, luego se añaden ":" y se escribe el valor, y finalmente cerramos la propiedad con ";".

La notación hexadecimal consiste en una parrilla seguida de 6 dígitos que van del (0-9) y de la (A-F), por ejemplo para especificar el color negro en hexadecimal deberíamos poner "#000000", y para especificar el color blanco "#FFFFFF". De todas formas entiendo que quizás es la notación más complicada de entender y calcular por lo que intentare no utilizarla.

La notación RGB creo que es bastante más fácil de comprender, e incluso nos recordara a nuestra infancia cuando jugábamos en clase de plástica a mezclar los colores. RGB son las siglas de Red, Green y Blue, y para especificar un color debemos escribirlo de la siguiente forma "rgb(0, 0, 0)" que sería el equivalente del negro, y "rgb(255, 255, 255)" que sería el equivalente del blanco. Por si no ha quedado claro cada canal de color va de 0 a 255.

Realmente la notación RGB es muy parecida a la notación hexadecimal, pero con la diferencia de que en la RGB introducimos los valores en base(10), mientras que en la hexadecimal hay que introducirlos en base(16).

Os acordáis de que colores hay que mezclar para obtener el amarillo? pues con el RGB pasa lo mismo, mezclamos rojo y verde, y sacamos el color amarillo. Por lo tanto el color amarillo se expresaría de la siguiente forma "rgb(255, 255, 0)".

Con esto creo que ya deberíais ser capaces de cambiar básicamente los colores de prácticamente cualquier elemento, ya que al igual que como hemos hecho en la etiqueta "body" podemos hacer lo mismo en la etiqueta "p", o en la etiqueta "a", etc...

Pero los estilos CSS no se resumen simplemente a un color de fondo y aun color para el texto, a decir verdad soy incapaz de enumeraros todos los atributos CSS que existen en la actualidad, y es que actualmente el CSS3 está aún en fase de desarrollo, y no se puede saber con certeza que atributos más le añadirán.

Antes de continuar con los estilos CSS creo que es el momento de ver dos etiquetas nuevas : "div" y "span"

Veamos un ejemplo para las dos etiquetas :

Etiquetas div y span
1
2
3
4
5
6
7
8
9
<div style='background-color:rgb(255, 0, 0);'>
<p>Texto de prueba en el que utilizaremos varios colores : </p>
<p>
<span style='color:rgb(0, 255, 255);'>amarillo</span>
<span style='color:rgb(0, 255, 0);'>verde</span>
<span style='color:rgb(0, 0, 255);'>azul</span>
<span style='color:rgb(100, 100, 100);'>gris</span>
</p>
</div>

Texto de prueba en el que utilizaremos varios colores :

amarillo verde azul gris

Si en vez de utilizar las etiquetas span utilizáramos las etiquetas div, los textos quedarían separados automáticamente por nuevas líneas, es decir justo después de amarillo ocurriría un salto de línea y el texto verde quedaría inmediatamente debajo. Esta es la diferencia que quería que vierais entre las etiquetas div y las etiquetas span.

De todas formas su comportamiento se puede modificar mediante estilos CSS, por lo que tampoco hace falta que os toméis estas reglas por norma.

Bueno ya hemos visto de sobras las propiedades "background-color" y "color", ahora vamos a ver cómo podemos poner un borde de color negro a un span :

Estilo del borde
1
2
3
4
5
<p>
<span style='border-color:rgb(0,0,0); border-width:2px; border-style:solid;'>Texto enmarcado con solid</span>
<span style='border-color:rgb(0,0,0); border-width:2px; border-style:dotted;'>Texto enmarcado con dotted</span>
<span style='border-color:rgb(0,0,0); border-width:2px; border-style:dashed;'>Texto enmarcado con dashed</span>
</p>

Texto enmarcado con solid Texto enmarcado con dotted Texto enmarcado con dashed

En este último ejemplo utilizo las propiedades "border-color" para darle un color al fondo, "border-width" para especificar el tamaño del borde en pixeles, y "boder-style" para especificar el estilo de pintado del borde. Además de los tres estilos que os acabo de mostrar en este ejemplo existen varios mas, pero si os tengo que explicar uno a uno todos los valores que puede tener cada propiedad CSS no vamos a terminar los tutoriales ni para el 2020. Por ello os aconsejo que vayáis a google y busquéis "border-style", y en la primera entrada que os devuelva hay una web en la que nos describe todos los valores posibles.

La mayoría de veces os encontrareis con webs en ingles, espero que no sea mucho problema para vosotros porque este tipo de cosas suelen estar siempre documentadas en ingles. De todas formas a base de acostumbrarse uno aprende ingles rápido para estas cosas, además pensad que se utiliza un lenguaje muy básico y descriptivo.

Y con esto terminamos la cuarta parte del tutorial, si lo deseáis podéis ver el ejemplo online o descargar el ejemplo para poder editarlo en vuestro ordenador.

Ver Ejemplo Descargar Ejemplo

Podéis seguir con el siguiente tutorial HTML5 : Creación de páginas web desde cero (5 Más sobre los estilos).