Miércoles
09 de marzo del 2022
8:00 a.m. a 11:00 a.m.
“caniuse.com” sirve para ver qué
comandos de css están aptos para los navegadores a nivel global.
Como se puede observar, el comando “display:flex”
es apto en un 96.54% a nivel global.
Modelo de cajas.
El modelo de cajas condiciona el diseño
de todas las páginas web, es el comportamiento de CSS que hace que todos los elementos de las páginas se representen
mediante cajas rectangulares.
Al trabajar con un modelo de caja,
debemos tener en cuenta que existen dos propiedades principales para definirla,
height y width, que definirán el ancho y alto de nuestra caja. Adicionalmente a
estas, tenemos el Margin, Padding y Border que nos brindaran mayor control al
momento de organizar los elementos.
Cada área, a su vez, puede dividirse en
cuatro segmentos según su posición: izquierdo (left), derecho (right), superior
(top) e inferior (bottom).
Propiedades del Margen
"margin-top",
"margin-right", "margin-bottom", "margin-left" y
"margin"
Propiedades del Relleno
"padding-top",
"padding-right", "padding-bottom", "padding-left"
y "padding"
-
Propiedades del Borde
- En el área de Contenido y en la de Relleno se
verá aquello que se determine en la propiedad "background" del
elemento (un color o una imagen, según el orden de apilado).
- En el área de Borde se verá aquello que se
determine en las propiedades del Borde (ancho, color y estilo).
- Contenido (content): es el
contenido HTML del elemento (pueden ser las palabras de
un párrafo, una imagen, el texto de una lista de elementos, etcétera).
- Relleno (padding): espacio
libre opcional entre el contenido y el borde que lo encierra.
- 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): espacio libre
entre la caja y las posibles cajas adyacentes.
Ø También modificamos algunas características en cuarto.html y en
mis estilos.css. Estas son las características que yo le modifiqué, el código y
la página ejecutada:
-
En el selector de clase
“.contenedor” modifiqué la anchura del main a 130rem con un “width”. Con un
“margin” especifiqué que haya “.3rem” de margen arriba y abajo y 30rem de
margen a la izquierda y derecha. Los bordes del main los cambié a 3 rem arriba
y abajo y 2 rem a la izquierda y derecha con un “border”. En ese mismo selector
agregué la sombra del main con cssmatic.com
-
En el selector de clase
”.boton” modifique el tamaño del botón a 1.5rem 3rem con un “padding”. La
distancia entre “Casas Grandes Chihuahua” y el botón “Contactar” también la
modifiqué a 3rem con “margin-top”
-
En el selector de clase ”.
navegacion- principal a" modifiqué el grosor del menú a 1.5 rem con un
“padding”.
-
En el selector de clase
“.imagen” cambié la altura de la imagen a 600 píxeles con un “height”.
-
En el selector de clase ”.
servicio p" modifiqué la separación entre renglón y renglón en los
párrafos a 2.5 rem con un “line-height”.
-
En el selector de clase
“.servicio . iconos" modifiqué la altura de los recuadros amarillos a 16
píxeles con un “height”. La anchura de los mismos, también la modifiqué a 16
píxeles con un “width”.
-
Agregué el selector de clase
“. separacion-section" para hacer que con un “padding” haya 3 rem de
separación entre un section y otro.
-
En HTML modifiqué la
posición del icono “map-pin”. Simplemente comencé el párrafo después del código
del icono para que éste apareciera arriba del párrafo.
-
De igual manera centré los
iconos que van en los recuadros amarillos. Puse “<br> <br>
<br><center>”. Después puse el código del icono y posteriormente
puse “</center>”.
cuarto.html
mis estilos.css
Trabajo elaborado por: Armendariz Hernández Michelle Estefania
No hay comentarios.:
Publicar un comentario