TEMA 7 Formato del texto

Transcripción

1 TEMA 7 Formato del texto Tamaño Para cambiar el tamaño del texto, la propiedad CSS que se utiliza es font-size. Existen varias técnicas a nuestra disposición para especificar el tamaño del texto: Usando el tamaño absoluto: en píxeles, pulgadas o milímetros. Este método es muy preciso, pero es recomendable utilizarlo sólo cuando sea absolutamente necesario, ya que puede indicar un tamaño demasiado pequeño para algunos lectores, y por otro lado puede presentar problemas cuando deseamos que nuestra página sea visible en varios dispositivos de dimensiones diferentes (por ejemplo, ordenadores o teléfonos móviles). Indicando el tamaño relativo: porcentaje, em o ex, esta técnica tiene la ventaja de ser más flexible. Será más fácil adaptarse a las preferencias de tamaño que hayan establecido en sus monitores los visitantes. Tamaño absoluto Para dar un tamaño absoluto, se utilizan generalmente píxeles. Para tener un texto de 16 píxeles de alto, deberíamos escribir font-size : 16px; Las letras tendrán un tamaño de 16 píxeles, como se muestra en la siguiente figura. Un ejemplo de uso (que puedes poner en tu archivo css para practicar): p font-size : 14 px, /* Párrafos 14 píxeles */ CURSO PROGRAMADOR WEB HTML5 CSS3 TEMA 7 1

2 font-size : 40 px, /* Títulos de 40 píxeles */ Comprueba el resultado en la página de ejemplo que estabas elaborando durante el tema anterior. Si lo deseas, también puede ajustar los tamaños en centímetros o milímetros. Simplemente debes reemplazar "px" a "cm" o "mm". Ten en cuenta que estas unidades están menos adaptadas a la pantalla. Tamaño usando un valor relativo Este es el método recomendado ya que el texto se ajusta más fácilmente a las preferencias de todos los visitantes, como comentábamos antes Hay varias maneras de especificar un valor relativo. Por ejemplo, puede escribir la medida con palabras inglesas como estas: xx-small: pequeño; x-small: muy pequeño; small: pequeño; medium: medio; large: grande; x-large: muy grande; xx-large: enorme. Aquí puedes probar el uso de estos valores en el CSS: p font-size : small; font-size : large; Esta técnica tiene un defecto: sólo hay siete disponibles (porque sólo hay siete nombres). Afortunadamente, hay otras maneras de dar dimensiones de forma relativas al texto. La recomendada es especificar el tamaño en "em". Si escribes 1em, el texto tiene un tamaño normal. Si deseas ampliar el texto, puedes introducir un valor mayor que 1, como 1.3em. Si deseas reducir el texto, escribe un valor menor que 1 ya 0.8em. CURSO PROGRAMADOR WEB HTML5 CSS3 TEMA 7 2

3 Ten cuidado: para establecer el valor decimal debes teclear un punto y no una coma. Debes escribir "1.4em" y no "1,4em"! Ejemplo: p font-size : 0.8 em ; font-size : 1.3 em ; Hay otras unidades disponibles. Puedes usar la expresión "ex" (que funciona con el mismo principio que em pero con una escala más pequeña), o con porcentajes (80%, 130%...). Cambiar la fuente La propiedad CSS para especificar el tipo de letra a utilizar es font-family. Debes escribir el nombre de la fuente así: font-family : fuente; Pero para evitar problemas de visualización si el usuario no tiene el mismo tipo de letra instalado en su ordenador que tú, se indican varios nombres de fuentes, separados por comas: etiqueta font-family : fuente1, fuente2, fuente3, fuente4; El navegador intentará primero utilizar la fuente1. Si no es así, se intentará con la fuente2. Si no existe, irá a la fuente3, y así sucesivamente. Generalmente, la última que se indica es la serif, que es un tipo de letra por defecto (que sólo se aplica si no hay otra fuente emparejada). Pero cuáles son las fuentes más comunes que podemos usar de forma predeterminada? Aquí tienes una lista de fuentes que funcionan bien en la mayoría de los navegadores: Arial ; Arial Black ; Comic Sans MS ; Courier New ; CURSO PROGRAMADOR WEB HTML5 CSS3 TEMA 7 3

