Css

Selectores por pseudocodigo Puedo hacer un link a y cambiar de color cuando a:link Cambio de color el link a:visited: cuando ya acido clickeado me cambia de color a:hover cuando paso sobre el link me cambia de color Primer hijo Otro selector de pseudo-clase til es first-child. Se usa para aplicar el estilo nicamente a los elementos que son los primeros hijos de sus padres. Por ejemplo:

p:first-child { color: red; } Har que todos los prrafos que sean los primeros hijos de sus padres tengan color rojo.

Instrucciones En la pestaa CSS, establece la propiedad font-family del primer prrafo como cursive.

Nth child
Bien hecho! En realidad puedes seleccionar cualquier hijo de un elemento despus del primer hijo con el selector de pseudo-clase nth-child; simplemente agregas el nmero del hijo entre parntesis despus del selector de pseudo-clase. Por ejemplo,
p:nth-child(2) { color: red; }

Les dar a todos los prrafos que sean los segundos hijos de su elemento padre el color rojo. El elemento que es el hijo va antes de:nth-child; su elemento padre es el elemento que lo contiene.

Instrucciones

En la pestaa CSS: 1. Establece la propiedad font-family del segundo prrafo como Tahoma. 2. Establece el color del tercer prrafo como #CC0000. 3. Establece el color de fondo del cuarto prrafo como #00FF00. 4. Establece la propiedad font-size del quinto prrafo como 22px.

Recuerdas cmo enfocarte en los selectores que estn anidados dentro de otros? Si tienes un prrafo dentro de una div que est dentro de otra div, puedes alcanzarlo de esta forma:
div div p { /*Cdigo de CSS*/ }

Esto le dar estilo a todos los prrafos anidados dentro de dos div y dejar intactos todos los prrafos que no cumplen con esos criterios. Ten en cuenta: Si has ajustado el nivel de zoom de tu navegador, los ejercicios que incluyen font-size y height no funcionarn correctamente. Para solucionarlo, presiona Comando+0 o Ctrl+0 para restaurar tu vista.

Instrucciones

Haz que los prrafos dentro de las etiquetas de tems de lista tengan un tamao de fuente de 30px.

Dale estilo a esos div!

Qu bien! Ahora vamos a darles a nuestros div una apariencia bsica. (En un momento usaremos las clases para cambiar la apariencia de nuestros div, dependiendo de si una persona determinada es un amigo, miembro de la familia, o un vil enemigo.) Hemos iniciado el selector div para ti, con un poco de magia de posicionamiento (display: inline-block y margin-left: 5px). Te explicaremos sobre ellos en la siguiente leccin! Ten en cuenta: Si has ajustado el nivel de zoom de tu navegador, los ejercicios que incluyen height y width no funcionarn correctamente. Para solucionarlo, presiona Comando+0 o Ctrl+0 para restaurar tu vista.

Instrucciones

Mientras tanto, dale un cambio de look a tus div en la pestaa CSS: 1. Haz que tengan ancho y alto de 100 pxeles. 2. Establece su propiedad border-radius como 100%. (Antes de que mires, puedes adivinar lo que esto har?) 3. Haz que tengan un borde de dos pxeles de ancho, de lnea slida y de color negro. Utiliza los comandos border: 2px solid black; margin-left: 5px; margin-top: 5px; text-align: center;

Ocupando espacio
Genial, verdad? Cada elemento de HTML tiene su propia caja para habitar. Como viste, la caja ms externa de cada elemento ocupaba el ancho de toda la pgina. Es por esto que, hasta ahora, tus elementos de HTML haban estado uno encima del otro: ocupan el ancho completo de la pgina de forma predeterminada. Podemos cambiar todo esto con la primera propiedad de posicionamiento que aprenderemos: la propiedaddisplay. Aprenderemos sobre cuatro valores posibles. block: esto vuelve al elemento una caja de bloque. No permitir que nada sea ubicado junto a l en la pgina! Ocupa el ancho completo. inline-block: Esto vuelve a un elemento una caja de bloque, pero permitir que otros elementos sean ubicados junto a l en la misma lnea. inline: Esto hace que un elemento sea ubicado en la misma lnea que otro elemento, pero sin darle formato como bloque. Solamente ocupa el ancho que requiera (pero no la lnea completa). none: Esto hace que el elemento y su contenido desaparezcan por completo de la pgina!

Instrucciones

Pongmonos manos a la obra. Establece la propiedad display de todas las <div> como block.

