Programación Web I
Enviado por Juan Carlos Marquez Zapata • 7 de Julio de 2021 • Tareas • 301 Palabras (2 Páginas) • 179 Visitas
Hojas de estilo en cascada (CSS) II.
Máximo Sánchez Márquez
Programación Web I
Instituto IACC
19 de abril de 2021
Los primero que se realiza es manipular el archivo tarea5.html, Cambiándole la propiedad charset de la etiqueta mata a UTF 8 de manera que se reconozcan los caracteres latinos.
Luego de agrega la siguiente línea para asociar el archivo tarea5.html al archivo main.css
<link rel="stylesheet" href="css/main.css">
Se borra la etiqueta Style.
Luego se hace la configuración para llegar al estadio final a través de la utilización de cajas con la etiqueta <div>
El diseño se realiza con 2 cajas <div> como se ve en la figura 1, con sus respectivas propiedades en el archivo main.css
[pic 1]
Figura 1. Diseño final a través de utilización de <div>
Caja 1
[pic 2]
HTML
<div class="div">
<h3> « Capítulo 1 </h3>
</div>
CSS
.div {
background: rgba(255,255,255,.7);
color:#000;
width: 50%;
height: 7%;
text-align: left;
float:left;
display: flex;
align-items: center;
}
Caja 2
[pic 3]
HTML
<div class="div2">
<h3>Capítulo 3 » </h3>
</div>
CSS
.div2 {
background: rgba(255,255,255,.7);
color:#000;
width: 50%;
height: 7%;
text-align: right;
float:left;
display: flex;
justify-content: center;
flex-direction: column;
}
Además, se logra el color azul de la etiqueta <h2> de Capitulo dos se realiza en el archivo main.css con.
h2{
color: #00f;
}
El color verde de la etiqueta <p> se logra en el archivo main.css con:
p {
color: #0f0;
}
La fuente y el tamaño se la fuente están en la etiqueta body, donde además se especifica el color del backgroung del body y sus márgenes.
body {
font-family:arial;
font-size: medium;
background: black;
margin: 0.2% .3% .0% .3%;
}
Lograndonde el siguiente resultado
[pic 4]
Bibliografía
IACC (2021). Autoría de Hojas de estilo en cascada (CSS) II. Programación Web I. Semana 3.
...