Clase 04

eddiesanchez0710@gmail.
com
www.ceneinnova.com/eddyesanchez 1
Escuela Académica Profesional de
Ingeniería de Sistemas
 INTRODUCCIÓN A CSS
 EL MODELO DE CAJA
 POSICIONAMIENTO DE ELEMENTOS
 CRITERIOS DE CALIDAD.
 Aplicar hoja de Estilos al

Formulario de manera que
mejoren el aspecto o
presentación de su formulario.
1970 aparecieron las hojas de estilos poco después

que el lenguaje de etiquetas SGML.
El gran impulso de los lenguajes de hojas de estilos
se produjo con el boom de Internet y el crecimiento
exponencial del lenguaje HTML
En 1995, el W3C decidió apostar por el desarrollo y
estandarización de CSS(Cascading Style Sheets) y lo
añadió a su grupo de trabajo de HTML.
1996, el W3C publicó la primera recomendación
oficial, conocida como "CSS nivel 1".
1998, el grupo de trabajo de CSS publica su segunda
recomendación oficial, conocida como "CSS nivel 2".
 CSS significa Cascading Style Sheets

 CSS describe cómo los elementos HTML se van
a mostrar en la pantalla, papel, o en otros
medios
 CSS ahorra mucho trabajo.
 Se puede controlar el diseño de varias páginas
web a la vez
 Estilo externas se almacenan en archivos CSS
¿POR QUÉ USAR CSS?

CSS se utiliza para definir estilos para sus páginas web, incluyendo el diseño, la
disposición y las variaciones en la imagen para los diferentes dispositivos y tamaños
de pantalla.
CSS resuelto un problema grande
HTML nunca tuvo intención de contener etiquetas para dar formato a una página web.
HTML fue creado para describir el contenido de una página web, como:
<H1> Este es un encabezado </ h1>
<P> Este es un párrafo. </ P>
CSS ahorra mucho trabajo!
Las definiciones de estilo normalmente se guardan en archivos .css externos.
Con una hoja de estilos externa, puede cambiar el aspecto de un sitio web completo
cambiando un archivo!
Un conjunto de reglas CSS consta de un selector y un bloque

de declaración.
 Los puntos selector para el elemento HTML que desea estilo.

 El bloque de declaración contiene una o más declaraciones separadas por punto
y coma.
 Cada declaración incluye un nombre de propiedad CSS y un valor, separados
por dos puntos.
 Una declaración CSS siempre termina con un punto y coma, y los bloques de
declaraciones están rodeados por llaves.
 En el siguiente ejemplo todos los elementos <p> estarán alineados-centro, con

un color rojo texto:
Ejemplo
p {
color: red;
text-align: center;
}
Los selectores CSS se utilizan para "encontrar" (o

seleccionar) elementos HTML en función de su
nombre de elemento, de la identificación, clase,
atributo, y mucho mas.
Existe cuatro selectores:
1. El selector de elemento
2. El selector de ID
3. El selector de clase
4. La agrupación de selectores
<!DOCTYPE html>
<html>
 El selector de elementos <head>
selecciona elementos <style>
p{
basados en el nombre del text-align: center;
elemento. color: red;
}
 Puede seleccionar todos </style>
los elementos <p> en una </head>
página como esta (en este <body>
caso, todos los elementos <p>Cada párrafo se verá afectado por el estilo.</p>
<p> estarán alineados- <p id="para1">Yo también</p>
<p>Y tú</p>
centro, con un color rojo
texto): </body>
</html>
 utiliza el atributo id de un elemento <!DOCTYPE html>

<html>
HTML para seleccionar un elemento <head>
específico. <style>
 La identificación de un elemento #para1 {
debe ser único dentro de una text-align: center;
color: red;
página. }
 Para seleccionar un elemento con </style>
