De Psd a Html: define tu estilo usando las Clases de CSS.

En este artículo aprenderás a definir tus propios estilos y aplicarlos a cada elemento del domcumento HTML. Esta es una de las herramientas MAS potentes que posee el CSS a la hora de pasar un Psd a Html.
Como vimos en el artículo “Maquetación web perfecta para buscadores“, en la maquetacion web podemos asignar estilos de texto, definiendo reglas CSS que nos ayudan a asignarle propiedades determinadas a las etiquetas de texto como de parrafo como <p>, y titulares <h1> al <h6>.

En el caso anterior, al definir un estilo para la etiqueta <p>, por ejemplo: texto de color rojo y en Bold, luego TODOS los textos que tengamos encerrados dentro de la etiqueta <p> tendrian esas propiedades.
Pero…..que sucedería si necesitamos tener diferentes estilos de texto para la misma etiqueta <p> ??? (algo que sucede comunmente cuando pasamos de psd a html)
Pues bien, aqui es donde hace su aparicion las Clases.

Creando tus Clases de estilos

La utilizacion de las clases de CSS nos permitirá especificar diferentes estilos para un mismo elemento, en este caso: la etiqueta <p> (textos de parrafo)
O tambien, generar nuestros propios estilo y aplicarlos a cualquier elemento del documento.

La forma correcta de definir una clase en nuestro archivo CSS es:

elemento.nombre_de_clase {
propiedad:valor;
}

Entonces por ejemplo si queremos poder aplicarle 3 colores diferentes a un mismo texto de etiqueta <p>, deberiamos definirlo asi en nuestro CSS:

p.amarillo {
color: yellow;
}

p.rojo{
color: red;
}

p.azul {
color: blue;
}

Y luego para aplicar estos 3 diferentes estilos en nuestro documento, deberiamo hacerlo asi en el HTML:

<p>Texto sin ningun estilo</p>
<p class”amarillo”>Texto en color Amarillo</p>
<p class”rojo”>Texto en color Rojo</p>
<p class”azul”>Texto en color Azul</p>

Como vemos, para aplicar el estilo que creamos, solo hace falta insertar class=”nombre_de_clase” , luego de la etiqueta que seleccionemos (en este caso <p>)
De esta forma podemos crear varias clases para la etiqueta <p> y aplicarlas en diferentes partes de nuestro documento.

Clases libres para cualquier elemento

Esta es a mi criterio, una de las mejores variantes de clases, y es la que utilizo a diario.
De trata de definir una clase, pero no asosiarla a ningun elemento del documento.
Entonces, esta “clases libre” podremos aplicarsela a cualquier elemento de nuestra pagina.

Para definir una clase sin asociarla a un elemento, solo tenemos que definirla como en el caso anterior, pero sin especificar una etiqueta de elemento.

.nombre_de_clase {
propiedad: valor;
}

Por ej, si queremos definir la misma clases “amarillo” que definimos en el ejemplo anterior, pero que no esté asociada a ningún elemento, basta con escribir:

.amarillo {
color: yellow;
{

Como se puede ver, en las clases no acosiadas a elementos, se omite el selector, es decir, se escriben comenzando con un punto “.” , siguiendo con el nombre que le queremos dar a la clase.

Luego, podremos aplicar esta clase a cualquier elemento del documento, de esta forma:

<p class=”amarillo”>Texto de parrafo amarillo</p>
<h1 class=”amarillo”>Titular en amarillo</h1>

Vale aclarar que las clases de pueden aplicar no solo a elementos de textos, sino a cualquier elemento del documento. (ya lo veremos más adelante)

Te propongo que practiques moidificando y creando tus propias clases, y asignándolas a los textos. Para eso te dejo aqui los archivos con algunos ejemplos que hice. (Descargar archivos)
Puedes modificarlo y crear otros.

En los próximos artículos, abandonaremos los elementos de texto, para comenzar con los elementos de estructuracion del domcumento <div>, y veremos también las diferentes propiedades CSS que puede adquirir un elemento del documento.

Como siempre, te propongo que me dejes tus comentarios o dudas, y yo personalmente las estaré respondiendo.

Anuncios

2 pensamientos en “De Psd a Html: define tu estilo usando las Clases de CSS.

  1. Pingback: La conversión de Psd a Html: el “karma” de los diseñadores. | Psd a Html: hazlo rápido y profesionalmente

  2. Pingback: De Psd a Html: Tus páginas más arriba en los buscadores (los textos) | Psd a Html: hazlo rápido y profesionalmente

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s