Este es el listado de las 10 propiedades CSS que pueden ser usadas en cualquier desarrollo y son compatibles con cualquier navegador (IE6+, Firefox 3.0+, Chrome 2+, Safari 3.1+, y Opera 9.2+) y no presenta ningún tipo de problema.
- color
- direction
- font-family
- font-size
- font-style
- font-weight
- list-style-position
- table-layout
- text-indent
- word-wrap
Es bien conocido ya el problema de compatibilidad con navegadores que se presenta al desarrollar cualquier proyecto web, y es por esta razón que es necesario conocer las propiedades que son compatibles entre navegadores y no presentan fallas, aunque algunas de ellas ignoren el valor "inherit".
Fuente: Impressivewebs
En CSS, disponemos de una gran cantidad de código para trabajar con fuentes, veremos algunos códigos que nos van a servir para darle estilos a las fuentes.
Seleccionar Tipografía en CSS
Para seleccionar el tipo de fuente con el que vamos a trabajar, en CSS hacemos uso del código: font-family
Por ejemplo:
font-family:Arial, Helvetica, sans-serif;
Con el anterior código le indicamos al navegador en el que se visualiza nuestro sitio que muestre el texto con la tipografía"Arial", si esta no esta disponible o no se encuentra instalada, utilice la tipografía "Helvetica" para mostrar el contenido, si esta no se pudiera usar, va a mostrar el texto con la tipografía "sans-serif" y si esta no se pudiese utilizar, el navegador utilizara la fuente por defecto configurada en el sistema.
Tamaño de la fuente en CSS
Para indicar el tamaño de la fuente en CSS, hacemos uso del código: font-size
Por ejemplo:
font-size:36px;
Si aplicamos el anterior código a un párrafo de texto en CSS, este tendrá un tamaño de 36 Píxeles. Recordemos las unidades de medida que podemos utilizar en CSS. Unidades de medida en CSS.
Ademas de los tamaños que podemos definir con números, existen tamaños predefinidos en CSS tales como:
- large
- larger
- medium
- small
- smaller
- x-large
- x-small
- xx-large
- xx-small
Color de la fuente en CSS
El color de la fuente en CSS puede modificarse haciendo uso del código: color
Por ejemplo:
color:#FF0000;
Con el anterior código estamos dando un color rojo al texto, debemos especificar el color que queremos usar mediante su código hexadecimal precedido por el sigo de numero (#), o podemos indicar el color en texto cuando se trata de uno de los colores principales, red, blue, black, entre otros.
Estilos de fuente en CSS
En CSS también podemos darle diferentes estilos a las fuentes usando el código: font-style
Por ejemplo:
font-style:italic;
Con el anterior código, indicaremos que en el parrafo donde se apliquen los estilos, la fuente sera del tipo italic, o cursiva como también suele llamarse.
A este comando podemos darle los siguientes valores:
- italic
- inherit
- normal
- oblique
Grosores de fuente en CSS
Para definir un grosor de la fuente en CSS, usaremos el siguiente código: font-weight
Por ejemplo:
font-weight:700;
Con este código, indicamos el grosor del texto al que le estamos aplicando el estilo, dentro de los valores que podemos darle a este código encontramos, grosores por debajo del predefinido bold, o comúnmente llamado negrita, los valores que acepta son los siguientes:
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- bold
- bolder
- inherit
- lighter
- normal
Otros estilos de fuentes en CSS
Podemos hacer uso de otros estilos que se usan de forma un poco menos común,
Para estirar: font-stretch
Variantes: font-variant
En CSS disponemos de una gran variedad de unidades de medida con las que podremos trabajar cuando estemos desarrollando o modificando un sitio web.
Unidades Absolutas
- in (pulgadas)
- cm (centímetros)
- mm (milímetros)
- pt (puntos)
- pc (picas)
- px (pixeles)
Unidades Relativas
Unidades Porcentuales
Es importante tener en cuenta que, al utilizar unidades de longitud absolutas como los pixeles, los centímetros, los puntos y demás, tendremos la posibilidad de indicar el tamaño exacto con el que queremos trabajar, pero, este tamaño varia de dispositivo a dispositivo ya que la configuración de pixeles por pulgada en cada uno de los dispositivos en los que se visualizara la pagina variará, es por esta razón que muchas veces es aconsejable hacer uso de las unidades relativas, ya que con estas se tendrá un control relativo al tamaño del entorno en donde se mostrara el objeto al que se le apliquen los estilos correspondientes.
La siguiente tabla la he copiado de Reeddesign y muestra las equivalencias aproximadas entre unidades de medida:
| Puntos |
Pixeles |
Em’s |
% |
| 6pt |
8px |
0.5em |
50% |
| 7pt |
9px |
0.55em |
55% |
| 7.5pt |
10px |
0.625em |
62.5% |
| 8pt |
11px |
0.7em |
70% |
| 9pt |
12px |
0.75em |
75% |
| 10pt |
13px |
0.8em |
80% |
| 10.5pt |
14px |
0.875em |
87.5% |
| 11pt |
15px |
0.95em |
95% |
| 12pt |
16px |
1em |
100% |
| 13pt |
17px |
1.05em |
105% |
| 13.5pt |
18px |
1.125em |
112.5% |
| 14pt |
19px |
1.2em |
120% |
| 14.5pt |
20px |
1.25em |
125% |
| 15pt |
21px |
1.3em |
130% |
| 16pt |
22px |
1.4em |
140% |
| 17pt |
23px |
1.45em |
145% |
| 18pt |
24px |
1.5em |
150% |
| 20pt |
26px |
1.6em |
160% |
| 22pt |
29px |
1.8em |
180% |
| 24pt |
32px |
2em |
200% |
| 26pt |
35px |
2.2em |
220% |
| 27pt |
36px |
2.25em |
225% |
| 28pt |
37px |
2.3em |
230% |
| 29pt |
38px |
2.35em |
235% |
| 30pt |
40px |
2.45em |
245% |
| 32pt |
42px |
2.55em |
255% |
| 34pt |
45px |
2.75em |
275% |
| 36pt |
48px |
3em |
300% |
