Hola, con esta web y en conjunto con htmlnight.com y phpnight.com, intento armar una pequeña comunidad de webs sobre desarrollo web, con tutorials, recursos y artículos sobre desarrollo web, particularmente aquí sobre CSS ;).
Espero que sea de utilidad y agrado para ti, tanto como lo es para mi hacerla...
Marcelo.
Publicita en CSSnight

Nuevo sistema RSS

Hoy he configurado el nuevo feed RSS manejado através de FeedBurner.

Puedes suscribirte vía RSS o también puedes elegir que los posts lleguen a tu mail suscribiendote vía email aquí (o completando el campo en la barra lateral derecha).

Centrar verticalmente con CSS

Muchas veces he llegado al punto de no saber cómo poder hacer para centrar un texto verticalmente en un párrafo o div.
Podemos conseguir centrar verticalmente un texto con CSS aplicando un alto de línea (line-height) igual al alto (height) del elemento donde queremos centrar verticalmente.

Por ejemplo si tenemos un párrafo de 80px de altura, sólo debemos dar line-height:80px;

Código HTML:


<div id="vert_cent">
<p>Texto centrado verticalmente</p>
</div>

Código CSS:


div#vert_cent {
height:80px;
width:350px;
margin:10px auto;
background:#eee;
border:1px solid #666;
padding:0px;
}
div p{
margin:0px;
padding:0px;
line-height:80px;
}

Aquí el ejemplo funcionando:

Texto centrado verticalmente

Estilizar hipervínculos

Hoy veremos algo en extremo sencillo, pero que puede ayudar a quienes están comenzando en esto de Hojas de Estilos.

¿Cómo podemos quitar el subrayado y el color azul (#0000FF) a los links?
Sencillo, para quitar el subrayado, tenemos una propiedad llamada text-decoration, la cuál puede tener como valores underline (subrayado) o none (sin nada), entre otras. De modo que bastaría con aplicar text-decoration:none; y ya tendríamos el link sin subrayado.

Ahora para asignar un nuevo color, simplemente usaremos color:#HEX; suplantando HEX por el valor en hexadecimal que deseemos darle. Veamos un ejemplo:


a:link{
text-decoration:none;
color:#7799CC;
}

Lo cuál daría como resultado que nuestros links se verían así: Soy un hipervínculo diferente :)

Ventajas de utilizar hojas de estilos

Citaré algunas ventajas de usar hojas de estilos CSS en nuestros desarrollos:

  • Nos permite tener controlado todo el aspecto visual de un sitio en un único lugar, esto nos facilita enormemente la labor, a la hora de cambiar algun estilo, por ejemplo el color de los hipervínculos ;)
  • Se pueden tener distintas hojas de estilos, para mostrar el sitio, dependiendo de alguna variable, por ejemplo, podemos tener definida una hoja de estilos para la web, otra para imprimir y una diferente para ser vista en medios móviles.
  • De la mano con lo anterior, podemos incluso permitir a nuestros usuarios elegir entre varias hojas de estilos, la que sea más acorde a sus preferencias o necesidades.
  • Permitimos también a usuarios con discapacidad visual o similar, aplicar su propia hoja de estilos, e incluso hacer nuestra web accesible para navegadores para ciegos (navegadores auditivos).
  • Y por último nos permiten un código más claro y semántico, separando completamente el contenido, de la presentación :)

¿Un archivo CSS debe tener un orden?

Hoy Julián me hizo una pregunta, y se me ocurrió que podía ser interesante publicarla para que todos lo tomemos en cuenta en nuestros desarrollos.

¿Un archivo CSS debe necesariamente tener un orden? ¿Es importante que va primero y que no?
La primer respuesta es, no, no necesariamente debe tener un orden. Una hoja de estilos no debe estar ordenada bajo ningun criterio para funcionar, digamos, el navegador lo entenderá de todas formas.
Lo segundo que diría sería, pero si sería importante mantener un orden, básicamente por 2 motivos:

  1. Prolijidad, orden y organización. Es mucho más cómodo y ordenado, y también más facil de entender, un código ordenado, jerarquizado, incluso con titulos comentados, etc.
  2. Hay un detalle y es que puede pasarnos que con un estilo sobreescribamos otro, y en ese caso, el que se asigne último será el que valga. Por ejemplo:

p {
margin:0px;
color:#000000;
}
(...)
p {
color:#666699;
}

En éste caso los párrafos tendrán color #666699; dado que es el último en ser definido.
Éste fue un ejemplo muy sencillo, pero en hojas de estilos con varios cientos de líneas, un detalle así, puede generarnos terribles dolores de cabeza!

Así que orden y organización, nos ayudarán mucho en nuestra tarea!

Hojas de estilo en cascada

¿Qué son las hojas de estilo?
Son un lenguaje que nos permite definir la forma en que se muestra un documento html o xml.
Se componen de una serie de sentencias o reglas que le dicen al navegador de que forma debe mostrar un documento.

La idea que se buscó con el desarrollo de CSS fue la de separar la estructura de un documento de su presentación.

Las reglas de estilo se forman así:


selector { propiedad: valor; }

Pueden definirse múltiples declaraciones de estilo para un solo selector, siempre separándolas con punto y coma (;)


selector { propiedad1: valor1; propiedad2: valor2; }

Muchas veces, por un tema de comodidad se separan en renglones, pero esto ya es a gusto del consumidor ;)


selector {
propiedad1: valor1;
propiedad2: valor2;
propiedad3: valor3;
}

Hay 3 distintas formas de uso de las hojas de estilos:

  1. Hoja de estilos externa: es un archivo externo a nuestro documento html, de extensión .css en el cuál definimos las reglas de estilos y el cuál es llamado desde el documento html.
  2. Hoja de estilos interna: en este caso, las reglas de estilos van dentro del tag <head> del documento html.
  3. Estilos en línea: aquí lo que hacemos es incluir los estilos directamente dentro de la etiqueta html a la que deseamos aplicarle el estilo (esta forma es la menos adecuada y recomendable).

CC - 2008 - CSSnight - Sitemap
CMS: WordPress, theme by nEUtrOniCs, translated and modified by Marcelo Ferreiro.