JMiur [E]

Puff, hay que terminar con esto de una vez. Las propiedades CSS que permiten controlar los textos parecen infinitos pero esta es la última parte.

La propiedad letter-spacing establece la cantidad de espacio adicional entre los caracteres.

sintaxis en HTML
elemento {letter-spacing: valor;}
por ejemplo: p {letter-spacing: -2px;}

sintaxis en JAVASCRIPT
elemento.style.letterSpacing='valor';
por ejemplo: this.style.letterSpacing='-2px';

Los posibles valores son: normal (el valor por defecto) o una medida expresada como cm, mm, in, pt, pc, px, em o ex.

La propiedad word-spacing es similar a la anterior excepto que establece la cantidad de espacio adicional entre palabras.

sintaxis en HTML
elemento {word-spacing: valor;}
por ejemplo: p {word-spacing: 10px;}

sintaxis en JAVASCRIPT
elemento.style.wordSpacing='valor';
por ejemplo: this.style.wordSpacing='10px';

Y los posibles valores admitidos son los mismos: normal (el valor por defecto) o una medida expresada como cm, mm, in, pt, pc, px, em o ex.

Tanto letter-spacing como word-spacing añaden espacio al espacio por defecto de las fuentes que utilizamos por lo tanto, se pueden usar valores positivos (para aumentarlo) como negativos (para disminuirlo):





Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

La propiedad line-heigh establece la distancia entre las "líneas bases" de un texto.

sintaxis en HTML
elemento {line-height: valor;}
por ejemplo: p {line-height: 20px;}

sintaxis en JAVASCRIPT
elemento.style.lineHeight='valor';
por ejemplo: this.style.lineHeight='20px';

Los valores posibles son los mismo que para las otras propiedades: cm, mm, in, pt, pc, px, em o ex o un porcentaje.


Esta propiedad, por ejemplo, nos permite centrar verticalmente los textos dentro de un bloque sin distorsionar la fuente ya que no "alarga" los caracteres sino el espacio que ocupan.

En este ejemplo, el DIV (fondo rojo) tiene una altura de 50 pixeles:

Por defecto, el texto no se centra verticalmente:

Ut wisi enim ad minim veniam.

Intentamos utilizar la propiedad vertical-align pero tampoco funciona:

Ut wisi enim ad minim veniam.

Pero, si añadimos la propiedad line-height con un valor igual a la altura del bloque, todo se resuelve:

Ut wisi enim ad minim veniam.

La propiedad white-space se utiliza para indicar si las líneas de texto se "cortan" o no y cómo deben ser mostrados los espacios en blanco .

sintaxis en HTML
elemento {white-space: valor;}
por ejemplo: p {white-space: nowrap;}

sintaxis en JAVASCRIPT
elemento.style.whiteSpace='valor';
por ejemplo: this.style.whiteSpace='nowrap';

Podemos usar tres valores distintos:

normal si el texto excede el espacio del contenedor, las líneas se cortan automáticamente y el texto continúa en otra línea (es el valor por defecto)
nowrap el texto se escribe en una sola línea.
pre se utiliza para preservar los saltos de línea y los espacios extras

Por defecto, los saltos de línea, los espacios extras (más de uno separando palabras) y las tabulaciones no tienen ningún efecto en una página web. Si escribimos:
dos palabras
veremos:
dos palabras
los espacios extras no se tendrán en cuenta.

Si queremos agregar espacios extras, debemos utilizar un código especial (nonbreaking space entity) y escribir   a menos que establezcamos la propiedad white-space como pre.

En Blogger, si escribimos:

un párrafo



otro párrafo

lo veremos ya que, normalmente, está marcada la opción:

Convertir saltos de línea
Si se ha seleccionado “Sí”, los retornos forzados únicos introducidos en el “Editor de entradas” se sustituirán por códigos únicos <br /> y los retornos forzados dobles se sustituirán por dos códigos ( <br /><br /> ).


Es una facilidad del editor pero no es lo normal. En una página web, debemos usas la etiqueta <br/> para separar una línea de otra. Incluso en Blogger hay que hacerlo cuando trabajamos con la plantilla o con los elementos de la sidebar.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


En Internet Explorer hay una propiedad especial llamada word-wrap que permite establecer la forma en que se manejan los saltos de línea y tiene dos valores posibles: normal y break-word.