4 Georgia ; Impact ; Times New Roman ; Trebuchet MS ; Verdana. Así que, si escribimos: p font-family: Impact, "Arial Black", Arial, Verdana, sans-serif; Significa... " Pon la fuente Impact o, si no está disponible, Arial Black, o de otra manera Arial, Verdana o no, o si nada de esto funcionó, pondremos un tipo de letra estándar (sansserif). " En general, está bien indicar una selección de tres o cuatro fuentes (+ serif o sans-serif) para garantizar que al menos uno de ellas sea encontrada en la computadora del visitante. Si el nombre de la fuente incluye espacios, te sugiero rodearla por comillas, como lo hicimos para "Arial Black". El uso de una fuente personalizada font-face Tal vez te parezca una elección bastante limitada en cuando a las tipografías. Cómo podemos usar nuestra fuente favorita en el sitio web, sea cual sea ésta?. Durante mucho tiempo no era posible. Afortunadamente, hoy en día, con CSS3, hay una manera de utilizar cualquier fuente en su sitio web. Funciona bien con la mayoría de los navegadores. Pero cuidado, te puedes encontrar con algunos problemas El navegador del usuario descargará automáticamente el archivo de la fuente, que puede pesar hasta más de 1 MB... La mayoría de las fuentes están sujetas a derechos de autor, por lo que es no es legal utilizarlas en tu sitio web. Afortunadamente, hay sitios como fontsquirrel.com y dafont.com que ofrecen para descargar un buen número de fuentes libres de forma gratuita. Recomiendo especialmente fontsquirrel.com porque te permite descargar paquetes listos para usar en CSS3. Hay varios formatos de ficheros y no funcionan del mismo modo en todos los navegadores. Estos son los diferentes formatos de los archivos de fuentes que existen y necesitas conocer: CURSO PROGRAMADOR WEB HTML5 CSS3 TEMA 7 4

5 .ttf: TrueType Font. Funciona en IE9 y todos los demás navegadores..eot: Embedded OpenType. Funciona solo en Internet Explorer, en todas sus versiones. Este formato ha sido producido por Microsoft..otf: fuentes OpenType. No funciona en Internet Explorer..svg: fuente SVG. El único formato compatible con los iphones e ipads por ahora..woff : Web Open Font Format. Nuevo formato diseñado para la web, que se ejecuta en IE9 y todos los demás navegadores. CSS para definir un nuevo tipo de letra, debes declararlo font-face font-family : 'MiFuente' ; src : url ('MiFuente.eot'); El archivo de fuente (en nuestro ejemplo MiFuente.eot), tal y como lo mostramos en el css debe estar ubicado en la misma carpeta que el archivo CSS (o en una subcarpeta, si utiliza una ruta relativa). Como hemos visto, el formato.eot sólo funciona en Internet Explorer. Lo ideal es ofrecer múltiples formatos de fuente: el navegador se descargará la que le resulte más útil. He aquí cómo especificar múltiples font-face font-family: 'MiFuente'; src: url('mifuente.eot') format('eot'), url('mifuente.woff') format('woff'), url('mifuente.ttf') format('truetype'), url('mifuente.svg') format('svg'); Para probar el funcionamiento, le sugiero que descargar un tipo de letra en Font Squirrel. Haz clic en "@ font-face kit" que te permitirá descargar un kit listo para usar con todos los formatos para este tipo de letra (siguiendo esteenlace tienes un ejemplo). Su archivo CSS se verá como al final de esta /* Definición de una nueva fuente llamada LearningCurveProRegular */ font-family: 'LearningCurveProRegular'; src: url('learningcurve_ot-webfont.eot'); src: url('learningcurve_otwebfont.eot?#iefix') format('embedded-opentype'), url('learningcurve_ot-webfont.woff') format('woff'), url('learningcurve_otwebfont.ttf') format('truetype'), url('learningcurve_otwebfont.svg#learningcurveproregular') format('svg'); CURSO PROGRAMADOR WEB HTML5 CSS3 TEMA 7 5

