Tutorial básico de CSS #1.
Lo prometido es deuda y en Silentuz empezaré un listado de varios tutoriales con información básica para adquirir
conocimientos para el uso y manejo del CSS dentro de Gabito Grupos. Si este tutorial te ha sido de provecho por favor,
no dudes en dar crédito y colocar uno de nuestros codes en tu sitio.
Primero que nada empezaremos con familiarizarnos con los nombres de las funciones o etiquetas que se
utilizan en el CSS, y en general también con el HTML. Pondré los más básicos para que vayamos identificandonos con ellos.
LINE-HEIGHT:Tiene que ver con el espacio entre lineas dentro de un parrafo.
Mientras más grande sea la letra más PX (pixeles) debe tener para que no quede tan junta en el parrafo.
Ejemplo:
Silentuz
Silentuz
LETTER-SPACING: Se ocupa del espacio entre las letras, ya sea alejandolas o acercandolas.
Ejemplo para alejar y para acercar:
letter-spacing:2px; ó letter-spacing:-2px;
Silentuz
Silentuz
Silentuz
Silentuz
FONT-FAMILY: Se refiere a la tipografia.
Ejemplo para alejar y para acercar:
font-family:georgia; ó font-family:century gothic;
Silentuz
Silentuz
FONT-SIZE: Especifica el tamaño de la fuente o tipografia.
Ejemplo:
font-size:8px; ó font-size:14px; ó font-size:24px;
Silentuz
Silentuz
Silentuz
TEXT-ALIGN: Con esto marcaremos la alineación de nuestro texto, centrado, a la izquierda, a la derecha o justificado.
Este es más visible y/o notorio con parrafos.
Ejemplo:
text-align:center; ó text-align:right;
COLOR: Determina el color del texto, se puede colocar como rgb(??,??,???) o #?????? dependiendo con que te identifiques mejor.
Ejemplo:
color:#000000 ó color: rgb(0,0,0)
BACKGROUND-COLOR: Aqui se determina el color de fondo para determinado texto, se puede colocar igual que el anterior (COLOR).
Ejemplo:
background-color:#000000 ó background-color: rgb(0,0,0)
TEXT-SHADOW: Le pone sombra al texto especificado (Nota: algunos exploradores no pueden reconocerlo).
Conforme des mayor numero de px en cada opción, así será lo que se moverá a los lados la sombra bajo el texto y lo
difuminada que puede estar.
Ejemplo:
text-shadow: 1px 0px 0px #7b7b7b ó text-shadow: 0px 2px 2px #7b7b7b
Silentuz
Silentuz
TEXT-DECORATION: Se refiere a la decoración en el texto, como Subrayado, tachado, etc.
Ejemplo:
text-decoration:underline; ó text-decoration:line-through;
Silentuz
Silentuz
TEXT-TRANSFORM: Mofidica tu texto segun como lo quieras: Mayusculas, minusculas, etc.
text-transform:uppercase; ó text-transform:lowercase;
FONT-STYLE: Este va de acuerdo a si quieres tu texto en Negritas, cursivas, etc.
font-style:italic;
Por ahora dejaré hasta aquí el tutorial, más adelante mostraré otras funciones exclusivas para CSS, ya que estas son también utilizables para
el lenguaje HTML usando la etiqueta de SPAN STYLE. Espero que les haya servido, dejen sus dudas y comentarios.
Tema anterior
Primer 