sintaxis en HTML
elemento {word-wrap: valor;}
por ejemplo: p {word-wrap: normal;}

sintaxis en JAVASCRIPT
elemento.style.wordWrap='valor';
por ejemplo: this.style.wordWrap='normal';

color establece el color de los textos.

sintaxis en HTML
elemento {color: valor;}
por ejemplo: p {color: #FF0000;}

sintaxis en JAVASCRIPT
elemento.style.color='valor';
por ejemplo: this.style.color='#FF0000';

Los colores pueden ser escritos on diferentes formatos:

EM { color: red; } /* con su numbre */
EM { color: #F00; } /* #RGB */
EM { color: #FF0000; } /* #RRGGBB */
EM { color: rgb(255,0,0); } /* rgb() */

Otra propiedad exclusiva de Internet Explorer es writing-mode que establece la dirección del texto:

sintaxis en HTML
elemento {writing-mode: valor;}
por ejemplo: div {writing-mode: tb-rl;}

sintaxis en JAVASCRIPT
elemento.style.writingMode='valor';
por ejemplo: this.style.writingMode='tb-rl';

Tiene dos valores posibles:

lr-tb es el valor por defecto, el texto se escribe de manera horizontal de izquierda a derecha y de arriba hacia abajo.
tb-rl el texto se escribe de manera vertical, de arriba hacia abajo y de derecha a izquierda.

Este ejemplo sólo es visible en Internet Explorer (Ver/Ocultar) [+]
Ut wisi enim ad minim veniam
Ut wisi enim ad minim veniam

SUMARIO:
  • Las propiedades CSS (background)
  • Las propiedades CSS (border)
  • Las propiedades CSS (margin, padding y outline)
  • Las propiedades CSS (textos 1ª parte)
  • Las propiedades CSS (textos 2ª parte)
  • 21 comentarios:

    Israel  

    Entonces es mejor regular los saltos de linea con br/ que con pre-line? En firefox pre-line funciona pero en IE8 no.
    Yo encuentro que es una buena propiedad para evitar tanta br en textos largos.

    Responder
    JMiur  

    No hay nada peor ni mejor, es un tema subjetivo.

    Responder
    Israel  

    Disculpa Jmiur, pero en el desarrollo web no creo mucho en la subjetividad, se trata de utilizar elementos y etiquetas que se soporten correctamente en los navegadores, y si IE no soporta algo pues..., de todas formas tengo que probar una cosa antes con el explorer, quizás si le haces la declaración Doctype en modo Xhtml strict 1.1 si te reconoce el pre-line, pero eso tengo que verificarlo.

    Responder
    JMiur  

    Pué, yo si creo en las subjetividades en absolutamente todo :D

    Responder
    Admin  

    Hola Jmiur quisiera preguntarte la propiedad line-height quiero ponerlo en los post para que los textos tengan mas espacio entre cada renglon que codigo debo agregar? o donde lo debo de poner para que funcione en el texto de los post?

    Responder
    JMiur  

    Normalmente, para que sólo afecte a los textos de las entradas, deberías cambair lo que dice esta parte:

    .post-body {
    ............
    line-height:1.4em;
    }

    Está definido como 1.3 em ue es "un porcentaje" relacioando con el tamaño de la fuente; cuanto más grande sea, más se separarán las líneas (1.5em 1.65em) Tambien puenden usarse pixeles.

    Responder
    Admin  

    Orale ya entendi pero le pongo 1.4 y se separan pero no mucho sera porque la fuente de las entradas es arial - pequeña? como puedo cambiar la fuente de las entradas como por ejemplo la que tienes tu en tus entradas, tendre que modificar cada entrada para cambiar la fuente? y como se llama tu fuente que usas o cual me conviene xd, esque quiero darle un toce web elegante ( graxxx por tu respuesta siempre solucionando dudas =)

    Responder
    JMiur  

    Ahora, según veo, lo que dice el CSS de tu blog (si es el del perfil) esa propiedad tiene 1.4em como valor. Si colocas, 1.5en o 1.6em verás la diferencia.

    La fuente y su ta,año, la cambais en la misma parte:

    .post-body {
    ............
    font-family: valor;
    font-size: valor;
    line-height: valor;
    }

    Todo eso, sólo afectará al texto de las entradas.

    Responder
    Admin  

    oye jmiur coloco lo que me dices para cambiar la fuente de textos de las entradas pero no cambiar se queda en la misma fuente arial y aparte le pongo de 1.4em a 1.5 y 1.6 em y me queda demaciado espacio sera por el tipo de fuente que uso arial? quiero que me quede el mismo espacio que tu usas en tus post y lo pongo otra fuente y no cambia ni el tipo de fuente ni el tamaño que debo hacer para cambiar fuente?

    Responder
    JMiur  

    No veo que ahora haya nada de eso colocado, salvo una variación en el line-height que dice 1.43em.

    Lo que si veo es que en todas las entradas, lo que está escrito posee una serie de etiquetas agregadas directamente en el post. Cosas como esta:

    <span style="font-family: Arial,Helvetica,sans-serif;" class="Apple-style-span">
    <span style="font-size: small;" class="Apple-style-span">
    <span style="color: rgb(68, 68, 68);" class="Apple-style-span">
    ....................................
    </span>
    </span>
    </span>

    Lo que significa, que por ejemplo, el tipo de fuente , esta indicado directamente en el post y por lo tanto, el CSS no podrá modificarlo ya que, cualquier propiedad indicada directamente, tiene prioridad sobre cualquier definición. Por lo tanto, deberás editar esas entradas y eliminar eso manualmente.

    Ahora bien ¿qué es lo que agrega eso? Lo pregunto porque no es normal ¿Qué editor usas? Blogger tiene 3: el normal, el avanzado y el que está en Blogger Draft ¿Qué navegador usas?

    Sea el que sea, parece estar agregando códigos que no deberían agregarse y sería importante saberlo para no usarlo.

    Responder
    Admin  

    Uso el editor de blogger jmiur el mas actualizado y el navegador uso el google chrome, y no se porque se agregan y osea que la mejor forma de publicar en blogger no es colocando directamente en el editor el tipo de fuente, el color ni el tamaño? y como ago para no colocarle nada de eso pienso que por ejemplo copio el texto de otra web y le borro el formato y asi todo lo escribo y lo borro el formato y lo publico y ya directamente con css ya se puede cambiar el tamaño, color y tipo de fuente? o como le ago para no colocarle ningun formato en la entrada y cambiarlo con css que es lo que hacen todos los que usan blogger al publicar una entrada???

    Responder
    Admin  

    ups se me olvido preguntarte y como le haces tu? para publicar una entrada? oye jmiur otra pequeñisima duda donde dice el numero de comentarios del post como por ejemplo este que dice 10 comentarios: tiene fondo como degradado azul y azulmarino como le puedo hacer eso ponerle una imagen de fondo al numero de comentarios que esta arribita porque le agrego un fondo y tambien se le agrega donde dice " publicar un comentario en la entrada " pero yo solo quiero agregarle a donde dice el numero de comentarios y no al de publicar un comentario de entrada tengo que agregar algo?

    Responder
    JMiur  

    Bien. Por lo que veo, cosas como class="Apple-style-span" las coloca Chrome cuando se usa el nuevo editor. No pasa lo mismo en otros navegadores donde no se agrega eso. Es molesto pero intrascendente. Lo importante es lo otro.

    El concepto general es algo así: con CSS defines las propiedades a utilizar. Si las entradas van a tener un tipo de fuente, un tamaño, un color y cualquier otra propeidad por defecto, esos datos se colocan tal como te dije en el comentario anterior y en el editor no se formatea nada de eso; en todo caso, sólo se hace si se va a utilizar una fuente o tamaño o formato diferente a esa definida por defecto.

    Si la fuente es Arial por defecto, no es necesario poner Arial en cada párrafo; por el contrario, eso, lo que hará es que termine siendo imposible cambiar las fuentes de manera general y haya que editar entrada por entrada, eliminando datos que hemos a agregado.

    Si se me ocurre copiar y pegar algo desde otro sitio jamás copio y pego formatos, los pego como textos planos es decir, en la pestaña Edion de HTML ya que sino, estaré copiando y pegando códigos, clases, formatos que tal vez, mi plantilla no reconozca o cambie las que yo he colocado.

    No sé qué dice tu plantilla exactamente en esa parte de los comentarios. Por defecto, dice algo así:

    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
    <b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
    <b:else/>
    <data:post.numComments/> <data:top.commentLabelPlural/>
    </b:if>
    </a>

    donde:
    <data:top.commentLabel/> es la palabra Comentario
    <data:post.numComments/> es el número si hay más de uno
    <data:top.commentLabelPlural/> es la palabra Comentarios

    Así que apra que lo único que cambia sea el número y no la palabra, debería verse si es posible ponerle una etiqueta al número solamente y ahí poner el fondo.

    Responder
    Admin  

    a ya te entendi entonces si por ejemplo creo mi entrada no le pongo nada de formato para que asi en futuras ocaciones quisiera cambiar el tipo de fuente y colo y tamaño lo pueda hacer con css orale =) entonces todo texto que copie lo copiare y lo pegare en un bloc de notas y se copiara como texto virgen y todo el texto que escriba lo escribire como texto virgen y lo publico y ya en post body coloco el color de la fuente el tipo y el tamaño? eso es los que hacen los bloggeros profesionales? estoy bien como le entendi y muchas grasias por todas tus contestaciones Jmiur thank friend :D

    Nota: practicamente es crear entradas en texto virgen sin ningun formato y ya con css se le agregan esas propiedades para en un futuro no tener problemas no?

    y lo de cambiar el fondo no te entendi muy bien osea que esas tres partes del codigo osea a la palabras colocarlo alguna class o div y asi agregarle css?

    GRASIAS P0R TODO AMIGO =) TU WEB ES LA MEJOR DE TUTORIALES DE BLOGGER

    Responder
    Admin  

    yo tambien tengo duda jmiur sobre el ultimo comentario de Admin yo tambien tengo esa duda si tenemos que publicar en las entradas con el texto sin formato alguno osea texto virgen y ya con css cambiarle la fuente y eso

    Responder
    JMiur  

    Exacto. Así es y es algo que es muy simple de probar, incluso en un post borrador notarás la diferencia.

    Copiar en el block de notas com opaso previo es lo ideal ya que eliminá el formato. También hay extensiones que hacen eso, en Firefox hay varias e imagin oque en Chrome también, te permites seleccioanr y copiar desde la web como textos planos.

    No hay una sola forma de hacer las cosas pero, asi, en general, lo mejor es escribir, dar formato a las cosas que realmente queremos cambiar (negritas, algún color, etc); luego farle el alineamineto y nada más. Ecxepto, claro, que una palabra o un texto específico se vea difernte, sino, el CSS se engcarga de darle el formato genérico que queremos usar.

    Lo del fondo es sólo una idea global; para poder darle propiedades al número sin afectar a la palabra "comentarios" es necesario que ese número esté en una etiqueta con alguna clase y luego, con esa clase, se crea y agrega una regla de CSS con las propiedades.

    Responder
    Andréa SMirna  

    ola JMiur... lembra de mim RSRS...◔_◔.
    sou a que proucurava pestanas orientação como colocar essa pestana da postagem na vertical....

    achei essa postagem aqui . como poderia colocar das cincos pestanas no blog...
    não vejo os códicos de como colocar me ajude??? (^з^)

    JMiur  

    Tendrás que explicar un poco más y mostrarme el ejemplo al que te refieres.

    Anthea  

    [para usar no blog]
    Obrigada

    Responder
    Anthea  

    colocar as abas assim na postagem no blog como o seu
    thus placing the tabs on the blog post as your

    [exemplo]

    JMiur  

    En el ejemplo de esta entrada no hay tabs o pestañas; es una tabla. Los botones de la izquierda (etiqueta INPUT) modifican el estilo del texto de la derecha (etiqueta DIV)

    <table>
    <tr>
    <td>
    <input type="button" value="TEXTO_BOTON" onclick="HACER_ALGO">
    <input type="button" value="TEXTO_BOTON" onclick="HACER_ALGO">
    </td>
    <td>
    <div id="EL_CONTENIDO"> ....... </div>
    </td>
    </tr>
    </table>

    Por ejemplo, el HACER_ALGO de uno dice algo así:

    onclick="getElementById('EL_CONTENIDO').style.letterSpacing='-2px';"

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR