UNIVERSIDAD MARIANO GALVEZ

DE GUATEMALA
SEDE MAZATENANGO

FACULTAD: INGENIERIA EN SISTEMAS DE INFORMACION Y

CIENCIAS DE LA COMPUTACION

TEMA: PROPIEDADES CSS

CURSO: DESARROLLO WEB

ESTUDIANTE: DAVIS NOE LIMA LOPEZ

CICLO: VIII

CARNE: 3090-19-10176
 Modelo de cajas
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.

¿Qué es el modelo de cajas?

La representación básica del modelo de cajas se basa en varios conceptos importantes,
como veremos a continuación:

 El borde (border), en negro, es el límite que separa el interior del exterior del
elemento.
 El márgen (margin), en naranja, es la parte exterior del elemento, por fuera del
borde.
 El relleno (padding), en verde, es la parte interior del elemento, entre el contenido
y el borde.
 El contenido, en azul, es la parte interior del elemento, excluyendo el relleno.

Como veremos, cada una de estas partes del modelo de cajas de CSS se puede alterar,
cambiando sus dimensiones, colores, etc. Así pues, cada elemento HTML tendrá su propio
borde, margen, relleno y contenido.
Dimensiones (ancho y alto)
Para dar tamaños específicos a los diferentes elementos de un documento HTML,
necesitaremos asignarles valores a las propiedades width (ancho) y height (alto):

Propiedad Valor Significado

Width Auto size Tamaño de ancho de un elemento

Height Auto size Tamaño de alto de un elemento

En el caso de indicar el valor auto a dichas propiedades, el navegador se encargará de

darle el tamaño apropiado, dependiendo de su contenido. Ten en cuenta que este valor es
el que tienen por defecto estas propiedades. De no indicar un valor concreto, width y
height tienen establecido el valor auto.

Es importante recalcar que el tamaño automático dado a un

elemento depende del tipo de elemento (bloque, en línea...).

Rango de dimensiones
Otra forma de lidiar con esto, es utilizar las propiedades hermanas de width: por un lado,
min-width y max-width y por otro, sus equivalentes de height: min-height y max-height.

Propiedad Valor Significado

max-width none | size Ancho máximo que puede ocupar un elemento.

min-width 0 | size Ancho mínimo que puede ocupar un elemento.

max-height none | size Alto máximo que puede ocupar un elemento.

min-height 0 | size Alto mínimo que puede ocupar un elemento.

Con estas propiedades, en lugar de establecer un tamaño fijo, establecemos unos rangos
máximos y mínimos, donde el ancho o alto podría variar entre esos valores:
 Ojo: Las propiedades de mínimos min-width y min-height por
defecto tienen valor 0, mientras que las propiedades de máximos
max-width y max-height, tienen por defecto valor none.

En este caso, por ejemplo, a pesar de estar indicando un tamaño de 800px, le aplicamos
un max-width de 500px, por lo que estamos limitando el elemento a un tamaño de ancho
de 500 píxeles como máximo y nunca superará ese tamaño.

Zonas de un elemento
Antes de continuar, es importante saber que en CSS existen ciertas palabras clave para
hacer referencia a una zona u orientación concreta sobre un elemento. Son conceptos
muy sencillos y prácticamente lógicos, por lo que no tendrás ningún problema en
comprenderlos. Son los siguientes:
  Top: Se refiere a la parte superior del elemento.
 Left: Se refiere a la parte izquierda del elemento.
 Right: Se refiere a la parte derecha del elemento.
 Bottom: Se refiere a la parte inferior del elemento.
 Center: En algunos casos se puede especificar el valor center para referirse a la
posición central entre los extremos horizontales o verticales.

La propiedad overflow
Volvamos a pensar en la situación de la imagen anterior: Damos un tamaño de ancho y
alto a un elemento HTML, pero su contenido de texto es tan grande que no cabe dentro
de ese elemento. ¿Qué ocurriría? Probablemente lo que vimos en la imagen: el contenido
se desbordaría.
Podemos modificar ese comportamiento con la propiedad de CSS overflow, o con alguna
de sus propiedades específicas overflow-x o overflow-y:

Propiedad Valor Significado

Establece el comportamiento de
overflow visible | hidden | scroll | auto
desbordamiento.
Establece el desbordamiento sólo para el
overflow-x visible | hidden | scroll | auto
eje X (horizontal).
Establece el desbordamiento sólo para el
overflow-y visible | hidden | scroll | auto
eje Y (vertical).

Dichas propiedades pueden tomar varios valores, donde visible es el valor que tiene por
defecto, que permite que haya desbordamiento. Otras opciones son las siguientes, donde
no se permite desbordamiento:

Valor ¿Qué ocurre si se desborda el contenido? ¿Desbordamiento?

Se muestra el contenido que sobresale
visible Sí
(comportamiento por defecto)
hidden Se oculta el contenido que sobresale. No
Se colocan barras de desplazamiento (horizontales y
scroll No
verticales).
Se colocan barras de desplazamiento (sólo las
auto No
necesarias).
Márgenes y rellenos
En el modelo de cajas, los márgenes (margin) son los espacios exteriores de un elemento.
Es decir, el espacio que hay entre el borde de un elemento y su exterior.

La propiedad margin (márgenes)

El tamaño de dichos márgenes se puede alterar en conjunto (de forma general) o de
forma específica a cada una de las zonas del elemento (izquierda, derecha, arriba o abajo).
Veamos primero las propiedades específicas para cada zona:

Propiedad Valor Significado

margin-top auto |size Establece un tamaño de margen superior.

margin-left auto |size Establece un tamaño de margen a la izquierda.

margin-right auto |size Establece un tamaño de margen a la derecha.

margin-bottom auto |size Establece un tamaño de margen inferior.

Podemos aplicar diferentes márgenes a cada zona de un elemento utilizando cada una de
estas propiedades, o dejando al nevegador que lo haga de forma automática indicando el

Hay que recordar diferenciar bien un margin de un padding, puesto que no son la mism
cosa. Los rellenos (padding) son los espacios que hay entre los bordes del elemento
cuestión y el contenido del elemento (por la parte interior). Mientras que los márgen
(margin) son los espacios que hay entre los bordes del elemento en cuestión y los bord
de otros elementos (parte exterior).

valor auto.
Existe un truco muy sencillo y práctico para centrar horizontalmente un elemento en
pantalla. Basta con aplicar un ancho fijo al contenedor: width: 500px (por ejemplo) y luego
aplicar un margin: auto. De esta forma, el navegador, al conocer el tamaño del elemento
(y por omisión, el resto del tamaño de la ventana) se encarga de repartirlo
equitativamente entre el margen izquierdo y el margen derecho, quedando centrado el
elemento.

La propiedad padding (rellenos)

Al igual que con los márgenes, los padding tienen varias propiedades para indicar el
relleno de cada zona:

Propiedad Valor Significado

Aplica un relleno interior en el espacio superior de un
padding-top 0 |size
elemento.
Aplica un relleno interior en el espacio izquierdo de un
padding-left 0 |size
elemento.
Aplica un relleno interior en el espacio derecho de un
padding-right 0 |size
elemento.
Aplica un relleno interior en el espacio inferior de un
padding-bottom 0 |size
elemento.

Bordes
En CSS es posible especificar el aspecto que tendrán los bordes de cualquier elemento
HTML, pudiendo incluso, dar diferentes características a zonas particulares del borde,
como, por ejemplo, el borde superior, el borde izquierdo, el borde derecho o el borde
inferior.

Propiedades de bordes
Las propiedades básicas y específicas de los bordes en CSS son las siguientes:

Propiedad Valor Significado

Especifica el color que se utilizará en el

border-color black
borde.
Especifica un tamaño predefinido para el
border-width thin | medium | thick
grosor del borde.
Define el estilo para el borde a utilizar (ver
border-style none
más adelante).
En primer lugar, border-color establece el color del borde, de la misma forma que lo
hicimos en apartados anteriores de colores. En segundo lugar, con border-width podemos
establecer la anchura o grosor del borde utilizando tanto palabras clave predefinidas
como un tamaño concreto con cualquier tipo de las unidades ya vistas.

La propiedad border-style
Por último, con la propiedad border-style podemos aplicar un estilo determinado al borde
de un elemento. En estilo de borde podemos elegir cualquiera de las siguientes opciones:

