Atributos para fuentes y textos.
Comenzamos viendo una serie de atributos de CSS que aplican sobre los textos de la página y las fuentes tipográficas.
color: Este atributo sirve para definir el color del texto de un elemento. Lo admiten casi todas las etiquetas HTML, ya que en casi todas podemos colocar texto.
Podemos colocar los colores con valores RGB, con nombres y otras anotaciones. Para más información lee el artículo sobre los colores en CSS.
h1 {
color: blue;
}
.destacar {
color: #ff3355;
}
font-size:Sirve para indicar el tamaño de las fuentes de manera exacta, permitiendo distintos tipos de unidades CSS, absolutas y relativas.
Además, aunque no se usa mucho, existen como varios tamaños definidos por nombres, como xx-small, x-small, small, medium, large, x-large, xx-large, que dejan a juicio del navegador qué tamaño exacto usar.
footer {
font-size: 1.25rem;
}
div.nota {
font-size: small;
}
font-family: Con este atributo indicamos la familia tipográfica que tendrán los elementos. Podemos indicar valores de fuentes específicas o algunos nombres de fuentes genéricos.
article {
font-family: verdana;
}
p {
font-family: serif;
}
font-weight: Este atributo indica la espesura del texto. Se usa mucho para indicar que queremos un texto en negrita, pero también existen espesuras más finas que la normal, que son interesantes como recurso de diseño.
b {
font-weight: bolder;
}
h1 {
font-weight: 300;
}
font-style: Este atributo sirve para indicar si queremos fuente oblícua, es decir, itálica.
Los valores posibles son:
Atributos para bloques de texto.
line-height: Este es un estilo fundamental para facilitar la lectura del texto. Sirve para definir la altura de las líneas del texto. Por tanto, podemos usarlo para especificar el espaciado entre líneas.
li {
line-height: 24px;
}
body {
line-height: 1.4em;
}
text-decoration: Este atributo permite definir la decoración del texto, lo que equivale en la práctica a si está subrayado o tachado, o nada de eso.
Un uso típico es quitarle el subrayado a los enlaces:
a {
text-decoration: none;
}
text-align: Este atributo sirve para indicar la alineación del texto. Es uno de esos atributos que solamente tiene sentido aplicar sobre bloques de texto, como los párrafos.
Los valores de alineación que podemos usar son:
div.centrado {
text-align: center;
}
.columna-numerica {
text-align: right;
}}
text-align: Este atributo sirve para indicar la alineación del texto. Es uno de esos atributos que solamente tiene sentido aplicar sobre bloques de texto, como los párrafos.
Los valores de alineación que podemos usar son:
text-indent: Este atributo permite establecer un sangrado o indentación (como un margen a la izquierda). No se suele usar mucho, la verdad, ya que es algo más típico de medios impresos.
p {
text-indent: 16px;
}
text-transform: Este atributo permite hacer transformaciones sobre el texto, que afectan al tamaño de caja (si son mayúsculas o minúsculas).
Es bastante útil como criterio de diseño. Los valores que podemos usar son estos:
- uppercase (todas en mayúsculas)
- capitalize (la primera letra de cada palabra en mayúscula)
- lowercase (todas en minúscula)
- none (lo deja tal cual esté en el código HTML de la página)
h3 {
text-transform: uppercase;
}
Publicaciones Relacionadas
