css

html
 Son los íconos de la barra de navegación

En el ejemplo esta gran caja contenedora es un <section> que está entre

el </nav> y e l<footer>, por lo que lo único que se tiene que hacer es
ponerle como nombre (de id) contenido que esta dentro de la caja de
<div>
Como se puede ver, el <section...> se abre justo después de cerrar el
</nav> (que es justamente donde empieza el contenido propio de la
página) en este caso el <div> que contiene todo el contenido de la
página.

...y se cierra </section> (casi al final de la página), justo antes de abrir el

<footer>, ósea cuando acaba el contenido.
Lo primero que se hará con CSS es:
• Eliminar las viñetas (redondas) que hay delante de cada enlace.
• Poner todos los enlaces seguidos en la misma línea.
• Que quede espacio a los lados de cada enlace (para que no estén pegados).
• Centrar horizontalmente el enlace.
• Eliminar el margen (sangría) que hay por defecto a la izquierda de una lista.

Para entender el código hay que comprender perfectamente la estructura que

tenemos:
• Existen 4 elementos, cada uno de ellos es un <li>.
• Los 4 <li> están dentro de un <ul>.
• Y el <ul> está dentro de una caja de tipo <nav>.
ESTILO CSS
Pero para eliminar la sangría (o espacio vacío) que por defecto deja cualquier lista a su
izquierda, tenemos que modificar el padding de la propia lista <ul> (no de cada uno
de los <li>).
ESTILO CSS
ul{
padding:0;
}
➢ El selector 'nav li {' es el que indica que las propiedades que le siguen sólo afectarán
a los <li> que estén dentro de cualquier <nav>.
➢ font-family:stencil;coloca el tipo de letra
➢ list-style:none; elimina las viñetas (circulos negros) de cada uno de los cuatro <li>.
➢ display:inline-block; lo que hace es poner todos los elementos <li> en la misma
línea (inline) pero al mismo tiempo los mantiene como bloques (cajas).
➢ padding:0px 85px; sirve para dejar un espacio vacío dentro de la caja de
cada <li> de 0 píxeles por arriba y abajo y 85 por la derecha e izquierda.
➢ text-align:center; centra horizontalmente el texto del enlace.
(background-color:gray; Provisionalmente colocamos un fondo gris, únicamente
para poder visualizar el área de cada uno de los tres <li>.)

➢ a{ es el selector CSS que indica a QUÉ ELEMENTOS van a afectar las propiedades
que siguen. Así, en este caso a apunta a todos los enlaces que contenga la página.
➢ text-decoration:none; es una propiedad CSS que elimina el subrayado de los
enlaces y que por lo tanto únicamente funciona cuando va dentro de un selector a{.
➢ color:#1234aa; es una propiedad CSS que cambia el color de los enlaces, en este
caso a azul.
➢ font-size:20px; es una propiedad CSS que cambia el tamaño de la fuente de los
enlaces, en este caso a un tamaño de 20 píxeles.
➢ a:hover{ es el selector CSS que indica a qué elementos van a afectar las
propiedades que siguen, pero SÓLO cuando el cursor del ratón pase por encima
de un enlace (:hover).
En este caso, cuando el cursor pase por encima de un enlace, éste se coloreará café
marron.
➢ nav:hover{ afecta al contenido de la caja <nav>, mientras que <:hover> indica qué
únicamente se aplicará el CSS cuando el cursor se sitúe encima.
➢ cursor:default; cambia el tipo de cursor por el habitual.
Se configurará los 3 <article> para que tengan un aspecto como el del ejemplo:

• Los bordes externos son ligeramente curvos en sus 4 esquinas.

• Este mismo perímetro tiene un borde gris.
• Debajo de 'La motivación y el entusiasmo ' se incluye una línea horizontal (<hr>).

Para hacer estos cambios a los 3 <article> a la vez se pone el mismo nombre de clase (class) para que el
selector CSS afecte a todos y un nombre id sólo al <article> central.

ESTILO CSS
. cuadros{
width:240px;
border:1px lightgray solid;
border-radius:3px;
background-color:white;
text-align:center;
padding:20px 15px;
box-shadow:10px 5px 10px gray;
float: left;
}
El selector '.cuadros{ ' incluye a todas las cajas que tiene un class="cuadros", que en este caso son tres.
➢ width:250px; limita la anchura de cada uno de los cuadros, de tal manera que los 3 <article>
puedan posteriormente caber (ya que todavía no se alinearán).
➢ border:5px lightgray solid crea una línea que rodea cada <article> de 1 píxel de grosor, de color gris suave y
de tipo sólido.
➢ border-radius:5px; indica la curvatura de las 4 esquinas exteriores a 3 píxeles.
➢ background-color:white; coloca un fondo de color blanco.
➢ text-align=center; centra todo el contenido (incluyendo la imagen).
➢ padding: 20px 15px; deja un margen interno de píxeles de 20 píxeles superior e inferior y 15px a los lados
izquierda y derecha
➢ box-shadow: 10px 5px 10px gray; añade una sombra a la caja (box) con los siguientes parámetros:
El primer 10px indica el desplazamiento horizontal de la sombra, como es 10 se coloca justo detrás del cuadro.
➢ El segundo 5px indica el desplazamiento vertical de la sombra, como es 5 se coloca justo detrás del cuadro.
➢ 10px indica la intensidad-grosor de la sombra. A más cantidad más sombra.
➢ gray indica el color de la sombra (color que se mostrará degradado).
➢ float: left; los cuadros se alinearán a la izquierda
Estilo CSS
body{
background:url("10.png");
background-repeat:no-repeat;
background-color:#12345f;
}
➢ El selector 'body{' indica que el código CSS afectará al <body> (osea a toda la web).
➢ Con background:url indica qué imagen se colocará de fondo y dónde se encuentra.
➢ background-repeat indica que la imagen no se repita (sólo se mostrará una vez).
➢ background-color especifica el color de fondo del resto de la web.
Para que funcione, es MUY importante especificar el color después de especificar la imagen.

ESTILO CSS
header{
font-size:25px;
color:#12345a;
}
nav{
color:blue;
font-size:20px;
}
footer{
clear:both;
font-size:13px;
color:gray;
}
#titulo{
font-family:arial;
font-size:18px;
margin-top:47px;
color:gray;
}
➢ Para el nombre del curso 2B el <header> (Sistemas.) utilizamos calibri (por defecto) a un tamaño de 25
píxeles y color #12345a.
➢ Para los elementos del <nav> (el “Inicio” y los 3 enlaces) utilizamos stencil a un tamaño de 20 píxeles.
➢ Para el texto del <footer> el tipo de letra es calibrí (por defecto)a un tamaño de 13 píxeles y de color gris
claro (gray).
➢ Para el div llamado #titulo tipo de letra arial a un tamaño de 18 píxeles margen superior con margen-
top:40px y color gris claro(gray)