Valor Descripción

hidden Oculto. Idéntico a none, salvo para conflictos con tablas.

dotted Establece un borde basado en puntos.

dashed Establece un borde basado en rayas (línea discontínua).

solid Establece un borde sólido (línea contínua).

double Establece un borde doble (dos líneas contínuas).

groove Establece un borde biselado con luz desde arriba.

ridge Establece un borde biselado con luz desde abajo. Opuesto a groove.

inset Establece un borde con profundidad «hacia dentro».

outset Establece un borde con profundidad «hacia fuera». Opuesto a inset.

Background (Fondos CSS)
Las propiedades de fondo de CSS se utilizan para agregar efectos de fondo a los
elementos.

 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background (propiedad abreviada)

color de fondo CSS

La background - color propiedad especifica el color de fondo de un elemento.
Ejemplo
El color de fondo de una página se establece así:

Con CSS, un color suele especificarse mediante:

  un nombre de color válido, como "rojo"
 un valor HEX - como "#ff0000"
 un valor RGB - como "rgb(255,0,0)"

Otros elementos
Puede establecer el color de fondo para cualquier elemento HTML:
Ejemplo
Aquí, los elementos <h1>, <p> y <div> tendrán diferentes colores de fondo:

Opacidad / Transparencia
La opacity propiedad especifica la opacidad/transparencia de un elemento. Puede tomar
un valor de 0.0 - 1.0. Cuanto menor sea el valor, más transparente:
Nota: Al usar la opacity propiedad para agregar transparencia al fondo de un elemento,
todos sus elementos secundarios heredan la misma transparencia. Esto puede hacer que
el texto dentro de un elemento completamente transparente sea difícil de leer.

Ejemplo
Imagen de fondo CSS
La background-image propiedad especifica una imagen para usar como fondo de un elemento.

De forma predeterminada, la imagen se repite para que cubra todo el elemento.

Ejemplo

Establecer la imagen de fondo para una página:

Nota: cuando utilice una imagen de fondo, utilice una imagen que no interfiera con el
texto.
La imagen de fondo también se puede configurar para elementos específicos, como el
elemento <p>:
Ejemplo

Repetición de fondo CSS

Por defecto, la background-image propiedad repite una imagen tanto horizontal como
verticalmente.
Si la imagen de arriba se repite solo horizontalmente (background-repeat: repeat-x;), el
fondo se verá mejor:
Ejemplo

Sugerencia: para repetir una imagen verticalmente, configure background-repeat: repeat-

y;

Repetición de fondo CSS: sin repetición

La propiedad también especifica mostrar la imagen de fondo solo una vez background-
repeat:
Ejemplo
Mostrar la imagen de fondo solo una vez:

En el ejemplo anterior, la imagen de fondo se coloca en el mismo lugar que el texto.

Queremos cambiar la posición de la imagen, para que no perturbe demasiado el texto.

Posición de fondo CSS

La background-position propiedad se utiliza para especificar la posición de la imagen de
fondo.

Adjunto de fondo CSS

La background-attachment propiedad especifica si la imagen de fondo debe desplazarse o
ser fija (no se desplazará con el resto de la página):
Ejemplo
Especifique que la imagen de fondo debe ser fija:

Ejemplo
Especifique que la imagen de fondo debe desplazarse con el resto de la página:
Fuentes CSS
La selección de fuentes es importante
Elegir la fuente correcta tiene un gran impacto en cómo los lectores experimentan un sitio
web.
La fuente correcta puede crear una fuerte identidad para su marca.
Es importante usar una fuente que sea fácil de leer. La fuente agrega valor a su texto.
También es importante elegir el color y el tamaño de texto correctos para la fuente.

Familias de fuentes genéricas

En CSS hay cinco familias de fuentes genéricas:

 Las fuentes Serif tienen un pequeño trazo en los bordes de cada letra. Crean una
sensación de formalidad y elegancia.
 Las fuentes sans-serif tienen líneas limpias (sin pequeños trazos adjuntos). Crean
un aspecto moderno y minimalista.
 Fuentes monoespaciadas : aquí todas las letras tienen el mismo ancho fijo. Crean
un aspecto mecánico.
 Las fuentes cursivas imitan la escritura humana.
 Las fuentes de fantasía son fuentes decorativas/divertidas.
