CSS Avanzado

1. HerenciaLos estilos se heredan en las marcas de HTML. y

En el ejemplo: todo cdigo dentro de: y , tendr el siguiente estilo:

body { color:blue; font-family:verdana;}

1. Herenciabody { color:blue; font-family:verdana;}PrimeroTexto de PruebaSegundo

2. Herencia: Prioridadbody { font-family:verdana;}h1 { color:red;}p { color:green;}

Cuando existen 2 definiciones iguales, tiene prioridad la ms especfica.

En este ejemplo:Podemos ver que todas las marcas heredan la fuente verdana ya que ninguna marca la sobreescribe.

En cambio el color cambia.

2. Herencia: Prioridad

body { font-family:verdana; }h1 { color:red; }p { color:green; }

PrimeroTexto de Prueba

3. CSS en archivo externo.Hasta ahora hemos visto la definicin de estilos en el archivo HTML.

Ahora veremos que la metodologa ms empleada es la definicin de una hoja de estilo en un archivo separado que deber tener la extensin css.

Este archivo contendr las reglas de estilo (igual como las hemos visto hasta ahora) pero estarn separadas del archivo HTML.

3. CSS en archivo externo.La ventaja fundamental es que con esto podemos aplicar las mismas reglas de estilo a parte o a todas las pginas del sitio web.

Veremos que esto ser muy provechoso cuando necesitemos hacer cambios de estilo (cambiando en este archivo estaremos cambiando la apariencia de mltiples pginas).

Al programador le resulta ms ordenado tener lo referente a HTML en un archivo y el estilo en un archivo aparte.

3. CSS en archivo externo.Archivo: 3.htmlEstilo en archivo externo.Un archivo separado.

Archivo: estilo.cssbody {background-color:yellow; color:blue; font-family:arial;}

4. ClasesEn muchas situaciones una regla de estilo puede ser utilizada muchas marcas HTML. En esos casos conviene crear un estilo que se pueda aplicar a varias marcas de HTML.

Para conocer la sintaxis de clases veamos un ejemplo:

4. ClasesArchivo: 3.htmlTituloEs un texto resaltado en el final.

Archivo: estilo.cssbody { background-color:gray;}.resaltado{ color:black; background-color:yellow; font-style:italic; }

5. Borde de una marca HTMLTodo elemento de una pgina HTML genera una caja. Imaginemos los controles h1,h2,h3, etc.Si fijamos la propiedad background-color veremos que el contenido se encuentra dentro de un rectngulo.

Podemos acceder a las propiedades del borde de ese rectngulo mediante las CSS; las propiedades ms importantes a las que tenemos acceso son:border-widthborder-styleborder-color

5. Borde de una marca HTMLArchivo: 3.html Quin descubri Amrica?Coln

Archivo: estilo.css.pregunta { background-color:yellow; border-width:2px; border-style:solid;}.respuesta { border-width:1px; border-style:dashed; border-color:#black}

6. Fuentes (Formato resumido)Se pueden resumir las propiedades en una lnea:

Archivo: estilo.cssp { font:bold italic 25px verdana; }

Archivo: 3.html

Hola Mundo

7. Men horizontal con listaUn men muy comn es donde las opciones se encuentran una al lado de otra.

Veamos el cdigo de un men horizontal:

7. Men horizontal con listaArchvo: 3.html

ABC

HOY

UH

Archivo: menu.css.menu a { float:left; width:100px; text-decoration:none; text-align:center; color:red; background-color:yellow; padding:5px; border:1px solid;}.menu a:hover { background-color:blue;}.menu li { display:inline;}

8. Estilos en FormulariosUn formulario es el elemento esencial para el envo de datos al servidor.

Veamos un ejemplo donde implementamos un formulario y le aplicamos una serie de reglas de estilo a las diferentes marcas HTML que intervienen:

8. Estilos en Formularios

Nombre:
Telefono:

.formulario { width:300px; background-color:yellow; border:5px solid red; padding:10px;}.formulario form label { width:100px; float:left;}body{ background-color:gray; font-family:arial; font-size:16px; }

9. Estilos en TablasVeamos con un ejemplo como podemos afectar una tabla HTML con CSS.

9. Estilos en TablasTabla de PosicionesClubP.J.P.G.PuntosLibertad5413Olimpia527Cerro527

th{ border: 1px solid #fff; padding: 5px; background-color: blue; color: white; }td { border: 1px solid white; padding: 5px; background-color:pink; width:100px; text-align:center;}

10. Proyecto PUREEs un proyecto para utilizar CSS pre-fabricado:

Ejemplo