Está en la página 1de 18

HTML 5 Y CSS 3

Semntica de la pagina y esttica de


la misma

CSS Cascade Style Sheet

Hojas de Estilo en Cascada.

Una hoja de estilo est compuesta


de reglas de estilo que le dicen a un
navegador como mostrar un
documento.
Intenta separar en un documento el
estilo lgico del estilo fsico, dejando
este ltimo en bloques de definicin
de estilos separados de la estructura
del documento.

CSS 3.

Lenguaje de Hojas de Estilo destinado a


la presentacin de los contenidos en una
pagina web.
Separar los contenidos del diseo.
Dar un aspecto a cada elemento de la
pagina.
Algunos elementos de CSS 3

Cajas con bordes redondeados.


Trasparencias y sombras.

Ventaja de olvidarse de la versin del


navegador del usuario final.

Estilos Lgicos y Estilos


Fsicos

El estilo lgico se refiere a la lgica del


documento: cabeceras, prrafos, tablas,
textos, etc., no se preocupa de la
apariencia final, sino de la estructura del
documento (Maquetacin).
El estilo fsico no se preocupa de la
estructura del documento, sino por la
apariencia final: prrafos con un cierto
tipo de letra, tablas con un determinado
color de fondo, etc.
La finalidad de las hojas de estilo es crear
unos estilos fsicos, separados de las
etiquetas HTML y aplicarlos en los bloques

Insertar CSS en el
documento

Se agrega en el head insertndolo con


etiquetas style.

Linkear un archivo externo donde se


encuentren todos los estilos deseados.
Archivo con extensin .css

Ejercicio 1

Abre los archivos de la carpeta Ejemplo1.


Cambia el fondo de la pagina para que todos
tengan el mismo color.
Cambia el color de las etiquetas Encabezado1
(H1) a un color en particular.
Cambia el color de los prrafos <p>, todos el
mismo.
Si ahora se desea cambiar el color de fondo
de todas las paginas.. Qu se tendr que
realizar..

Inclusin de estilos en la misma pgina

Son Estilos Globales, pero solo en esa


pgina.
Etiqueta STYLE. Se coloca en la
cabecera HEAD del documento y
contiene las reglas de estilo para la
pgina.

Elementos CSS

Selector

Declaracin
(instrucciones)

Propiedad (modificar
caractersticas)

Valor

Regla: Ordenar en forma alfabtica en base al selector y


dentro de cada regla tambin la ordenacin en base a la
propiedad.

Regla

Selectores

Universal. Todos los elementos de la pagina.

De etiqueta. Acta especficamente sobre la


etiqueta establecida.

Selector mltiple. Permite aplicar las mismas


propiedades a varias etiquetas.

Ejercicio 2.
Abrir los archivos de la carpeta Ejemplo 2 y aplicar de
forma manual los siguientes estilos.
*{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h1 {
color:#6600FF;
}
p,h2 {
background-color: #FF33CC;
}

Compartir propiedades

Selector descendente. Seleccionar


elementos dentro de otros elementos. Se
encuentra dentro de las { } de otro.

Conclusin

Ejercicio 3
Al ejemplo anterior agrega un selector
descendente.
article div li {
color:#FF00FF;
}

Separacin los estilos de


HTML
Creacin de una hoja de estilos.
Archivo con la extensin CSS.
Adjuntar el archivo .css con la
instruccin
<LINK REL="stylesheet" TYPE="text/css"
HREF="URL_Hoja.css">

Atributos de la etiqueta link

Rel = Tipo de relacin que se esta realizando.


Type = Tipo de recurso enlazado. Es un tipo de texto.
Href = url donde se encuentra el archivo
Media = medio donde se va aplicar el archivo css.
Asignar hojas de estilo de acuerdo al medio de
reproduccin: pantalla (screen), mvil (handheld),
televisin (tv), impresin (print), impresoras
brailet(braille), proyector (proyection), todos (all)

Establecer la configuracin de un CSS

Practica

Abre los archivos de la carpeta


Ejemplo3.
Crea una hoja de estilos.
Aplica los estilos deseados en esa hoja.
Adjunta la hoja de estilos a todas las
paginas.
Observa los cambios.
Realiza las modificaciones deseadas..