Todos los diferentes nombres de fuentes pertenecen a una de las familias de fuentes
genéricas.
Algunos ejemplos de fuentes

Generic Font Family Examples of Font Names

Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

La propiedad de la familia de fuentes CSS

En CSS, usamos la font-family propiedad para especificar la fuente de un texto.
Nota : si el nombre de la fuente es más de una palabra, debe estar entre comillas, como:
"Times New Roman".
Ejemplo
Especifique algunas fuentes diferentes para tres párrafos:
Caja flexible de CSS
Módulo de diseño CSS Flexbox
Antes del módulo Flexbox Layout, había cuatro modos de diseño:

 Bloque, para secciones en una página web

 En línea, para texto
 Tabla, para datos de tablas bidimensionales
 Posicionado, para la posición explícita de un elemento
El módulo de diseño de caja flexible facilita el diseño de una estructura de diseño
receptiva flexible sin usar flotación o posicionamiento.

Elementos de caja flexible

Para comenzar a usar el modelo Flexbox, primero debe definir un contenedor flexible.

El elemento de arriba representa un contenedor flexible (el área azul) con tres elementos
flexibles.
Ejemplo
Un contenedor flexible con tres elementos flexibles:
Las propiedades del contenedor flexible son:

 flex-direction
 flex-wrap
 flex-flow
 justify-content
 align-items
 align-content

La propiedad de dirección flexible

La flex-direction propiedad define en qué dirección el contenedor quiere apilar los
elementos flexibles.

Ejemplo
La columna valor apila los elementos flexibles verticalmente (de arriba a abajo):
Módulo de diseño de cuadrícula CSS

El módulo de diseño de cuadrícula de CSS ofrece un sistema de diseño basado en

cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin tener que
usar flotadores y posiciones.

Elementos de cuadrícula
Un diseño de cuadrícula consta de un elemento principal, con uno o más elementos
secundarios.
Mostrar propiedad
Un elemento HTML se convierte en un contenedor de cuadrícula cuando su
displaypropiedad se establece en grido inline-grid.
Todas las propiedades de cuadrícula CSS

Propiedad Descripción

column-gap Especifica el espacio entre las columnas.

gap Una propiedad abreviada para las propiedades

de espacio entre filas y espacio entre columnas
grid Una propiedad abreviada para las propiedades
grid-template-rows, grid-template-columns,
grid-template-areas, grid-auto-rows, grid-auto-
columns y grid-auto-flow
grid-area Especifica un nombre para el elemento de
cuadrícula, o esta propiedad es una propiedad
abreviada para las propiedades grid-row-start,
grid-column-start, grid-row-end y grid-column-
end
grid-auto-columns Especifica un tamaño de columna
predeterminado
grid-auto-flow Especifica cómo se insertan en la cuadrícula los
elementos colocados automáticamente
grid-auto-rows Especifica un tamaño de fila predeterminado

grid-column Una propiedad abreviada para las propiedades

 grid-column-start y grid-column-end
grid-column-end Especifica dónde terminar el elemento de la
cuadrícula.
grid-column-gap Especifica el tamaño del espacio entre
columnas.
grid-column-start Especifica dónde comenzar el elemento de la
cuadrícula.
grid-gap Una propiedad abreviada para las propiedades
grid-row-gap y grid-column-gap
grid-row Una propiedad abreviada para las propiedades
grid-row-start y grid-row-end
grid-row-end Especifica dónde terminar el elemento de la
cuadrícula.
grid-row-gap Especifica el tamaño del espacio entre filas

grid-row-start Especifica dónde comenzar el elemento de la

cuadrícula.
grid-template Una propiedad abreviada para las propiedades
grid-template-rows, grid-template-columns y
grid-areas
grid-template-areas Especifica cómo mostrar columnas y filas,
utilizando elementos de cuadrícula con
nombre
grid-template-columns Especifica el tamaño de las columnas y cuántas
columnas en un diseño de cuadrícula
grid-template-rows Especifica el tamaño de las filas en un diseño
de cuadrícula
row-gap Especifica el espacio entre las filas de la
cuadrícula.

