Edición de Texto en CSS3
Las páginas web, en su mayoría son texto, es por ello que CSS nos proporciona varios estilos o formatos que le podemos proporcionar a nuestro texto.
No nos referimos directamente a la fuente, la cual veremos posteriormente como añadir, pero si a los clásicos de Negritas, Cursiva, Subrayado, Tachado, entre otros.
Veamos el siguiente ejemplo que contiene una gran variedad de estilos en una documento.
Por fines prácticos, los estilos CSS serán embebidos dentro de las etiquetas de <head> y </head>, pero recuerde que la que nosotros debemos emplear preferentemente el enlace externo visto en la Lección 2 de este tutorial.
<!DOCTYPE HTML><html lang = "es"><head><title>textManipulation.html</title><meta charset = "UTF-8" /><!-- En este caso los nombres de los estilos correspondientes alas clases, están en ingles para facilitar su relación con laespecificación del estilo en CSS, pero recuerde que usted es librede modificaros para que le sea mas fácil--><style type="text/css">.italic {font-style: italic;}.bold {font-weight: bold;}.underline {text-decoration: underline;}.strikeThrough {text-decoration: line-through;}.center {text-align: center;}.right {text-align: right;}.sans {font-family: sans-serif;}.big {font-size: 200%;}</style></head><body><p>Este párrafo no tiene estilo alguno</p><p class = "italic">Este parrafo tiene el estilo de cursivs</p><p class = "bold">Este párrafo tiene el formato "bold"</p><p class = "underline">Este párrafo tiene e estilo de subrayado.</p><p class = "strikeThrough">Este párrafo tiene el estilo de tachado</p><p class = "center">Este párrafo esta alineado al centro</p><p class = "right">Este párrafo esta alineado a la derecha</p><p class = "sans">Este párrfo emplea la fuente sens-serif</p><p class = "big">Este párrafo tiene un formato de letra grande</p><p class = "center underline">Este párrafo ocupa una combinación de clases</p></body></html>
El código anterior nos muestra una serie de párrafos con una referencia de clases, la cual se relaciona a los estilos especificados dentro del <head> y </head>, los cuales en el código están de color azul.
Pero preste atención al último párrafo el cual emplea una combinación de clases.
Recuerde que cuando vimos referencias en CSS en la Lección 3, dijimos que el "id" se emplea para un elemento único dentro del documento y solo puede atraer los estilos de la especificación por (#id) en CSS, y que en el caso de "class" era mas flexible, y aquí podemos ver como a un mismo elemento, en este caso un párrafo <p>, le podemos dar varios estilos, haciendo uso de diferentes clases las cuales están separadas por un espacio.
Veamos como trabajan los Estilos
- font-style
- Con este atributo podemos dar estilo al texto de cursivas, en formato normal y oblicua (inclinado hacia atrás)
- Los valores que le podemos dar son:
p {
font-style: normal;
font-style: italic;
font-style: oblique;
}
- font-weight
- Con este atributo especificamos si la letra aparece en negritas o normal
- Los valores que le podemos dar son:
p {
font-weight: bold;
font-weight: normal;
}
- text-decoration
- El atributo de text-decoration, generalmente se emplea para quitarle el formato predefinido a un vínculo con el valor de "none", aunque también puede proporcionar otros estilos a este atributo.
- Los valores que le podemos dar son:
p {
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: none;
}
- text-align
- El atributo text-align sirve para alinear el texto o algún párrafo a la izquierda, al centro o a la derecha, también tiene el valor para poder justificar el texto.
- Los valores que le podemos dar son:
p{text-align: center;text-align: left;text-align: right;text-align: justify;
}
- font-family
- Con este atributo tenemos la posibilidad de especificar el tipo de fuente de nuestro documento.
- Para este atributo posteriormente les mostraré un vídeo de las diferentes maneras para implementar las fuente.
p{
font-family:"Times New Roman",Georgia,Serif;
}
- font-size
- Con este atributo podemos especificar el tamaño de la letra.
- Para este atributo el valor se especifica de manera numérica con diferentes unidades como (pixeles "px", porcentaje "%", o em, donde esta ultima especifica una medida en relación con la letra "m" del abecedario, la cual es la mas ancha de todas.
- Tambien podemos especificar los valores con medidas predefinidas como x-small, small, medium, larg, x-large etc.
- Las diferentes formas de especificar los valores de este atributo son:
p{
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: smaller;
font-size: larger;
font-size: 12px;
font-size: 2em;
font-size: 85%;
font-size: inherit;
}
Bien pues hasta aquí las especificaciones para los estilos aplicados a textos, por el momento ustedes practiquen aplicando diferentes valores a los estilos y apliquelos uno por uno, experimente diferentes combinaciones hasta que se sienta cómodo al emplear estos elementos.
Por el momento, por mi parte es todo.
Recuerden Compartir y Darle
Hasta la Próxima
Recuerden Compartir y Darle
Hasta la Próxima
No hay comentarios:
Publicar un comentario