Impi css-6 texto

  • 84 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
84
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Portales de InformaciónCSS: Texto2009 - 2010
  • 2. TipografíaCSS define numerosas propiedades para modificar la aparienciadel texto. A pesar de que no dispone de tantas posibilidadescomo los lenguajes y programas específicos para creardocumentos impresos, CSS permite aplicar estilos complejos ymuy variados al texto de las páginas web.La propiedad básica que define CSS relacionada con latipografía se denomina color y se utiliza para establecer el colorde la letra.
  • 3. TipografíaAunque el color por defecto del texto depende del navegador,todos los navegadores principales utilizan el color negro. Paraestablecer el color de letra de un texto, se puede utilizarcualquiera de las cinco formas que incluye CSS para definir uncolor.A continuación se muestran varias reglas CSS que establecen elcolor del texto de diferentes formas:Como el valor de la propiedad color se hereda, normalmente seestablece la propiedad color en el elemento body paraestablecer el color de letra de todos los elementos de la página:
  • 4. TipografíaLa única excepción de este comportamiento son los enlaces quese crean con la etiqueta <a>.Aunque el color de la letra se hereda de los elementos padre alos elementos hijo, con los enlaces no sucede lo mismo, por loque es necesario indicar su color de forma explícita:
  • 5. TipografíaLa otra propiedad básica que define CSS relacionada con latipografía se denomina font-family y se utiliza para indicar eltipo de letra con el que se muestra el texto.
  • 6. TipografíaEl tipo de letra del texto se puede indicar de dos formasdiferentes:Mediante el nombre de una familia tipográfica: en otras palabras,mediante el nombre del tipo de letra, como por ejemplo "Arial","Verdana", "Garamond", etc.Mediante el nombre genérico de una familia tipográfica: losnombres genéricos no se refieren a ninguna fuente en concreto,sino que hacen referencia al estilo del tipo de letra. Las familiasgenéricas definidas son serif (tipo de letra similar a Times NewRoman), sans-serif (tipo Arial), cursive (tipo Comic Sans), fantasy(tipo Impact) y monospace (tipo Courier New).
  • 7. TipografíaLos navegadores muestran el texto de las páginas webutilizando los tipos de letra instalados en el ordenador odispositivo del propio usuario.De esta forma, si el diseñador indica en la propiedad font-familyque el texto debe mostrarse con un tipo de letra especialmenteraro o rebuscado, casi ningún usuario dispondrá de ese tipo deletra.
  • 8. TipografíaPara evitar el problema común de que el usuario no tengainstalada la fuente que quiere utilizar el diseñador, CSS permiteindicar en la propiedad font-family más de un tipo de letra.El navegador probará en primer lugar con el primer tipo de letraindicado. Si el usuario la tiene instalada, el texto se muestra conese tipo de letra.Si el usuario no dispone del primer tipo de letra indicado, elnavegador irá probando con el resto de tipos de letra hasta queencuentre alguna fuente que esté instalada en el ordenador delusuario. Evidentemente, el diseñador no puede indicar paracada propiedad font-family tantos tipos de letra como posiblesfuentes parecidas existan.
  • 9. TipografíaPara solucionar este problema se utilizan las familiastipográficas genéricas.Cuando la propiedad font-family toma un valor igual a sans-serif, el diseñador no indica al navegador que debe utilizar lafuente Arial, sino que debe utilizar "la fuente que más separezca a Arial de todas las que tiene instaladas el usuario".Por todo ello, el valor de font-family suele definirse como unalista de tipos de letra alternativos separados por comas. Elúltimo valor de la lista es el nombre de la familia tipográficagenérica que más se parece al tipo de letra que se quiereutilizar.Las listas de tipos de letra más utilizadas son las siguientes:
  • 10. TipografíaUna vez seleccionado el tipo de letra, se puede modificar sutamaño mediante la propiedad font-size.
  • 11. TipografíaAdemás de todas las unidades de medida relativas y absolutas yel uso de porcentajes, CSS permite utilizar una serie de palabrasclave para indicar el tamaño de letra del texto:tamaño_absoluto: indica el tamaño de letra de forma absolutamediante 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 deltexto mediante dos palabras clave (larger, smaller) que tomancomo referencia el tamaño de letra del elemento padre.La siguiente imagen muestra una comparación entre lostamaños típicos del texto y las unidades que más se utilizan:
  • 12. TipografíaCSS recomienda indicar el tamaño del texto en la unidad em o enporcentaje (%). Además, es habitual indicar el tamaño del texto enpuntos (pt) cuando el documento está específicamente diseñado paraimprimirlo.Por defecto los navegadores asignan los siguientes tamaños a lostítulos de sección: <h1> = xx-large, <h2> = x-large, <h3> = large,<h4> = medium, <h5> = small, <h6> = xx-small.
  • 13. TipografíaUna vez indicado el tipo y el tamaño de letra, es habitualmodificar otras características como su grosor (texto en negrita)y su estilo (texto en cursiva).La propiedad que controla la anchura de la letra es font-weight
  • 14. Tipografíalos valores que normalmente se utilizan son normal (el valor pordefecto) y bold para los textos en negrita. El valor normalequivale al valor numérico 400 y el valor bold al valor numérico700.El siguiente ejemplo muestra una aplicación práctica de lapropiedad font-weight:
  • 15. TipografíaPor defecto, los navegadores muestran el texto de loselementos <em> en cursiva y el texto de los elementos<strong> en negrita.La propiedad font-weight permite alterar ese aspecto pordefecto y mostrar por ejemplo los elementos <em> comocursiva y negrita y los elementos <strong> destacadosmediante un color de fondo y sin negrita.
  • 16. Tipografía
  • 17. TipografíaAdemás de la anchura de la letra, CSS permite variar su estilomediante la propiedad font-style.Normalmente la propiedad font-style se emplea para mostrar untexto en cursiva mediante el valor italic.El ejemplo anterior se puede modificar para personalizar aunmás el aspecto por defecto de los elementos <em> y <strong>:
  • 18. Tipografía
  • 19. TipografíaPor último, CSS permite otra variación en el estilo del tipo deletra, controlado mediante la propiedad font-variant.La propiedad font-variant no se suele emplear habitualmente,ya que sólo permite mostrar el texto con letra versal(mayúsculas pequeñas).
  • 20. TipografíaSiguiendo con el ejemplo anterior, se ha aplicado la propiedadfont-variant: small-caps al segundo párrafo de texto:
  • 21. TipografíaPor otra parte, CSS proporciona una propiedad tipo "shorthand"denominada font y que permite indicar de forma directa algunaso todas las propiedades de la tipografía de un texto.
  • 22. TipografíaEl orden en el que se deben indicar las propiedades del texto esel 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-sizeseguido opcionalmente por el valor de line-height.Por último, se indica obligatoriamente el tipo de letra a utilizar.
  • 23. TextoLa propiedad que define la alineación del texto se denominatext-align.Los valores definidos por CSS permiten alinear el texto segúnlos valores tradicionales: a la izquierda (left), a la derecha(right), centrado (center) y justificado (justify).
  • 24. TextoLa siguiente imagen muestra el efecto de establecer el valorleft, right, center y justify respectivamente a cada uno de lospárrafos de la página.
  • 25. TextoLa propiedad text-align no sólo alinea el texto que contiene unelemento, sino que también alinea todos sus contenidos, comopor ejemplo las imágenes.El interlineado de un texto se controla mediante la propiedadline-height, que permite controlar la altura ocupada por cadalínea de texto:
  • 26. TextoAdemás de todas las unidades de medida y el uso deporcentajes, la propiedad line-height permite indicar un númerosin unidades que se interpreta como el múltiplo del tamaño deletra del elemento.Por tanto, estas tres reglas CSS son equivalentes:
  • 27. TextoLa propiedad que decora el texto se denomina text-decoration.El valor underline subraya el texto, por lo que puede confundir alos usuarios haciéndoles creer que se trata de un enlace.El valor overline añade una línea en la parte superior del texto, unaspecto que raramente es deseable.El valor line-through muestra el texto tachado con una líneacontinua, por lo que su uso tampoco es muy habitual.el valor blink muestra el texto parpadeante y se recomienda evitarsu uso por las molestias que genera a la mayoría de usuarios.
  • 28. TextoUna de las propiedades de CSS más desconocidas y que puedeser de gran utilidad en algunas circunstancias es la propiedadtext-transform, que puede variar de forma sustancial el aspectodel texto.La propiedad text-transform permite mostrar el texto originaltransformado en un texto completamente en mayúsculas(uppercase), en minúsculas (lowercase) o con la primera letrade cada palabra en mayúscula (capitalize).
  • 29. Texto
  • 30. TextoUno de los principales problemas del diseño de documentos ypáginas mediante CSS consiste en la alineación vertical en unamisma línea de varios elementos diferentes como imágenes ytexto.Para controlar esta alineación, CSS define la propiedad vertical-align.
  • 31. TextoA continuación se muestra una imagen con el aspecto quemuestran los navegadores para cada uno de los posibles valoresde la propiedad vertical-align:
  • 32. TextoEn muchas publicaciones impresas suele ser habitual tabular laprimera línea de cada párrafo para facilitar su lectura.CSS permite controlar esta tabulación mediante la propiedadtext-indent.
  • 33. Texto
  • 34. TextoCSS también permite controlar la separación entre las letras queforman las palabras y la separación entre las palabras queforman los textos.La propiedad que controla la separación entre letras se llamaletter-spacing y la separación entre palabras se controlamediante word-spacing.Cuando se utiliza un valor numérico en las propiedades letter-spacing y word-spacing, se interpreta como la separaciónadicional que se añade (si el valor es positivo) o se quita (si elvalor es negativo) a la separación por defecto entre letras ypalabras respectivamente.
  • 35. Texto
  • 36. Texto
  • 37. TextoCSS define unos elementos especiales llamados "pseudo-elementos" que permiten aplicar estilos a ciertas partes de untexto.En concreto, CSS permite definir estilos especiales a la primerafrase de un texto y a la primera letra de un texto.El pseudo-elemento :first-line permite aplicar estilos a laprimera línea de un texto.Las palabras que forman la primera línea de un texto dependendel espacio reservado para mostrar el texto o del tamaño de laventana del navegador, por lo que CSS calcula de formaautomática las palabras que forman la primera línea de texto encada momento.
  • 38. TextoLa siguiente imagen muestra cómo aplica CSS los estilosindicados a la primera línea calculando para cada anchura laspalabras que forman la primera línea:
  • 39. TextoDe la misma forma, CSS permite aplicar estilos a la primeraletra del texto mediante el pseudo-elemento :first-letter.La siguiente imagen muestra el uso del pseudo-elemento :first-letter para crear una letra capital
  • 40. Texto
  • 41. Texto