Maquetado

1. MODELO DE CAJA Y CONTENEDORES

2. MODELO DE CAJA Y CONTENEDORES
El CSS (Cascading Style Sheets) podría definirse como un tipo de lenguaje que
permite definir y crear la presentación visual de un documento ya
estructurado y escrito en un lenguaje de marcado como puede ser HTML. Es
decir, permite generar el diseño visual de páginas web e interfaces de
usuario. Todo en CSS tiene una caja alrededor, y comprender estas cajas es
clave para poder crear diseños con CSS o para alinear elementos con otros
elementos.
 Cascading: Los estilos aplicados a los elementos de una página web se
propagan de manera descendente a los elementos contenidos en ellos.
 Style: Mediante las indicaciones CSS lo que hacemos es aplicar estilos
visuales a los diferentes elementos de las páginas web.
 Sheets: Cuando se generan los estilos de una página web se añaden en
ficheros aparte u hojas con la extensión “.

3. Relación entre HTML y CSS
Lo principal que hay que saber es que estos dos
lenguajes son la base de cualquier página web. HTML
es un lenguaje de marcado de hipertexto que se
escribe con elementos, estos pueden ser etiquetas,
contenido o atributos. HTML da instrucciones al
navegador sobre cómo estructurar el contenido. Por
otro lado, CSS da instrucciones sobre los detalles de
diseño de dicho contenido en todo el sitio web.
El HTML y el CSS son herramientas complementarias e
indispensables para el diseño web adaptable. Por
ejemplo, el CSS aporta instrucciones de diferentes
diseños y estéticas dependiendo del dispositivo desde
el que se acceda al sitio web. Por lo tanto, un sitio web
ocultará o enseñará ciertos contenidos dependiendo de
si se entra con un móvil o con un ordenador de
sobremesa.

4. Estructura de CSS
Para entender la sintaxis y estructura básica de CSS, primero debemos saber que cada estilo se
compone de una propiedad y un valor. Por ejemplo, si deseamos cambiar el color del texto a
azul, podemos utilizar la propiedad "color" y el valor "blue". Las reglas de estilo se agrupan dentro
de un selector, que apunta a los elementos HTML que deseamos estilizar.

5. Estructura nueva en HTML5
Representa un diseño común encontrado en la mayoría de los sitios webs hoy en día
HTML4 HTML5

7. Selectores y Especificidad
Los selectores en CSS permiten apuntar a elementos específicos en una página web para aplicar estilos.
Puedes utilizar selectores de etiqueta, clase, ID, combinadores y pseudo-clases para controlar dónde se
aplican los estilos. Además, necesitamos entender el concepto de especificidad, ya que determina qué estilo
se aplica cuando hay reglas conflictivas en el código. Por ejemplo, una regla con un selector de ID tiene una
especificidad más alta que una regla con un selector de clase

8. El Box Model
El modelo de caja (box model) en CSS describe cómo
se calculan las dimensiones y los espacios alrededor
de un elemento HTML.
Contenido (Content): Esta es la parte más interna de
la caja y guarda el contenido real, como texto o
imágenes.
Relleno (Padding): El relleno es el espacio entre el
contenido y el borde del elemento. Proporciona
espaciado interno dentro de la caja.
Borde (Border): El borde es una línea que rodea el
contenido y el relleno. Puede tener un ancho, estilo y
color que se pueden personalizar.
Margen (Margin): El margen es el espacio fuera del
borde, creando un espaciado entre el elemento y
otros elementos en la página. En diseño, el margen
permite “darle aire” a la disposición del sitio web.

9. Degradados de Fondo
Un degradado, cuando se usa para un fondo,
actúa como una imagen y también se establece
usando la propiedad background-image
.a {
background-image: linear-gradient(105deg, rgb(0 249 255 / 100%) 39%, rgb(51 56 57 / 100%) 96%);
}
.b {
background-image: radial-gradient(circle, rgb(0 249 255 / 100%) 39%, rgb(51 56 57 / 100%) 96%);
background-size: 100px 50px;
}
<div class="wrapper">
<div class="box a"></div>
<div class="box b"></div>
</div>

10. Degradados de Fondo
En el ejemplo siguiente hemos incluido dos imágenes. Para demostrar el orden de superposición, cambia la
imagen de fondo que aparece primero en la lista. O juega con las otras propiedades para cambiar la posición, el
tamaño o repite los valores.
.box {
background-image: url(star.png), url(big-star.png);
}
<div class="wrapper">
<div class="box"></div>
</div>

12. PARCIAL DE DISEÑO WEB
Enviar la carpeta comprimida que deberá contener el archivo con
extensión.html, el archivo de los estilos con extensión css y la carpeta
que contenga las imágenes o videos al correo
wilherquintero@americana.edu.co a maás tardar el día viernes 19 de
abril.

13. Bienvenidos a nuestro Sitio Web
Menú
Contenido Publicidad
Pie de página