Media Queries
Una vez nos adentramos en el mundo del Responsive Design, nos damos cuenta en que
hay situaciones en las que determinados aspectos o componentes visuales deben
aparecer en un tipo de dispositivos, o deben existir ciertas diferencias.
Por ejemplo, una zona donde se encuentra el buscador de la página puede estar colocada
en un sitio concreto en la versión de escritorio, pero en móvil quizás nos interesa que
ocupe otra zona (o que tenga otro tamaño o forma) para aprovechar mejor el poco
espacio que tenemos en la versión móvil de la página.
Para ello, utilizaremos un concepto denominado media queries, con los que podemos
hacer esas excepciones para que sólo se apliquen a un tipo de diseño concreto.
¿Qué son las media queries?
Las reglas media queries (también denominadas MQ a veces) son un tipo de reglas de CSS
que permiten crear un bloque de código que sólo se procesará en los dispositivos que
cumplan los criterios especificados como condición:
Con este método, especificamos que queremos aplicar los estilos CSS para tipos de medios
concretos (screen: sólo en pantallas, en este caso) que cumplan las condiciones
especificadas entre paréntesis. De esta forma, una estrategia aconsejable es crear reglas
CSS generales (como hemos hecho hasta ahora) aplicadas a todo el documento: colores,
tipo de fuente, etc. y luego, las particularidades que se aplicarían sólo en el dispositivo en
cuestión.
Aunque suele ser menos habitual, también se pueden indicar reglas @media negadas
mediante la palabra clave not, que aplicará CSS siempre y cuando no se cumpla una
determinada condición. Tambien pueden separarse por comas varias condiciones de
media queries.
Truco: Al igual que not, también existe una palabra clave only que, suele usarse a modo de
hack. El comportamiento por defecto ya incluye los dispositivos que encajan con la
condición, pero con la palabra clave only conseguimos que navegadores antiguos que no
la entienden, no procesen la información, dejándola sólo para navegadores modernos.

TIPO DE MEDIO SIGNIFICADO

screen Monitores o pantallas de ordenador. Es el
más común.
print Documentos de medios impresos o
pantallas de previsualización de impresión.
speech Lectores de texto para invidentes (Antes
aural, el cuál ya está obsoleto).
all Todos los dispositivos o medios. El que se
utiliza por defecto.

Tipos de características
En los ejemplos anteriores solo hemos utilizado max-width y min-width como tipos de
características a utilizar en condiciones de media query. Sin embargo, tenemos una lista
de tipos de características que podemos utilizar:
Animaciones CSS
Una vez conocemos las transiciones CSS, es muy fácil adaptarnos al concepto de
animaciones CSS, el cual amplia lo que ya sabemos de transiciones, convirtiéndolo en algo
mucho más flexible y potente, en el que no es necesario que el usuario interactue de
alguna forma (cómo pasa en las transiciones).
Las transiciones son una manera de suavizar un cambio de un estado inicial a un estado
final. La idea de las animaciones CSS parte del mismo concepto, permitiendo añadir más
estados. Así pues, con las animaciones podemos partir desde un estado inicial, a un estado
posterior, a otro estado posterior, y así sucesivamente.
Para crear animaciones CSS es necesario realizar 2 pasos:

 Utilizar la propiedad animation (o derivadas) para indicar que elemento HTML

vamos a animar.
 Definir mediante la regla @keyframes la animación en cuestión y su
comportamiento.
Centrémonos en la primera, y más adelante veremos como crear fotogramas con
@keyframes.
Propiedades de animación CSS
Para definir dicho comportamiento necesitamos conocer las siguientes propiedades, que
son una «ampliación» de las propiedades correspondiente a las transiciones CSS:

Propiedades Descripción Valor

animation-name Nombre de la animación a none | nombre
aplicar.

animation- Duración de la animación. 0 | time

duration
animation- Ritmo de la animación. https://lenguajecss.com/css/animaciones/timing-
timing-function function/
animation-delay Retardo en iniciar la 0 | time
animación.

animation- Número de veces que se 1 | infinite | number

iteration-count repetirá.
animation- Dirección de la animación. normal | reverse | alternate | alternate-reverse
direction
animation-fill- Como se quedará la none | forwards | backwards | both
mode animación al terminar.
animation-play- Estado de la animación. running | paused
state