Los colores se especifican usando nombres En HTML, un color se puede

de colores predefinidos o valores RGB, especificar mediante el uso de un

HEX, HSL, RGBA, HSLA. nombre de color:
Puede establecer el color de fondo
para los elementos HTML:
Puede establecer el color de fondo
para los elementos HTML:
También puedes establecer el color
del texto:
También puedes establecer el color
del texto:
También puedes establecer los
colores de los bordes:
Las propiedades de fondo de CSS se usan para definir
los efectos de fondo para los elementos.

Propiedades de fondo de CSS:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
La propiedad de color de fondo especifica el color
de fondo de un elemento.

El color de fondo de una página se establece así:

La propiedad de color de fondo especifica el color
de fondo de un elemento.

El color de fondo de una página se establece así:

Con CSS, un color generalmente se
especifica por:

un nombre de color válido, como “red"

un valor HEX - como "# ff0000"
un valor RGB, como "rgb (255,0,0)"
Con CSS, un color generalmente se
especifica por:

un nombre de color válido, como “red"

un valor HEX - como "# ff0000"
un valor RGB, como "rgb (255,0,0)"
 La propiedad background-
image especifica una imagen
para usar como fondo de un
elemento.

Por defecto, la imagen se

repite para que cubra todo el
elemento.

La imagen de fondo de una

página se puede corar así:
 La propiedad background-
image especifica una imagen
para usar como fondo de un
elemento.

Por defecto, la imagen se

repite para que cubra todo el
elemento.

La imagen de fondo de una

página se puede corar así:
De manera predeterminada, la
propiedad background-image repite
una imagen tanto horizontal como
verticalmente.

Algunas imágenes deben repetirse

solo horizontal o verticalmente, o se
verán extrañas, como esta:
Si la imagen de arriba se repite solo
horizontalmente (background-repeat: repeat-x;), el
fondo se verá mejor:

To repeat an image vertically, set

background-repeat: repeat-y;
 Mostrar la imagen de
fondo solo una vez también
está especificado por la
propiedad background-
repeat:
 Mostrar la imagen de
fondo solo una vez también
está especificado por la
propiedad background-
repeat:
 En el ejemplo anterior, la imagen de fondo se
muestra en el mismo lugar que el texto.
Queremos cambiar la posición de la imagen,
para que no moleste demasiado el texto.

La posición de la imagen se especifica mediante

la propiedad de posición de fondo:
 En el ejemplo anterior, la imagen de fondo se
muestra en el mismo lugar que el texto.
Queremos cambiar la posición de la imagen,
para que no moleste demasiado el texto.

La posición de la imagen se especifica mediante

la propiedad de posición de fondo:
Para especificar que la
imagen de fondo debe
ser fija (no se
desplazará con el resto
de la página), use la
propiedad
background-
attachment:
Para especificar que la
imagen de fondo debe
ser fija (no se
desplazará con el resto
de la página), use la
propiedad
background-
attachment:
 Para acortar el código, también
es posible especificar todas las
propiedades de fondo en una sola
propiedad. Esto se llama una
propiedad taquigráfica.
La propiedad de taquigrafía para
el fondo es fondo:
Cuando se usa la propiedad de acortar,
el orden de los valores de la propiedad
es:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
No importa si falta uno de los valores
de propiedad, siempre y cuando los
otros estén en este orden.
Con la propiedad CSS border-radius,
puede darle a cualquier elemento
"esquinas redondeadas".
Con la propiedad CSS border-radius,
puede darle a cualquier elemento
"esquinas redondeadas".