un ID, escribe un carácter </head>
almohadilla (#), seguido por el id del <body>
<p id="para1">Hola Mundo</p>
elemento. <p>Este parrafo no se ve afectado por el estilo.</p>
 La regla de estilo a continuación se </body>
aplica al elemento HTML con id = </html>
"párrafo1":
<!DOCTYPE html>
 selecciona los elementos con
<html>
un atributo de clase <head>
específica. <style>
 Para seleccionar elementos .center {
text-align: center;
con una clase específica, color: red;
escriba un punto (.), seguido }
del nombre de la clase. </style>
 En el siguiente ejemplo, </head>
<body>
todos los elementos HTML <h1 class="center">Titulo Rojo y alineado al centro</h1>
con class = "centro" será de <p class="center">El parrafo rojo y alineado al centro.</p>
color rojo y alineado al </body> </html>
centro:
<!DOCTYPE html>
 También puede <html>
especificar que los <head>
elementos HTML <style>
específicos p.center {
solamente deben text-align: center;
color: red;
verse afectadas por }
una clase. </style>
 En el siguiente </head>
ejemplo, solamente <body>
<p> elementos con <h1 class="center">Esta rubrica no se vera afectada</h1>
<p class="center">El presente apartado sera de color rojo y alineado al centro.</p>
class = "centro" </body>
estarán alineados- </html>
centro:
 Si tiene elementos con las  Será mejor al grupo de los

mismas definiciones de estilo, selectores, para reducir al
como este: mínimo el código.
<!DOCTYPE html>
<html> <head>
 Para selectores de grupo,
<style> separar cada selector con una
h1 { coma.
text-align: center; h1, h2, p {
color: red; text-align: center; h1, h2, p {
} color: red; text-align: center;
} color: red;
h2 {
text-align: center; </style> </head> }
color: red; <body>
} <h1>Hola Mundo</h1>
<h2>Pequeño Titulo</h2>
p{
<p>Este es un parrafo.</p>
text-align: center;
color: red; </body>
} </html>
Hay tres maneras de insertar una hoja de estilo:
1. hoja de estilos externa

2. hoja de estilo interna
3. estilo en línea
Con una hoja de estilos externa, puede cambiar el aspecto de un sitio

web completo cambiando un archivo!
Cada página debe incluir una referencia al archivo de hoja de estilos
externa dentro del elemento <link>.
El elemento <link> va dentro de la sección <head>:
<head>
<link rel="stylesheet" type="text/css" href="miestilo.css">
</head>
Una hoja de estilo externa puede

<!DOCTYPE html>
estar escrito en cualquier editor de
<html>
texto. El archivo no debe contener
ninguna etiqueta HTML. El archivo de <head>
hoja de estilo debe ser guardado con <link rel="stylesheet" type="text/css"
una extensión .css. href="miestilo.css">
Así es como el "miestilo.css" se ve: </head>
<body>
Body
{
background-color: lightblue; <h1>This is a heading</h1>
} <p>This is a paragraph.</p>
h1 {
color: navy; </body>
margin-left: 20px; </html>
}
 Una hoja de estilo interna <head>

<style>
puede ser usado si una body {
sola página tiene un estilo background-color: linen;
único. }
 estilos internos se definen h1 {
dentro del elemento color: maroon;
<style>, dentro de la margin-left: 40px;
}
sección <head> de una </style>
página HTML: </head>
<!DOCTYPE html> <body>

<html>
<head> <h1>This is a heading</h1>
<style> <p>This is a paragraph.</p>
body {
background-color: linen; </body>
} </html>
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
 Un estilo en línea se puede utilizar para <!DOCTYPE html>

aplicar un estilo único para un solo <html>
elemento. <body>
<h1 style="color:blue;margin-
 Para utilizar los estilos en línea, añadir left:30px;">Se trata de un Titulo.</h1>
el atributo de estilo al elemento <p>Este es un parrafo.</p>
relevante. El atributo de estilo puede </body>
</html>
contener cualquier propiedad CSS.
<h1 style="color:blue;margin-left:30px;">Se trata de un Titulo.</h1>
Un estilo en línea pierde muchas de las ventajas de una hoja de estilo (mediante la
mezcla de contenido con la presentación). Utilizar este método con moderación!
Los colores en CSS son más a menudo especificados por:

1. un nombre válido de color - como "rojo"
2. un valor RGB - como "rgb (255, 0, 0)"
3. un valor HEX - como "# FF0000"
<!DOCTYPE html> Escuela Académica Profesional de
<html>
<body>
<h2>Ejemplo: Nombres de Colores</h2>
<p>Nota: Usted vera sbre fondo de colores y propiedades de colores.</p>
<h2 style="background-color:red">Color de Fondo Rojo</h2>
<h2 style="background-color:green"> Color de Fondo Verde </h2>
<h2 style="background-color:blue;color:white">Color de fondo Azul, Blanco color de
texto</h2>
<h2 style="background-color:orange"> Color de Fondo Naranja</h2>
<h2 style="background-color:yellow"> Color de Fondo Amarillo </h2>
<h2 style="background-color:cyan"> Color de Fondo Cian</h2>
<h2 style="background-color:black;color:white">Color de Fondo Negro, Blanco color de texto</h2>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>RGB Color Examples</h2>
<h2 style="background-color:rgb(255, 0, 0)">Color de fondo con rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 255, 0)"> Color de fondo con rgb(0, 255, 0)</h2>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>HEX Color Examples</h2>
<h2 style="background-color:#FF0000"> Color de fondo con #FF0000</h2>
<h2 style="background-color:#00FF00"> Color de fondo con #00FF00</h2>
<h2 style="background-color:#0000FF"> Color de fondo con #0000FF</h2>
<h2 style="background-color:#FFA500"> Color de fondo con #FFA500</h2>
<h2 style="background-color:#FFFF00"> Color de fondo con #FFFF00</h2>
<h2 style="background-color:#00FFFF"> Color de fondo con #00FFFF</h2>
</body>
</html>
El modelo de cajas o "box model" es seguramente la característica más

importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de
todas las páginas web.
El modelo de cajas es el comportamiento de CSS que hace que todos los
elementos de las páginas se representen mediante cajas rectangulares.
Las cajas de una página se crean automáticamente. Cada vez que se inserta
una etiqueta HTML, se crea una nueva caja rectangular que encierra los
contenidos de ese elemento.
Las partes que componen cada caja y su orden

de visualización desde el punto de vista del
usuario son las siguientes:
Contenido (content): se trata del contenido HTML del
elemento (las palabras de un párrafo, una imagen, el
texto de una lista de elementos, etc.)
Relleno (padding): espacio libre opcional existente
entre el contenido y el borde.
Borde (border): línea que encierra completamente el
contenido y su relleno.
Imagen de fondo (background image): imagen que se
muestra por detrás del contenido y el espacio de relleno.
Color de fondo (background color): color que se
muestra por detrás del contenido y el espacio de relleno.
Margen (margin): separación opcional existente entre la
caja y el resto de cajas adyacentes.
Se permiten los siguientes valores:

 punteada - Define un borde de puntos
 discontinua - Define un borde punteado
 sólido - Define un borde continuo
 doble - Define un borde doble
 ranura - Define un borde acanalado 3D. El efecto depende del valor de border-color
 cresta - Define un borde estriado 3D. El efecto depende del valor de border-color
 inserción - Define una frontera inserción 3D. El efecto depende del valor de border-
color
 inicio - Define un borde principio 3D. El efecto depende del valor de border-color
 Ninguno - Define ninguna frontera
 oculto - Define una frontera oculto
 El border-style propiedad puede tener de uno a cuatro valores (por el borde
superior, borde derecho, borde inferior y el borde izquierdo).
<!DOCTYPE html>
<html> <body>
<head> <h2>Estilo de bordes - Propiedades</h2>
<style> <p>Que tipo de Borde desea Visualizar:</p>
p.dotted {border-style: dotted;} <p class="dotted">Un borde de puntos.</p>
p.dashed {border-style: dashed;} <p class="dashed">Un borde punteado.</p>
p.solid {border-style: solid;} <p class="solid">Un borde solido.</p>
p.double {border-style: double;} <p class="double">Un borde doble.</p>
p.groove {border-style: groove;} <p class="groove">Un borde Ranurado.</p>
p.ridge {border-style: ridge;} <p class="ridge">Un borde Cresta.</p>
p.inset {border-style: inset;} <p class="inset">Un borde recuadro.</p>
p.outset {border-style: outset;} <p class="outset">Un borde inicial.</p>
p.none {border-style: none;} <p class="none">Sin Borde.</p>
p.hidden {border-style: hidden;} <p class="hidden">Un borde oculto.</p>
p.mix {border-style: dotted dashed solid double;} <p class="mix">Un borde mixto.</p>
</style> </body>
</head> </html>
30
 El border-width propiedad especifica p.one {

border-style: solid;
el ancho de los cuatro bordes.
border-width: 5px;
 El ancho se puede establecer como }
