Tutorial 4 - Estilos de párrafo
Seguimos con el curso, ahora lo que estamos haciendo es bastante sencillo , pero siempre es bueno tenerloAhora 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/ |