Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje30-11-2012, 13:46 (UTC)    
Título del mensaje: Tutorial 4 CSS : Estilos de párrafo

Seguimos con el curso, ahora lo que estamos haciendo es bastante sencillo , pero siempre es bueno tenerlo

Ahora daremos estilos a los párrafos

text-decoration:Le darems estilos diferentes al parrafo

Ejemplos con cada uno de los textos
Código:
<div id="subrayarlo">
 subrayarlo
</div>
<div id="sobrerayarlo">
sobrerayarlo
</div>
<div id="tacharlo">
tacharlo
</div>
<div id="nada">
Nada
</div>

Código:

#subrayarlo{
text-decoration:underline;
}
#sobrerayarlo{
text-decoration:overline;
}
#tacharlo{
text-decoration:line-through;
}

text-align:Con esta opción podremos alinear el texto a la derecha , izquierda, centrarlo o justificarlo
Código:
<div id="derecha">
 Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor
</div>
<div id="izquierda">
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor
</div>
<p>
<div id="centro">
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor
</div>
<p>
<div id="justificado">
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.<br> Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor
</div>

Código:
#derecha {
text-align:right;
}
#izquierda{
text-align:left;
}
#centro{
text-align:center;
}
#justificado{
text-align:justify;
}

text-indent : Realizaremos una tabulación con el texto poniendo la medida que queramos
Código:
<div id="indent">
 Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor
</div>

Código:
#indent{
text-indent:15px;
}

text-transform : Convierte el texto a mayúsculas o minúsculas
Código:
<div id="cambiar1">
Cambiar1
</div>
<div id="cambiar2">
Cambiar2
</div>

Código:
#cambiar1{
text-transform:lowercase;
}
#cambiar2{
text-transform:uppercase;
}


Cita:
http://www.hazunaweb.com/


------
- ¿El tutorial esta caducado o ya no funciona? Por favor de aviso a algun moderador haciendo click aqui


Ultima edición por cursopwg el Mie Feb 13, 2013 9:47 am; editado 1 vez
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group