Archivo para Septiembre, 2010

¿Por qué utilizar CSS descendientes?

27 de Septiembre de 2010

Cuando diseñamos un nuevo documento, siempre es una buena idea modelarlo, especialmente de objetos comunes como <h1> y <p>. De esta manera, incluso si sólo hay un tipo de <h1> en el documento podemos estar seguros de que no se verá afectado el cambio de estilos en el futuro si otro tipo de <h1> se añade.

Por ejemplo:
div # principal h1 (border-bottom: 5px sólidos # ccc;)

Avanzada CSS Propiedades del texto

13 de Septiembre de 2010

Hay muchas propiedades CSS para usar en las hojas de estilo. Estas son las propiedades del texto y cómo usarlas.

Propiedades del texto

word-spacing – define la cantidad de espacio entre las palabras.

  • Word-spacing: normal;

hace el espacio entre palabras.

  • Word-spacing: 15 mm;

Añade 15 mm de espacio entre las palabras.

Especificar la longitud, la altura de la fuente con ems, píxeles, picas, puntos, pulgadas, centímetros o milímetros.

espaciado entre letras - define la cantidad de espacio entre cada letra. Esto generalmente se denomina “seguimiento en el diseño de impresión.

  • Espaciado entre letras: normal;

permite el seguimiento normal para esta fuente.

  • Espaciado entre letras: 1 mm;

Añade 1 mm entre cada letra.

  • Espaciado entre letras:-1px;

Reduce el seguimiento de 1 píxel entre cada letra.

Especificar la longitud, la altura de la fuente con ems, píxeles, picas, puntos, pulgadas, centímetros o milímetros.

text-decoration - define la decoración del texto.

  • Text-decoration: none;

Quita todas las decoraciones sobre el texto. (Utilizado en <a> etiquetas a quitar el subrayado.)

  • Text-decoration: overline;

Pone una línea sobre el texto.

  • Text-decoration: underline;

Pone una línea debajo del texto.

  • Text-decoration: line-through;

Pone una línea a través de la línea media del texto.

  • Text-decoration: blink;

Hacer un abrir y cerrar de texto dentro y fuera. (No se admite en los navegadores que no sean derivados de Netscape.)

texto transformación - define el caso del texto.

  • El texto-transform: capitalizar;

Realiza la primera letra de cada palabra en mayúscula.

  • El texto-transform: mayúsculas;

Transforma el texto en mayúscula.

  • El texto-transform: minúsculas;

Transforma el texto en minúsculas.

  • El texto-transform: none;

Elimina todas las transformaciones del texto.

texto-align – define cómo el texto se alineará en la página.

  • El texto-align: left;
  • El texto-align: right;
  • El texto-align: center;
  • El texto-align: alcance;

Alinear el texto para que quede al ras con ambas partes del documento.

text-indent define la cantidad de la primera línea del texto que debe tener una sangría.

  • El texto-guión: 15mm;
  • El texto-guión: 5%;

Especifica la longitud de la fuente con ems, píxeles, picas, puntos, pulgadas, centímetros o milímetros.

line-height
define la cantidad de espacio entre líneas de texto. Esto se llama normalmente líder en el diseño de impresión.

  • Line-height: 1.5;

Sin una unidad, el número se supone que se multiplicará por la altura de la línea estándar para esta fuente.

  • Line-height: 5 mm;
  • Line-height: 10%;

Hay muchos más estilos, pero aquí ya tenemos algunos que podemos usar en nuestra hoja de estilos.

Avanzada CSS Propiedades de fuente

13 de Septiembre de 2010

Hay muchas propiedades CSS para usar en las hojas de estilo. Éstos son algunas de las características más populares de como usarlas.

Propiedades de la fuente

font-family – define la familia de fuentes que el texto debe mostrar en pulgadas (Nota: si el equipo que ve la página no tiene la fuente especificada, el navegador la intentará adivinar. Esto puede causar efectos extraños. Lo mejor es el uso normal  de fuentes, o fuentes genéricas.)

Para definir las familias específicas de la fuente, escribiremos los nombres de la familia en el orden que lo deseemos en la pantalla. Separe cada familia con una coma:

font-family: arial, ginebra, Helvetica, sans serif;

