Scribd
Cargar
30 vistas3 páginas

Plantilla Css Web

Se configurará la presentación de una lista de enlaces y tres artículos mediante CSS. Se eliminarán las viñetas de los enlaces y se los alineará horizontalmente, y los artículos tendrán bordes curvos, sombreados y flotarán a la izquierda.

Cargado por

VIRGINIA MENDOZA CARVAJAL
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
30 vistas3 páginas

Plantilla Css Web

Se configurará la presentación de una lista de enlaces y tres artículos mediante CSS. Se eliminarán las viñetas de los enlaces y se los alineará horizontalmente, y los artículos tendrán bordes curvos, sombreados y flotarán a la izquierda.

Cargado por

VIRGINIA MENDOZA CARVAJAL
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 3

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

También podría gustarte