Capitulo 6 Texto

Capitulo 6 Texto

Tipografia

CSS Permite aplicar estilos variados y complejos a los textos de las paginas

Color

Como su propio nombre lo dice, sirve para cambiar el color del texto, por defecto biene en negro

h1 { color: #369; }
p  { color: black; }
a, span { color: #B1251E; }
div { color: rgb(71, 98, 176); }

Font-family

Se utiliza para indicar el tipo de letra que se muestra en el texto

font-family: Arial, Helvetica, sans-serif;
font-family: "Times New Roman", Times, serif;
font-family: "Courier New", Courier, monospace;
font-family: Georgia, "Times New Roman", Times, serif;
font-family: Verdana, Arial, Helvetica, sans-serif;

Font-size

Sirve para modificar el tamaño de la letra en el texto

• tamaño_absoluto: indica el tamaño de letra de forma absoluta mediante alguna de las siguientes palabras clave: xx-small, x-small, small, medium, large, x-large, xx-large.
• tamaño_relativo: indica de forma relativa el tamaño de letra del texto mediante dos palabras clave (larger, smaller) que toman como referencia el tamaño de letra del elemento padre.

Font-weight

Sirve para cambiarle la anchura de la letra

#especial em {
  font-weight: bold;
}
#especial strong {
  font-weight: normal;
  background-color: #FFFF66;
  padding: 2px;
}

Font-style

Sirve para darle al texto cursiva, negrita.

#especial em {
  font-weight: bold;
  font-style: normal;
}
#especial strong {
  font-weight: normal;
  font-style: italic;
  background-color:#FFFF66;
  padding: 2px;
}

Font-variant

Esta no es muy utilizada, ya que solo permite mostrar texto con mayusculas pequeñas

#especial {
  font-variant: small-caps;
}

Font

El orden en el que se deben indicar las propiedades del texto es el siguiente:

• En primer lugar y de forma opcional se indican el font-style, font-variant y font-weight en cualquier orden.
• A continuación, se indica obligatoriamente el valor de font-size seguido opcionalmente por el valor de line-height.
• Por último, se indica obligatoriamente el tipo de letra a utilizar.

font: 76%/140% Verdana,Arial,Helvetica,sans-serif;
font: normal 24px/26px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
font: normal .94em "Trebuchet MS",Arial,Helvetica,sans-serif;
font: bold 1em "Trebuchet MS",Arial,Sans-Serif;
font: normal 0.9em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
font: normal 1.2em/1em helvetica, arial, sans-serif;
font: 11px verdana, sans-serif;
font: normal 1.4em/1.6em "helvetica", arial, sans-serif;
font: bold 14px georgia, times, serif;