un tamaño específico (en px, pt, p.two {
cm, em, etc) o mediante el uso de border-style: solid;
uno de los tres valores predefinidos: border-width: medium;
fino, medio o grueso. }
 El border-width propiedad puede p.three {
tener de uno a cuatro valores (por el border-style: solid;
border-width: 2px 10px 4px
borde superior, borde derecho,
20px;
borde inferior y el borde izquierdo). }
<!DOCTYPE html> <body>
<html> <h2>The border-width Property</h2>
<head> <p>This property specifies the width of the four borders:</p>
<style> <p class="one">INGENIERIA WEB.</p>
p.one { <p class="two">UNIVERSIDAD CESAR VALLEJO.</p>
border-style: solid; <p class="three">ALUMNOS DEL 6to CICLO.</p>
border-width: 5px; } <p class="four">EJEMPLO CON CSS.</p>
p.two { <p class="five">TRABAJOS POR DESARROLLAR.</p>
border-style: solid; border-width: medium; } <p class="six">BORDES CON CSS.</p>
p.three { <p class="seven">AHORA COMPRENDO CSS.</p>
border-style: dotted; border-width: 2px; }
p.four { <p><b>
border-style: dotted; border-width: thick; } Nota:</b> La propiedad "border-width" no funciona si se
p.five { utiliza solo.
border-style: double; border-width: 15px; } Siempre especifique la propiedad "border-style" para
p.six { establecer primero las fronteras.
border-style: double; border-width: thick; } </p>
p.seven { </body>
border-style: solid; border-width: 2px 10px 4px 20px; } </html>
</style>
</head>
32
33
De los ejemplos anteriores que han visto que es posible especificar

un borde diferente para cada lado.
En CSS, también hay propiedades para especificar cada uno de los
bordes (superior, derecho, inferior e izquierda):
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
<!DOCTYPE html>
<html> Usando este estilo, también
<head> obtenemos lo mismo
<style> <style>
p{ p{
border-top-style: dotted; border-style: dotted solid;
border-right-style: solid; }
border-bottom-style: dotted; </style>
border-left-style: solid;
}
</style>
</head>
<body>
<p>02 estilos diferentes de bordes.</p>
</body>
</html>
Property Description
border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border

border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-right Sets all the right border properties in one declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration

border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders

Con CSS, tiene un control total sobre los márgenes. Hay

propiedades CSS para establecer el margen de cada lado de un
elemento (arriba, derecha, abajo, e izquierda).
CSS tiene propiedades para especificar el margen de cada lado de
un elemento:
 margin-top
 margin-right p{
margin-top: 100px;
 margin-bottom
margin-bottom: 100px;
 margin-left margin-right: 150px;
margin-left: 80px;
}
Si el margen de propiedad tiene cuatro Si el margen de propiedad tiene dos

