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 Trucos y tips

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

Bienvenido a CSSnight!

Luego de montar y hechar a andar PHPnight, web en la que escribo artículos sobre PHP y tutorials de PHP, decidí comprar, y guardar por el momento, los dominios HTMLnight.com y CSSnight.com, otras de mis pasiones y temas sobre los que se y me gusta aprender más y más, día a día…

En esta web publicaré recursos, tutoriales y artículos sobre CSS y maquetación web en general, evidentemente la web estará estrechamente ligada a HTMLnight, dado que ambas temáticas se combinan y complementan a la hora de maquetar un sitio web y luego a su vez, pueden utilizarse en conjunto con PHP para desarrollar scripts y aplicacion es web.
Esa idea es entonces lo que me motivó a poner en marcha estas 3 webs, intentando generar una comunidad o conjunto de webs que traten a fondo la temática del Desarrollo Web!

Por ahora lo único que siento que va faltando es un sitio sobre diseño web (Photoshop, Illustrator, Fireworks, técnicas de diseño, etc…), ¿cómo te gustaría que se llame? Si tienes alguna idea, y deseas compartirla, escríbeme!

¿Tienes algún artículo sobre desarrollo web que desees que publique? ¿Quieres escribir para PHPnight, CSSnight o HTMLnight?
¡Pónte en contacto!

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