Inline-block
Bien hecho! Si no notaste mucho la diferencia, no te preocupes. Nuestras<div> eran elementos block de forma predeterminada; a medida que especifiquemos diferentes valores de la propiedad display, stas comenzarn a desplazarse. Como lo mencionamos, cualquier elemento que tenga caractersticas de bloque (por ejemplo, un prrafo) automticamente ocupar el ancho completo de la pgina, sin importar qu tanto o tan poco contenido le asignes. Sin embargo, si especificamos una propiedad display de valor inline-block, nuestros bloques an sern bloques, pero podremos ubicarlos uno junto al otro en la misma lnea.

Instrucciones

Cambia la propiedad display de todas tus <div>, de modo que el valor ahora sea inline-block en vez de block.

Inline
Viste eso? Todas tus <div> se ubicaron sobre la misma lnea! Ya puedes comenzar a ver cmo este tipo de posicionamiento puede ser til para las barras de navegacin, como la que se encuentra en la parte superior de esta pgina (donde puedes hacer clic en "Aprender," "Ensear," etc). El valor inline-block te permite ubicar varios elementos de bloque en la misma lnea. El valor inline ubica todos tus elementos uno junto al otro, pero no como bloques: los elementos no conservan sus dimensiones.

Instrucciones

Intntalo y observa! Establece la propiedad display de todas tus <div>con el valor inline.

Margen superior, derecho, inferior, izquierdo

Si quieres establecer un margen determinado, puedes hacer esto:
margin-top: /*algn valor*/ margin-right: /*algn valor*/ margin-bottom: /*algn valor*/ margin-left: /*algn valor*/

Tambin puedes establecer a la vez todos los mrgenes de un elemento: simplemente comienzas con el margen superior y avanzas en el sentido de las manecillas del reloj (del superior al derecho, al inferior, y al izquierdo). Por ejemplo,

margin: 1px 2px 3px 4px;

establecer un margen superior de 1 pxel, un margen derecho de of 2, un margen inferior de 3 y un margen izquierda de 4.

Instrucciones

Elimina margin: auto; de nuestra div en la pestaa CSS. Usando el mtodo que prefieras, dale un margen superior de 20px, un margen derecho de 50px, un margen inferior de 10px y un margen izquierdo de 5px.

Despejar elementos
Por desgracia, a veces combinamos elementos grandes, flotantes y no flotantes, y los elementos terminansuperponindose. Ves tu pie de pgina (el pequeo cuadro de color azul en medio de las dos columnas)? Est atorado all atrs porque no le hemos indicado algo muy importante: que se aparte de los dems elementos en la pgina! Si usas la propiedad clear: left en un elemento, este inmediatamente se desplazar debajo de cualquier elemento flotante en el lado izquierdo de la pgina; tambin se puede usarright para desplazarlo hacia el lado derecho. Tambin puedes usar clear:both para que se aparte de los elementos que estn en la izquierda yen la derecha! La sintaxis es la misma a la que ests acostumbrado:
elemento { clear: /*right, left, o both*/ }

Instrucciones

Establece la propiedad clear de la div con el identificador #footer comoboth.

Posicionamiento absoluto
El primer tipo de posicionamiento es posicionamiento absoluto. Cuando se establece un elemento con position: absolute, se posiciona en relacin con el primer elemento padre que tiene y que no est establecido con position:static. Si no existe tal elemento, el elemento con position: absolute se posiciona en relacin con <html>. Para mostrarte como funciona esto, hemos establecido la div #exteriorpara que tenga posicionamiento absoluto. Esto quiere decir que cuando posiciones la div #interior, esta ser relativa a #exterior. (Si #exteriortuvo el posicionamiento predeterminado static, #interiortendra un posicionamiento relativo al documento HTML.)

Instrucciones

Intntalo: establece la propiedadposition de #interior comoabsolute y su propiedad margin-leftcomo 20px.

Fijar tu encabezado
Buen trabajo! Ahora es momento de, literalmente, fijar tu encabezado, de modo que permanezca quieto en la pgina mientras que las personas se desplazan por ella para leer tu hoja de vida. Si lees con cuidado el cdigo CSS del primer ejercicio, vers que ocultamos para ti un pequeo truco: la propiedadz-index. Piensa en z-index como una medida de importancia: entre ms alto sea el z-index de un elemento, ms "alto" se ver el elemento en la pgina. Si le das un z-index de 1 a tu encabezado, mientras que no le das ningn z-index a los dems elementos, asegurars que tu encabezado se asiente "encima" de tus dems elementos y que no se vea cubierto por ninguno de ellos.