valores: valores:
•margen: 25px 50px 75px 100px; •margen: 25px 50px;
•margen superior es 25px •márgenes superior e inferior son 25px
•margen derecho es 50px •márgenes derecho e izquierdo son 50px
•margen inferior es 75px
•margen izquierdo es de 100px Si el margen de propiedad tiene un
valor:
Si el margen de propiedad tiene tres
•margen: 25px;
valores:
•los cuatro márgenes son 25px
•margen: 25px 50px 75px;
•margen superior es 25px
•márgenes derecho e izquierdo son 50px
•margen inferior es 75px
<html> Ingeniería de Sistemas
<head> <style>
p{
background-color: yellow;
}
p.ex {
border:1px solid red;
margin: 100px 150px 100px 80px;
}
</style> </head>
<body>
<h2>UTILIZANDO LAS PROPIEDADES DE
MARGENES</h2>
<p>Este es un párrafo sin especificación de
márgenes.</p>
<p class="ex">Este parrafo tiene un margen
inferior y superior de 100px, un margen izquierdo
de 80px, y un margen derecho de 150px.</p>
</body>
</html> 41
Tener una navegación fácil de usar es importante para cualquier sitio web.
Con CSS se puede transformar menús HTML aburridas en barras de buen aspecto de
navegación.
Barra de navegación = Lista de Enlaces

Una barra de navegación necesita HTML estándar como base.
Una barra de navegación es básicamente una lista de enlaces, con la etiqueta <ul> y <li>
elementos hace perfecto las listas:
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
<html> Ingeniería de Sistemas
<body>
<ul>
<li><a href="#home">INICIO</a></li>
<li><a href="#news">NOTICIAS</a></li>
<li><a href="#contact">CONTACTANOS</a></li>
<li><a href="#about">ACERCA DE</a></li>
</ul>
<p>Nota: Utlizamos href="#" fpara los enlaces e

