Programación Web I

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.

...