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

Viendo categoría Dudas

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 :)

¿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!

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