Con la propiedad CSS border-radius,
puede darle a cualquier elemento
"esquinas redondeadas".
La propiedad border-radius es en realidad una
propiedad abreviada para las propiedades
• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius.
La propiedad border-radius puede tener de uno
a cuatro valores. Estas son las reglas:
Cuatro valores: border-radius : 15px 50px 30px
5px; (el primer valor se aplica a la esquina
superior izquierda, el segundo valor se aplica a
la esquina superior derecha, el tercer valor se
aplica a la esquina inferior derecha, y el cuarto
valor se aplica a la esquina inferior izquierda).
Tres valores: border-radius : 15px 50px 30px;
(el primer valor se aplica a la esquina
superior izquierda, el segundo valor se aplica
a las esquinas superior derecha e inferior
izquierda, y el tercer valor se aplica a la
esquina inferior derecha).
Dos valores: border-radius : 15px 50px; (el
primer valor se aplica a las esquinas
superior izquierda e inferior derecha, y el
segundo valor se aplica a las esquinas
superior derecha e inferior izquierda)
Un valor - border-radius : 15px; (el valor se
aplica a las cuatro esquinas, que se
redondean por igual:
La propiedad border-radius puede tener de uno
a cuatro valores. Estas son las reglas:

Cuatro valores: border-radius : 15px 50px 30px

5px; (el primer valor se aplica a la esquina
superior izquierda, el segundo valor se aplica a
la esquina superior derecha, el tercer valor se
aplica a la esquina inferior derecha, y el cuarto
valor se aplica a la esquina inferior izquierda).

Tres valores: border-radius : 15px 50px 30px;

(el primer valor se aplica a la esquina
superior izquierda, el segundo valor se aplica
a las esquinas superior derecha e inferior
izquierda, y el tercer valor se aplica a la
esquina inferior derecha).

Dos valores: border-radius : 15px 50px; (el

primer valor se aplica a las esquinas
superior izquierda e inferior derecha, y el
segundo valor se aplica a las esquinas
superior derecha e inferior izquierda)

Un valor - border-radius : 15px; (el valor se

aplica a las cuatro esquinas, que se
redondean por igual:
border-image

La propiedad border-image toma la

Con la propiedad border-image de
imagen y la divide en nueve secciones,
CSS, puede establecer una imagen
como un tablero de tres en raya. Luego
para usar como borde alrededor de
coloca las esquinas en las esquinas, y las
un elemento.
secciones del medio se repiten o estiran
según lo especifique.
La propiedad tiene tres partes:
Nota: Para que la imagen de borde
La imagen para usar como borde
funcione, el elemento también necesita
Dónde cortar la imagen
establecer la propiedad border.
Definir si las secciones del
medio deben repetirse o estirarse
Aquí, las secciones intermedias de la
imagen se repiten para crear el borde:
border-image
border-image
La propiedad border-image es
en realidad una propiedad
abreviada para las propiedades
• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat
La propiedad CSS border-image-slice divide la
imagen especificada por border-image-source
en nueve regiones: las cuatro esquinas, los
cuatro bordes y el espacio en medio. Esto se
hace especificando cuatro desplazamientos hacia
adentro.
Cuatro valores controlan la posición de las líneas
de corte. Si algunas no son especificada, se
infieren de las otras, con la sintaxis común de
cuatro valores de CSS.
La región media no es usada por el borde en sí,
pero sí se usa como imagen de fondo si se
establece la palabra clave fill. Se puede
establecer este valor en cualquier posición en la
propiedad (antes, después o entre los otros
valores).
border-image

SLICE

Es un valor <number> o <percentage> de la

separación de las cuatro líneas de corte. Un valor
<number> representa píxeles para imágenes de mapa
de bits y coordenadas para imágenes vectoriales. A
su vez, los valores <percentage> son relativos a la
altura o anchura de la imagen, según sea más
adecuado. Valores negativos son inváildos, y valores
mayores al tamaño relevante, anchura o altura, son
restringidos a 100%.
border-image

HORIZONTAL
Es un valor <number> o <percentage> de la
separación de las dos líneas de corte horizontales, la
superior y la inferior. El valor <number> representa
píxeles para imágenes de mapa de bits y
coordenadas para imágenes vectoriales. A su vez, los
valores <percentage> son relativos a la altura o
anchura de la imagen, según sea más adecuado.
Valores negativos son inválidos, y valores mayores
al tamaño relevante, altura o anchura, son
restringidos a 100%.

VERTICAL
Es un valor <number> o <percentage> de la
separación de las dos líneas de corte verticales, la
izquierda y la derecha. El valor <number>
representa píxeles para imágenes de mapa de bits y
coordenadas para imágenes vectoriales. A su vez, los
valores <percentage> son relativos a la altura o
anchura de la imagen, según sea más adecuado.
Valores negativos son inválidos, y valores mayores
al tamaño relevante, altura o anchura, son
restringidos a 100%.
border-image

TOP
Es un valor <number> o <percentage> de la
separación de la línea de corte superior. El valor
<number> representa píxeles para imágenes de mapa
de bits y coordenadas para imágenes vectoriales. A
su vez, los valores <percentage> son relativos a la
altura o anchura de la imagen, según sea más
adecuado. Valores negativos son inválidos, y valores
mayores al tamaño relevante, altura o anchura, son
restringidos a 100%.

BOTTOM
Es un valor <number> o <percentage> de la
separación de la línea de corte inferior. El valor
<number> representa píxeles para imágenes de mapa
de bits y coordenadas para imágenes vectoriales. A
su vez, los valores <percentage> son relativos a la
altura o anchura de la imagen, según sea más
adecuado. Valores negativos son inválidos, y valores
mayores al tamaño relevante, altura o anchura, son
restringidos a 100%.
border-image

FILL

Es una palabra clave cuya presencia forza que la

región media de la imagen sea mostrada sobre la
imagen de fondo; su tamaño y altura son
redimensionados acorde a los fragmentos superior e
izquierdo, respectivamente.

INHERIT

Es una palabra clave que indica que los cuatro

valores serán heredados de los valores calculados de
su elemento padre.
La propiedad border-image es
en realidad una propiedad
abreviada para las propiedades

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset La propiedad CSS border-image-width
• border-image-repeat especifica el ancho de la imagen de borde de un
elemento.

Si el valor de esta propiedad es mayor que el

ancho del borde del elemento, la imagen del
borde se extenderá más allá del borde del
padding (y / o contenido).
La propiedad border-image-width se puede
especificar utilizando uno, dos, tres o cuatro
valores elegidos de la lista de valores a
continuación.

• Cuando se especifica un valor, aplica el

mismo ancho a los cuatro lados.

• Cuando se especifican dos valores, el

primer ancho se aplica a la parte superior e
inferior, el segundo a la izquierda y a la
derecha.

• Cuando se especifican tres valores, el

primer ancho se aplica a la parte superior, el
segundo a la izquierda y a la derecha y el
tercero a la parte inferior.

• Cuando se especifican cuatro valores, los

anchos se aplican a la parte superior,
derecha, inferior e izquierda en ese orden (en
el sentido de las agujas del reloj).
El siguiente ejemplo crea una imagen de borde usando
un archivo ".png", que es de 90 por 90 píxeles:

La propiedad border-image es
en realidad una propiedad
abreviada para las propiedades
• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat
La propiedad CSS border-image-outset
especifica la distancia a la que se establece la
imagen de borde de un elemento el borde.
• La propiedad border-image-outset se puede
especificar como uno, dos, tres o cuatro
valores. Cada valor es un <longitud> o
<número>. Los valores negativos no son
válidos.
• Cuando se especifica un valor, aplica el
mismo comienzo a los cuatro lados.
• Cuando se especifican dos valores, el
primer inicio se aplica a la parte superior e
inferior, el segundo a la izquierda y a la
derecha.
• Cuando se especifican tres valores, el
primer inicio se aplica a la parte superior, el
segundo a la izquierda y a la derecha y el
tercero a la parte inferior.
• Cuando se especifican cuatro valores, los
outsets se aplican a la parte superior,
derecha, inferior e izquierda en ese orden (en
el sentido de las agujas del reloj).

La propiedad border-image es
en realidad una propiedad
abreviada para las propiedades
• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat
La propiedad CSS border-image-repeat define cómo
las regiones de borde de una imagen de origen se ajustan
a las dimensiones de la imagen de borde de un elemento.
La propiedad border-image-repeat se puede especificar
utilizando uno o dos valores elegidos de la lista de
valores a continuación. Cuando se especifica un valor,
aplica el mismo comportamiento en los cuatro lados.
Cuando se especifican dos valores, el primero se
aplica a la parte superior e inferior, el segundo a la
izquierda y a la derecha.
VALORES
STRETCH
Las regiones de borde de la imagen de origen se
estiran para llenar el espacio entre cada borde.
REPEAT
Las regiones de borde de la imagen de origen están en
mosaico (repetidas) para llenar el espacio entre cada
borde. Las baldosas se pueden recortar para lograr el
ajuste correcto.
ROUND
Las regiones de borde de la imagen de origen están en
mosaico (redondeadas) para llenar el espacio entre cada
borde. Las baldosas pueden estirarse para lograr el ajuste
correcto.
SPACE
Las regiones de borde de la imagen de origen están en
mosaico (repetidas) para llenar el espacio entre cada
borde. Se distribuirá espacio adicional entre las fichas
para lograr el ajuste adecuado.