introduccic3b3n-css.pptx

Hojas de Estilo en
Cascada
CSS

• 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.

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.

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.

página.
Todas las parcas
<p> tendrán el
mismo estilo

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.

introduccic3b3n-css.pptx

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie introduccic3b3n-css.pptx

Ähnlich wie introduccic3b3n-css.pptx (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

introduccic3b3n-css.pptx