6 /* Uso de la fuente para definir los títulos */ font-family: 'LearningCurveProRegular', Arial, serif; La primera sección (la más se usa para definir un nuevo nombre de la fuente que se utilizará en el archivo CSS. A continuación utilizamos este nombre de fuente con la propiedad font-family, como ya vimos, para cambiar la apariencia de los títulos <>. Cursiva, negrita, subrayado... Hay una serie de propiedades CSS clásicas del formato del texto. Vamos a averiguar aquí cómo mostrar el texto en negrita, cursiva, subrayado... Poner en cursiva Vimos en lecciones anteriores la etiqueta <em>, que aunque en principio parece que aplica cursiva a nuestro texto, en realizad se hace para enfatizar, y eso es algo que puede ser resuelto de forma diferente por cada navegador (la forma en que se muestra la cursiva se especificará en el CSS). Del mismo modo, la etiqueta <strong> se ha usado para destacar un texto, pero la apariencia que resulte de ese "destacado" puede ser muy diversa. CSS te permite decir realmente, "Quiero que este texto sea cursiva y se muestre de esta forma". Nada impide que, por ejemplo, decidas que todos tus títulos estarán en cursiva. En concreto, en CSS, para definir el estilo del texto, por ejemplo, cursiva, utilizaremos la etiqueta font-style que puede tomar tres valores: italic: el texto estará en cursiva. oblique: el texto se inclina oblicuamente (si examinas los caracteres, verás que el resultado es ligeramente diferente de la cursiva reales). normal: el texto será normal (es lo que vemos por defecto). Esto te permite cancelar una cursiva. Por ejemplo, si deseas que el texto entre <em> ya no esté en cursiva, debes escribir: em font-style : normal; Por lo tanto, en este ejemplo, usamos font-style para poner los títulos en cursiva <h2>: h2 font-style : italic ; CURSO PROGRAMADOR WEB HTML5 CSS3 TEMA 7 6

7 Negrita Como hemos visto, <strong> no necesariamente pone el texto en negrita, si no que su papel es el de indicar que el texto es importante, por lo que el navegador el usualmente muestran en negrita. La propiedad CSS para aplicar negrita es font-weight y toma los siguientes valores: bold: el texto está en negrita; normal: el texto se escribirá normalmente (por defecto). Aquí está la forma de escribir el título en negrita: font-weight: bold; Subrayado y otras decoraciones La propiedad CSS asociada a este efecto es: text-decoration. Permite, entre otros, resaltar el texto, pero no sólo eso. Estos son los valores que puede tomar: underline: subrayado. line-through: tachado. overline: por encima. blink: parpadeante. No funciona en todos los navegadores (Internet Explorer y Google Chrome, etc). ninguno: normal (por defecto). Este CSS te permitirá poner a prueba los efectos de text-decoration: text-decoration: blink;.subrayado text-decoration: underline;.tachado text-decoration: line-through;.encima text-decoration: overline; CURSO PROGRAMADOR WEB HTML5 CSS3 TEMA 7 7

8 Alineación El CSS nos permite hacer alineaciones que seguramente ya conocerás: izquierda, centro, derecha y justificado. Es muy sencillo. La propiedad que se utiliza es text-align e indica la alineación deseada: izquierda: el texto se alineará a la izquierda (este es el valor predeterminado). Centro: texto estará centrado. derecha: el texto se alinea a la derecha. justificado: texto será "justificada". Justificar texto permite asegurar que se toma toda la anchura posible sin dejar ningún espacio en blanco al final de las líneas. Los artículos de prensa, por ejemplo, están siempre justificados. Flotante CSS nos permite hacer flotar texto alrededor de la imagen. Para comprobar de qué estamos hablando, la siguiente figura muestra lo que vamos a aprender a hacer. La propiedad que usaremos para conseguir efectos como éste es float ("flotar" en Inglés). Esta propiedad puede tomar dos valores simples: left: el elemento va a flotar a la izquierda. right: el elemento flotará a la derecha. El uso de flotante es muy simple: 1. Aplicamos un float a una etiqueta. 2. Luego continuamos escribiendo texto después normalmente. Haciendo flotante una foto. Vamos a aprender a hacer flotante una imagen. Aquí está el código HTML que tenemos que escribir en primera instancia: CURSO PROGRAMADOR WEB HTML5 CSS3 TEMA 7 8

9 <p><img src="flash.gif" class="imagenflotante" alt="imagen flotante"> Este es un texto normal, un párrafo de los de toda la vida, el cual se situará alrededor de la imagen que hemos incluido hace un momento. Si ves que el efecto no es demasiado evidente, escribe más texto para comprobarlo mejor, o copia y pega éste varias veces.</p> Debe colocar el elemento flotante al principio de éste código HTML. Si colocas la imagen a continuación del párrafo, el efecto no se conseguirá. Este es el único código CSS que tenemos que escribir para permitir flotar la imagen a la izquierda: float: left; Detener el efecto flotante. Cuando pones un texto flotante alrededor de una imagen tal vez te interese que en un momento determinado, el siguiente párrafo pase debajo de la imagen y deje de flotar. Ese efecto se puede conseguir encadenando varios saltos de línea con <br/>, pero no es demasiado elegante y puede provocar sorpresas inesperadas Para conseguirlo hay una propiedad CSS que vendría a decir: " Detente, este texto debe estar por debajo de la imagen flotante en lugar de al lado. " Esta propiedad es clear, que puede tomar tres valores: left: el texto continúa debajo de un float:left; right: el texto continúa debajo de un float:right; both: Texto continúa debajo de, o bien un float:left; o de un float:right;. Para simplificar, vamos a utilizar todo el tiempo clear: both. Para ilustrar cómo funciona, vamos a tomar el siguiente HTML: <p> <img src="flash.gif" class="imagenflotante" alt="imagen flotante"></p> <p> Este texto está escrito al lado de la imagen flotante. </p> <p class="abajo"> Este texto está debajo en la imagen flotante. </p> Y el código CSS:.imagenflotante float: left;.abajo clear: both; CURSO PROGRAMADOR WEB HTML5 CSS3 TEMA 7 9