presentación de powerpoint - wordpress.com...•css son las siglas de cascade style sheet que...
TRANSCRIPT
Hojas de Estilo en Cascada
CSS
RAFAEL MOURGLIA
• CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada.
• Las hojas de estilo es una tecnología que nos permite controlar la apariencia de una página web.
• En un principio, los sitos web se concentraban más en su contenido que en su presentación.
• HTML no pone mucha atención en la apariencia del documento.
¿Qué son las Hojas de Estilo? (CSS)
• CSS describe como los elementos dispuestos en la página son presentados al usuario. CSS es un gran avance que complementa el HTML y la Web en general.
• Con CSS podemos especifiar estilos como el tamaño, fuentes, color, espaciado entre textos y recuadros así como el lugar donde disponer texto e imagenes en la página.
¿Qué son las Hojas de Estilo? (CSS)
Aplicar estilos a una página
• Existen 3 formas de aplicar estilos a una página html:
1. Directamente en una etiqueta
2. En el <head> de la página
3. Agrupar reglas de estilo en un archivo externo (*.css). En esta opción es en la que haremos énfasis por ser la más recomendada.
Sintaxis para definir un estilo
Propiedad : Valor_propiedad• A diferencia de html, se utiliza dos puntos
(:) luego del nombre de la propiedad en vez de igual (=), y el valor de la propiedad NO VA entre comillas.
• Como ejemplo, utilizaremos un estilo para modificar el color de la fuente.
color : red
Propiedad Valor de la Propiedad
Sintaxis para definir un estilo
• Es posible definir todos los estilos que querramos para un elemento. Para esto debemos separar los estilos con punto y coma (;).
• Ejemplo: además de cambiar el color de la fuente, cambiaremos también el tamaño.
color: red; font-size: 30px;
Estilo para cambiar el color de fuente
Estilo para cambiar el tamaño de fuente
Definición de estilo a nivel de marca html• Es la forma más fácil pero menos recomendada para
aplicación de un estilo a una marca HTML.
• Se define en la propiedad style de cada elemento HTML.
• Puede ser de utilidad definir estilos directamente en las marcas HTML cuando estamos diseñando la página y posteriormente trasladar el estilo creado a una hoja de estilos.
Definición de estilo a nivel de marca html• En caso de necesitar aplicar los mismos estilos para el
resto de los párrafos, es necesario copiar estos estilos para cada párrafo que se encuentre en la página.
• Esto consume tiempo y en caso de querer cambiar un estilo (por ejemplo que los párrafos en vez de color azul se vean rojos), será necesario modificarlo en cada párrafo.
Definición de estilo a nivel de página.
• Es la definición de estilos en una sección de la cabecera de la página HTML (HEAD) donde podemos definir estilos que se aplican a las distintas marcas HTML de la página.
• El problema del concepto anterior donde debíamos crear un estilo similar para la marca <p> se puede resolver en forma más adecuada empleando la definición de estilos a nivel de página.
Definición de estilo a nivel de página.
Todas las marcas <p> tendrán el mismo estilo
Definición de estilo a nivel de página.
• Si ahora deseamos modificar el color de los párrafos de azul a verde, sólo modificaremos la propiedad de ese estilo por única vez.
Definición de estilo en un archivo externo.
• La definición de una hoja de estilo en un archivo separado, es la metodología mas utilizada. Este archivo deberá tener la extensión css.
• Este archivo contendrá las reglas de estilo (igual como las hemos visto hasta ahora) pero estarán separadas del archivo HTML.
Definición de estilo en un archivo externo.• Ventajas de este método:
– Permite aplicar las mismas reglas de estilo a parte o a todas las páginas del sitio web. Ésto será muy provechoso cuando necesitemos hacer cambios de estilo (cambiando las reglas de estilo de este archivo estaremos cambiando la apariencia de múltiples páginas del sitio).
– Al programador le resulta más ordenado tener lo referente a HTML en un archivo y las reglas de estilo en un archivo aparte.
– Cuando un navegador solicita una página, se le envía el archivo HTML y el archivo CSS, quedando guardado este último archivo en la caché de la computadora, con lo cual, en las sucesivas páginas que requieran el mismo archivo de estilos, ese mismo archivo se rescata de la caché y no requiere que el servidor web se lo reenvíe (ahorrando tiempo de transferencia).
Crear archivo externo CSS
• De la misma forma que HTML, un archivo CSS se crea en un programa que maneje texto sin formato (como el block de notas).
• En este archivo se especifican las reglas de estilos de la misma forma que se haría a nivel de página, y luego se guarda con la extención .css.
Crear archivo externo CSS
estilos.css
Asociar página HTML con archivo externo CSS
• La asociación se realiza en el HEAD de cada página HTML utilizando el elemento <link>.
Propiedades del elemento <link>
• rel: se usa para definir la relación entre el archivo enlazado y el documento HTML.
• href: dirección o URL del archivo externo CSS. Se especifica de la misma forma que un hipervínculo o imagen.
• type: indica al navegador cual es el formato de archivo.