{"id":161,"date":"2014-10-27T09:00:44","date_gmt":"2014-10-27T08:00:44","guid":{"rendered":"https:\/\/blogs.ua.es\/idesweb\/?p=161"},"modified":"2014-10-19T18:38:00","modified_gmt":"2014-10-19T16:38:00","slug":"css-definir-el-estilo-del-texto-3","status":"publish","type":"post","link":"https:\/\/blogs.ua.es\/idesweb\/2014\/10\/27\/css-definir-el-estilo-del-texto-3\/","title":{"rendered":"CSS: definir el estilo del texto (3)"},"content":{"rendered":"

Un nuevo v\u00eddeo de\u00a0iDESWEB<\/a>\u00a0que se ofrecer\u00e1 a trav\u00e9s de la iniciativa\u00a0Act\u00edvate<\/a>\u00a0patrocinada por Google.<\/p>\n

[kml_flashembed movie=”http:\/\/www.youtube.com\/v\/sui6ru74PT8″ width=”560″ height=”315″ wmode=”transparent” \/]<\/p>\n

Transcripci\u00f3n:<\/p>\n

Hola, soy Sergio Luj\u00e1n Mora, profesor de inform\u00e1tica de la Universidad de Alicante, y en este v\u00eddeo que forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d, te voy a explicar las principales propiedades de CSS que se existen para definir el estilo del texto.<\/p>\n

En la primera parte de este v\u00eddeo, vimos la principales propiedades que comienzan con el prefijo font: font-family, font-size, font-weight, font-style y font-variant.<\/p>\n

En la segunda parte de este v\u00eddeo, vimos las propiedades que comienzan con el prefijo text: text-aling, text-indent, text-decoration y text-transform.<\/p>\n

En este v\u00eddeo vamos a ver cuatro propiedades que se emplean para configurar la presentaci\u00f3n del texto: letter-spacing, word-spacing, line-height y white-space.<\/p>\n

La propiedad letter-spacing define la distancia de separaci\u00f3n entre los caracteres de un texto.<\/p>\n

El espacio se puede indicar utilizando las unidades de medida que se emplean para indicar el tama\u00f1o del texto con la propiedad font-size.<\/p>\n

Esta propiedad puede tomar un valor negativo, tal como se muestra en este ejemplo.<\/p>\n

Hay que llevar mucho cuidado con su uso, ya que los resultados pueden ser desastrosos, tal como se puede ver en este ejemplo.<\/p>\n

La propiedad word-spacing es similar a letter-spacing, pero define el espacio entre las palabras.<\/p>\n

Al igual que letter-spacing, la distancia de separaci\u00f3n se puede indicar utilizando las unidades de medida que se emplean para indicar el tama\u00f1o del texto con la propiedad font-size.<\/p>\n

Esta propiedad tambi\u00e9n puede tomar valores negativos y los resultados tambi\u00e9n pueden ser desastrosos, as\u00ed que se tiene que usar con mucho cuidado.<\/p>\n

La propiedad line-height especifica la altura m\u00ednima entre las l\u00edneas de texto en un elemento como puede ser un p\u00e1rrafo.<\/p>\n

Otra vez, la altura de la l\u00ednea se puede indicar utilizando las unidades de medida que se emplean para indicar el tama\u00f1o del texto con la propiedad font-size.<\/p>\n

En este ejemplo, el primer p\u00e1rrafo se visualiza con la altura por defecto, en el segundo p\u00e1rrafo se ha aumentado a 1.5em o un 150%, y en el \u00faltimo p\u00e1rrafo a 2em o un 200%.<\/p>\n

Y ya por \u00faltimo la propiedad white-space que define c\u00f3mo se comportan los espacios en blanco dentro de un elemento.<\/p>\n

En HTML, los espacios en blanco y los saltos de l\u00ednea no son significativos.<\/p>\n

Este p\u00e1rrafo se representa de esta forma en un navegador web: entre las palabras \u201cuno\u201d, \u201cdos\u201d, \u201ctres\u201d, \u201ccuatro\u201d, \u201ccinco\u201d y \u201cseis\u201d s\u00f3lo se visualiza un espacio en blanco, aunque en el c\u00f3digo haya m\u00e1s espacios. Y la frase \u201cY esto est\u00e1 en otra l\u00ednea\u201d no aparece en otra l\u00ednea, aparece en la primera l\u00ednea.<\/p>\n

Este comportamiento se puede modificar con la propiedad white-space, que puede tomar los valores normal, pre, nowrap, pre-wrap y pre-line.<\/p>\n

En este ejemplo, al p\u00e1rrafo del ejemplo anterior se le aplica la propiedad \u201cwhite-space: pre\u201d, que produce que los espacios en blanco y los saltos de l\u00ednea se respeten. Es equivalente a la etiqueta <pre> de HTML para definir texto preformateado.<\/p>\n

El segundo p\u00e1rrafo es la forma normal de visualizar un p\u00e1rrafo: si el texto del p\u00e1rrafo no cabe en el ancho disponible, el navegador introduce un salto de l\u00ednea para que el texto contin\u00fae en la l\u00ednea siguiente.<\/p>\n

Sin embargo, la propiedad \u201cwhite-space: nowrap\u201d anula este comportamiento y la l\u00ednea no se corta, contin\u00faa m\u00e1s all\u00e1 del ancho de la ventana del navegador y se tiene que mostrar la barra de desplazamiento horizontal.<\/p>\n

Ya para terminar, me gustar\u00eda recordarte algunos de los sitios web en los que puedes encontrar m\u00e1s informaci\u00f3n sobre m\u00ed y sobre mi trabajo, y dos formas de contactar conmigo, a trav\u00e9s de mi correo electr\u00f3nico sergio.lujan@ua.es y a trav\u00e9s de mi cuenta en Twitter @sergiolujanmora.<\/p>\n

Recuerda que este v\u00eddeo forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d que est\u00e1 disponible en la direcci\u00f3n idesweb.es.<\/p>\n

Muchas gracias por tu atenci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"

Un nuevo v\u00eddeo de\u00a0iDESWEB\u00a0que se ofrecer\u00e1 a trav\u00e9s de la iniciativa\u00a0Act\u00edvate\u00a0patrocinada por Google. [kml_flashembed movie=”http:\/\/www.youtube.com\/v\/sui6ru74PT8″ width=”560″ height=”315″ wmode=”transparent” \/] Transcripci\u00f3n: Hola, soy Sergio Luj\u00e1n Mora, profesor de inform\u00e1tica de la Universidad de Alicante, y en este v\u00eddeo que forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d, te voy a explicar las principales propiedades de CSS … <\/p>\n

Continue reading “CSS: definir el estilo del texto (3)”<\/span><\/a><\/p>\n","protected":false},"author":40,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[676],"tags":[],"class_list":["post-161","post","type-post","status-publish","format-standard","hentry","category-sin-categoria"],"_links":{"self":[{"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/posts\/161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/comments?post=161"}],"version-history":[{"count":1,"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/posts\/161\/revisions"}],"predecessor-version":[{"id":162,"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/posts\/161\/revisions\/162"}],"wp:attachment":[{"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/media?parent=161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/categories?post=161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ua.es\/idesweb\/wp-json\/wp\/v2\/tags?post=161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}