CSS: atributos más comunes Texto y fondos- Parte 1 de ayuda y consejos para nuevos webmaster

Siguiendo con el mini-curso, pasamos a revisar los atributos más comunes en CSS. i.e, manipulación de texto y fondos.

Texto:

Al texto podemos aplicar los siguientes atributos, con sus respectivos valores:

{font-family: [fuente];} ej: p {font-family: "Times New Roman", Times, serif;}Aquí están las combinaciones seguras

{font-size: [px / em / %]; ej: p {font-size: 16px;}

{font-style: [ normal/italic/bold/oblique ];} Donde normal es por defecto, italic es cursiva, bold es negrita y oblique es similar a italic, pero con menos soporte.

{font-variant: [ normal/small-caps/inherit ];} Donde normal es por defecto, small-caps es versalitas (mayúsculas pequeñas) e inherit especifica que herede atributos del elemento padre.

{font-weight: [normal/bold/bolder/lighter/100/200/300/400500/600/700/800/900];} Donde bold es negrita, bolder es más grueso que antes, lighter es más delgado que antes, 400 equivale a normal, 700 equivale a bold.

En CSS, podemos escribir los atributos font en una sola línea, si lo hacemos en este orden:

{font: [font-style] [font-weight] [font-size] [font-family];}{font: italic 700 30px Verdana, Arial;}

Además, tenemos para tratar párrafos (aunque no estén en un elemento <p>) lo siguiente:

{letter-spacing: [px / em];} esto cambiará el espacio entre las letras.

{text-transform: [ capitalize/uppercase/lowercase ];} Se transformarán mayúsculas y minúsculas;  capitalize cambiará a Mayúscula La Primera Letra De Cada Palabra, uppercase cambiará todo a MAYÚSCULAS y lowercase, todo a minúsculas.

{text-align: [ left/center/right/justify ];} si el texto se alínea a la izquierda, al centro, a la derecha, o se justifica.

{text-decoration: [ none/overline/line-trough/underline/blink ];} Donde none es nada, overline es línea encima del texto, line-trough es tachado, underline es subrayado, blink es parpadeante (no todos los navegadores soportan blink).

{text-indent: [ px  /em / % ];} Ajustará la sangría de la primera línea de texto.

También podemos especificar el color del texto:

{color: [ RGB/RGBa/HEX/HSL/HSLa/predefinido];} Tenemos 6 formas de escribir el color.

• Usando rgb, puede ser: rgb(255,255,255) o bien rgb(100%,100%,100%). El primer valor es cantidad de rojo; el segundo, de verde; y el tercero, de azul. Valores van del 0 al 255 o del 0% al 100%.
• Usando rgba, es igual que arriba, pero con un cuarto miembro, numeral del 0 al 1, para el canal alfa o de transparencia. 1 es opaco y 0 es transparente rgba(0,255,255,0.5).
• Usando HEX es lo más común: #FFFFFF Los dos primeros caracteres son para rojo, los dos del medio son para verde, y los dos últimos son para azul. En sistema hexadecimal, los números van del 0 al 9, y luego de la A a la F en el siguiente orden creciente: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
• HSL se usa: hsl(360,100%,50%). El primer valor es el matiz, de 0 a 360, siendo ambos extremos equivalentes a rojo. El segundo, es saturación y el tercero es luminosidad. Esta es la representación de colores coordinados en cilindro, que podemos ver en software como Paint, GIMP o Photoshop. Una saturación del 0% supone un color negro. Una luminosidad del 0% es negro también. Una combinación de Sat. 0% y Lum 100% supone gris. Es decir, cuando un valor es cero, anula todos los valores a su izquierda. Luminosidad 0% es negro, independiente de los demás valores, y 100% es blanco. Pero saturación 0% aún depende de la luminosidad.
• HSLa se usa como el ejemplo anterior, pero con un cuarto valor que representa el canal alfa o de transparencia hsl(360,100%,50%,0.3).
• Un color predefinido es interpretado por el navegador. podemos escribir transparent, blue, black, red, white... o alguno de los 147 colores predefinidos posibles.

Fondos:

Podemos aplicar los siguientes atributos a los fondos, con sus respectivos valores

{background-color: [ RGB/RGBa/HEX/HSL/HSLa/predefinido];} Este atributo se maneja igual que color ya explicado.

{background-image: url(  [ruta o url]  );} 
ej. {background-image: url('fondo.gif);}. Podemos colocar una URL externa.

{background-repeat: [repeat/no-repeat/repeat-x/repeat-y];} Por defecto, una imagen se repite hacia la derecha y hacia abajo. Con repeat-x hacemos que se repita sólo hacia la derecha. Con repeat-y hacemos que se repita sólo hacia abajo. no-repeat hace que no se repita en ninguna dirección. Para entender este atributo, debemos imaginar nuestra imagen en un sistema de ejes perpendiculares.

{background-attachment: [scroll/fixed];} Especifica si la imagen de fondo debe ser explorada junta con la página o se queda estática mientras exploramos la página. scroll hace que se mueva; fixed, que se quede quieta.

{background-position: [left/right] [top/bottom] / [nºpx] [nºpx] / inherit;}. Podemos especificar adonde se alineará el fondo de 3 maneras.

• [left/right/center] [top/bottom/center]: left top, right bottom, etc. Si se especifica sólo un valor, el otro se trata como center.
• [nºpx] [nºpx]: 10px 20px. El primer valor es para x el segundo para y. Se pueden usar otras medidas, como em o %.
• inherit: heredado del elemento padre.

Se pueden combinar medidas absoultas y porcentajes.

Podemos usar background de la forma abreviada si escribimos en el siguiente orden:

{background: [color] [image] [repeat] [position];}

ej:

{background: #000000 url(fondo.gif) no-repeat left top;}

Hasta aquí los atributos más comunes de CSS. para la próxima, más atributos.

¡Con esto ya tienes para experimentar mucho, haz la prueba!

Ver la primera parte (Introducción a CSS)