Para definir una familia de fuentes genéricas:

font-family: serif;

Las familias de fuentes genéricas incluidas en el sistema actual son:

  • Serif

font-family: serif;

  • Boton

font-family: sans-serif;

  • Monospace

font-family: espacio sencillo;

  • Cursiva

font-family: letra cursiva; ”

  • Fantasía

font-family: fantasy;

font-size - define el tamaño de la fuente. El tamaño de fuente puede ser especificado como un tamaño exacto, un tamaño relativo, con una longitud o un porcentaje (del espacio existente).

Para definir el tamaño exacto, simplemente especificar el tamaño en una de las siguientes medidas:

  • Ems

font-size: 13em;

  • Píxeles

font-size: 13px;

  • Picas

font-size: 13pc;

  • Puntos

font-size: 13pt;

  • pulgadas

font-size: 13IN;

  • centímetros

font-size: 13cm

  • milímetros

font-size: 13 mm

Hay siete tamaños estándar en los documentos HTML y XML, podemos definir su tipo de letra basado en los tamaños, así (texto estándar de tamaño medio):

  • Xx-small

font-size: xx-small;

  • X-small

font-size: x-small;

  • Pequeño

font-size: small;

  • Mediano

font-size: medio;

  • Grande

font-size: grande;

  • X-large

font-size: x-large;

  • Xx-large

font-size: xx-large;

Para definir el tamaño de letra en relación con el texto que lo rodea, podemos simplemente decir:

font-style - define si la fuente está en cursiva, oblicua, o normal.

  • Cursiva

font-style: italic;

  • Oblicua

font-style: oblicua;

  • Normal (por defecto)

font-style: normal;

font-variant - define si la fuente es normal o pequeña.

  • Small-caps

font-variant: small-caps;

  • Normal (por defecto)

font-variant: normal;

font-weight - define el grado de oscuridad o la luz del texto.

  • Negrita

font-weight: bold;

  • Audaz

font-weight: más audaces;

  • Más ligera

font-weight: más ligero;

  • 100

font-weight: 100;

  • 200

font-weight: 200;

  • 300

font-weight: 300;

  • 400

font-weight: 400;

  • 500

font-weight: 500;

  • 600

font-weight: 600;

  • 700

font-weight: 700;

  • 800

font-weight: 800;

  • 900

font-weight: 900;

  • Normal (por defecto)

font-weight: normal;

Avanzada CSS

13 de Septiembre de 2010

¿Cómo se crea en realidad una hoja de estilo?

Hay tres partes de una hoja de estilos:

  • Selector

el elemento o categoría y título de id a la que el estilo se aplicará

  • La propiedad

la información sobre cómo dar formato a la selección

  • Valor

el estilo concreto que debe aplicarse a la propiedad en el selector

Por ejemplo, si deseamos que todos los párrafos usen misma fuente, se utiliza el siguiente CSS:

p {
font-family : arial;
}

  • P

el selector. Todo el texto en el <p> / p> se ve afectado por este estilo

  • Font-family

la propiedad. Todos los textos tendrán la font-family cambiada

  • Arial

el valor. La fuente de la familia será “Arial”

Como se puede ver arriba, el formato de una declaración de estilo es:

selector {
property : value ;
property2 : value ;
}

Agrupe sus estilos para cada selector, juntos en llaves

{}

Luego separar la propiedad de los valores por dos puntos

:

Por último, al final de cada declaración de estilo con un punto y coma

;

(Nota: el punto y coma sólo se requiere para separar múltiples estilos, pero es una buena idea incluirlo en todo momento. A continuación podemos agregar más estilos.)

La selección es por lo general una etiqueta HTML, pero también podemos crear identificadores y clases. Estos tipos de selectores se utilizan cuando no se está seguro del estilo que vamos a utilizar. Por ejemplo, puede que quiera una clase de estilo  para “resaltar” el color de fondo a amarillo. No importará qué etiqueta se puso de relieve.

.highlight {
background-color : #ffff00;
}

Entonces, para usar ese estilo, establezeremos la clase en las etiquetas de HTML:

<h2> Este título se pone en relieve </ h2>

O simplemente podemos usar el

<span> </ span>

etiqueta para definir el texto exacto que se destacó.