xiapa

Hojas de estilo

Las hojas de estilo (CSS por sus siglas en inglés) ayudan a los documentos HTML y XHTML a mejorar su aspecto, la forma en como el usuario puede ver los  colores, fuentes, tamaño de fuentes, tablas, lista de elementos, en fin, todos los elementos que se ven o pueden llegar a ver en una página web.

No todos los navegadores soportan todas las versiones que se han liberado de CSS. De igual forma, cada navegador tiene una versión y cada una, puede soportar diferente versión de CSS. Existen tres versiones de CSS: CSS1, CSS2, CSS3. Los navegadores más usados son: Internet explorer (IE), Firefox (FF), Safari, opera y google chrome.Por lo tanto, antes de empezar a manejar hojas de estilo, hay que pensar que el usuario puede usar calquiera de estos navegadores y diseñar una hoja de estilos que pueda ser soportado por estos.

Se puede incluir las hojas de estilo de tres maneras: Dentro del mismo documento, desde un archivo externo y en los elementos html. Se recomienda usarlo desde un archivo externo, ya que se ahorra muchas líneas de código y la edición de la hoja de estilo, o agregar una nueva regla, se hace de manera fácil y sin complicaciones de andar buscando las reglas dentro de los documentos o elementos de html.

Sintaxis de CSS

selector { propiedad: valor }
_________________
declaración
_____________________________
regla

Regla: Es cada uno de los estilos que componen una hoja de estilos.

Declaración: Son las características que llevará la regla

Selector: Es el nombre que se le da a un estilo en particular, generalmente se ponen los elementos html (<p>, <h1>, <a>, <h2>, etc)

Propiedad: Esta permite modificar la caraccterística de un elemento

Valor: Es el valor que se le da a la característica modificada en el elemento.

Un archivo CSS puede contener infinitas reglas css, cada regla puede contener infinitos selectores y cada declaración puede estar formada por un número infinito de pares propiedad/valor

Ejemplo:

h1 {color: black}

En cada regla se le puede asignar más de un valor, el cual se separa de uno a otro con un ; (punto y coma)

Ejemplo:

h1 {color: black; size: 6 px}

CSS define algunas propiedades específicamente para determinados medios o dispositivos como lo son: pantallas, impresoras, móviles, proyectores, entre otros.

Propiedades:

• all. Todos los medios definidos

• braille. Dispositivos táctiles que emplean el sistema braille

• embosed. Impresoras braille

• handheld. Dispositivos de mano: móviles, PDA, etc.

• print. Impresoras y navegadores de modo vista “vista previa para imprimir”

• projection. Proyectores y dispositivos para presentaciones.

• screen. Pantallas de ordenador

• speech. Sintetizadores para navegadores de voz utilizados para personas discapacitadas

• tty. Dispositivos textuales limitados como teletipos y terminales de texto.

• tv. Televisores y dispositivos con resolución baja.

Los medios más actualizados actualmente son screen y print, seguidos de handheld.

Tags: CSS, estilo, hojas, programacion, web