texto. En un sitio Web real esto seria URLs.</p>
</body>
</html>
44
ul {
Crear una barra de list-style-type: none; margin: 0;
navegación vertical padding: 0; width: 200px;
básico con un color de background-color: #f1f1f1; }
li a {
fondo gris y cambiar el display: block; color: #000;
color de fondo de los padding: 8px 0 8px 16px;
enlaces cuando el text-decoration: none; }
usuario mueve el /* Change the link color on hover */
ratón sobre ellos: li a:hover {
background-color: #555; color: white; }
<!DOCTYPE html> <body> Ingeniería de Sistemas
<html> <head> <style> <ul>
ul { list-style-type: none; margin: 0; <li><a class=“active” href="#home">INICIO</a></li>
padding: 0; overflow: hidden; <li><a href="#news">NOTICIAS</a></li>
background-color: #0066FF; } <li><a href="#contact">CONTACTO</a></li>
li { float: left; } <li><a href="#about">ACERCA DE</a></li>
li a { display: block; color: #000000; </ul>
text-align: center padding: 14px 16px; </body> </html>
font-size: 20px; text-decoration: none; }
li a:hover { background-color: #FFFF33; color: red; }
</style> </head>
46
Crear un menú ul {
desplegable que list-style-type: none; margin: 0;
permite al usuario padding: 0; width: 200px;
background-color: #f1f1f1; }
elegir una opción li a {
de una lista: display: block; color: #000;
padding: 8px 0 8px 16px;
text-decoration: none; }
/* Change the link color on hover */
li a:hover {
background-color: #555; color: white; }
<!DOCTYPE html> <div class="dropdown">
<html> <head> <style> <buttonIngeniería
class="dropbtn">Desplegable</button>
de Sistemas
.dropbtn { background-color: #4CAF50; <div class="dropdown-content">
color: white; padding: 16px; font-size: 16px; <a href="#">Matricula</a>
border: none; cursor: pointer; } <a href="#">Notas</a>
.dropdown { position: relative; display: inline-block; } <a href="#">Reporte</a>
.dropdown-content { display: none; position: absolute; </div>
background-color: #f9f9f9; min-width: 160px; </div>
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } <p><strong>Nota:</strong> Utilizamos href="#" para los
.dropdown-content a { color: black; padding: 12px 16px; enlaces de texto. En un sitio web real esto sería URL.</p>
text-decoration: none; display: block; } </body> </html>
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content { display: block; }
.dropdown:hover .dropbtn {background-color: #3e8e41;
}
</style> </head>
<body>
<h2>MENU DESPLEGABLE</h2>
<p>MOVER EL PUNTERO DEL RATON, SOBRE EL BOTON
PARA ABRIR EL MENU DESPLEGABLE.</p>
48
CSS se puede utilizar para crear una galería de imágenes.

<!DOCTYPE html> <div class="img">
<html> <head> <style> <a target="_blank" href="INICIO03.jpg">
div.img { margin: 5px; border: 1px solid #ccc; <img src="INICIO03.jpg" alt="Northern Lights“
float: left; width: 180px; } width="600" height="400"> </a>
div.img:hover { border: 1px solid #777; } <div class="desc">Add a description of the image
div.img img { width: 100%; height: auto; } here</div> </div>
div.desc { padding: 15px; text-align: center; }
</style> </head> <body> <div class="img">
<a target="_blank" href="INICIO04.jpg">
<div class="img"> <img src="INICIO04.jpg" alt="Mountains" width="600“
<a target="_blank" href="INICIO01.jpg"> height="400"> </a>
<img src="INICIO01.jpg" alt="Trolltunga Norway“ <div class="desc">Add a description of the image
width="300" height="200"> </a> here</div> </div>
<div class="desc">Add a description of the image
here</div> </div> </body>
</html>
<div class="img">
<a target="_blank" href="INICIO02.jpg">
<img src="INICIO02.jpg" alt="Forest" width="600“
height="400"> </a>
<div class="desc">Add a description of the image
50
here</div> </div>
51

Clase 04

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Clase 04

Uploaded by

Copyright:

Available Formats

eddiesanchez0710@gmail.

 Aplicar hoja de Estilos al

1970 aparecieron las hojas de estilos poco después

 CSS significa Cascading Style Sheets

¿POR QUÉ USAR CSS?

Un conjunto de reglas CSS consta de un selector y un bloque

 Los puntos selector para el elemento HTML que desea estilo.

 En el siguiente ejemplo todos los elementos <p> estarán alineados-centro, con

Los selectores CSS se utilizan para "encontrar" (o

 utiliza el atributo id de un elemento <!DOCTYPE html>

 Si tiene elementos con las  Será mejor al grupo de los

Hay tres maneras de insertar una hoja de estilo:

1. hoja de estilos externa

Con una hoja de estilos externa, puede cambiar el aspecto de un sitio

Una hoja de estilo externa puede

 Una hoja de estilo interna <head>

<!DOCTYPE html> <body>

 Un estilo en línea se puede utilizar para <!DOCTYPE html>

<h1 style="color:blue;margin-left:30px;">Se trata de un Titulo.</h1>

Los colores en CSS son más a menudo especificados por:

El modelo de cajas o "box model" es seguramente la característica más

Las partes que componen cada caja y su orden

Se permiten los siguientes valores:

 El border-width propiedad especifica p.one {

De los ejemplos anteriores que han visto que es posible especificar

<p>02 estilos diferentes de bordes.</p>

border Sets all the border properties in one declaration

border-bottom Sets all the bottom border properties in one declaration

border-bottom-color Sets the color of the bottom border

border-bottom-style Sets the style of the bottom border

border-bottom-width Sets the width of the bottom border

border-color Sets the color of the four borders

border-left Sets all the left border properties in one declaration

border-left-color Sets the color of the left border

border-left-style Sets the style of the left border

border-left-width Sets the width of the left border

border-right Sets all the right border properties in one declaration

border-right-color Sets the color of the right border

border-right-style Sets the style of the right border

border-right-width Sets the width of the right border

border-style Sets the style of the four borders

border-top Sets all the top border properties in one declaration

border-top-color Sets the color of the top border

border-top-style Sets the style of the top border

border-top-width Sets the width of the top border

border-width Sets the width of the four borders

Con CSS, tiene un control total sobre los márgenes. Hay

Si el margen de propiedad tiene cuatro Si el margen de propiedad tiene dos

Barra de navegación = Lista de Enlaces

<p>Nota: Utlizamos href="#" fpara los enlaces e

CSS se puede utilizar para crear una galería de imágenes.

You might also like