En esta lección vamos a cubrir dos nuevas propiedades de fondo que usamos para cambiar el color
de fondo o la imagen de fondo de un elemento y borde.
Así que vamos a comenzar con el fondo, como pueden ver. Tengo un pequeño ejemplo aquí.
Así que aquí está su resultado final.
Tenga en cuenta que tenemos un fondo gris en el cuerpo.
Viniendo de aquí y luego tenemos un fondo azul en el div que viene de aquí.
Y luego también tenemos texto blanco en el párrafo.
Así que vamos a intentarlo usando la página Acerca de mí con la que hemos estado trabajando.
Y sigamos adelante y cambie mis hobbies h adelante y déle un color de fondo.
Vamos a darle un color naranja.
Así que de nuevo queremos seleccionar esta edad de cuatro años, así que escribimos la edad cuatro.
Y luego, dentro de las llaves, vas a decir fondo y haremos un RG B y
lo haremos como un color naranja.
Así que serán un montón de rojo, un poco verde y un poco azul, y vamos a refrescarnos y
obtendremos este bonito color coral.
algo que ve a menudo en un sitio web donde todo el fondo es de un nuevo color.
Entonces, déjenos dar el trasfondo, démosle al cuerpo un fondo que es
Así que
vamos a hacer algo como fondo y digamos que para ser rosado por ahora y luego vamos
todo el fondo es rosado.
Entonces esa es la propiedad de fondo que se usa para cambiar el color de algo.
Pero también podemos usar la propiedad de fondo para cambiar el fondo para que sea una imagen que también se
vea con bastante frecuencia.
el fondo, pero en lugar de un color, decimos Arel y luego entre paréntesis, le damos un lugar donde se ubica la imagen.
Entonces, de la manera en que funciona, todavía especificamos
Así que vamos a buscar algunos granos de madera, vamos a encontrar una imagen como esta aquí.
Así que copiemos esta imagen.
Si lo lanzas, lo estableceremos como fondo.
Entonces en nuestro cuerpo solo voy a decir que eres Earl y en eso eres Ellett. Acabo de copiar.
Entonces esto funcionará con cualquier imagen.
Y si actualizamos bien, vemos que nuestro fondo se ha configurado, pero notará una pequeña cosa que es que nuestra
imagen no es lo suficientemente grande.
Si volvemos a eso, no está cerca de ser lo suficientemente grande como para cubrir todo nuestro cuerpo aquí.
Entonces, lo que sucedió es que está siendo apretado.
Puedes ver que sabes que está titulándose en mosaico horizontal y verticalmente.
Entonces, si no queremos eso ya veces lo haces, pero la mayoría del tiempo no se ve muy bien.
Entonces, si no queremos que haya otra propiedad que podamos establecer y que sea fondo, repita.
Y si establecemos que no se repita y guarde.
Ahora hemos establecido el fondo de su cuerpo y no se repite.
Pero también notarás que no se extiende para cubrir todo el cuerpo.
Entonces, si queríamos que se extendiera por toda la pantalla o por todo
el cuerpo, hay otra propiedad que podemos establecer, que es el tamaño de fondo, y podemos configurarlo para que cubra.
Entonces, como pueden ver, ahora ocupa todo el cuerpo.
Por supuesto, no es la mejor imagen para esto porque está un poco borrosa, está un
poco pixelada, pero cuando estás haciendo una imagen de fondo, normalmente quieres asegurarte de tener algo de gran y
alta resolución o algo que tenga una imagen más pequeña que se puede repetir a la perfección a diferencia
de este.
es simétrico en ambos ejes, así que si lo repetimos está muy claro que hay divisiones y mosaicos.
No es que sepas que
DE ACUERDO.
Así que ese es el fondo y el uso de fondo de color y fondo para establecer una imagen de fondo.
Lo siguiente que quiero mostrar es cómo obtenemos un borde.
Así que en realidad voy a hablar de esto porque es un poco molesto
y volvamos al fondo como
rosa y vamos a agregar bordes a todos los h.
Entonces un borde y C S tiene tres partes diferentes.
Está el con el color y el estilo.
Empecemos por darle un color de borde a cada uno.
Simplemente se ve como este color de borde y ese borde.
Vámonos con morado y si refrescamos no vemos nada y es porque actualmente nuestro
borde no tiene ancho.
Entonces, lo siguiente que tenemos que hacer es regalarlo.
Entonces, bordearlo le dará un número en píxeles.
Hagamos cinco píxeles cinco veces y todavía nos falta algo que sea estilo.
Entonces verán que nada de esto funciona a menos que tengamos los tres establecidos.
Entonces, el estilo de borde tiene algunas opciones diferentes.
Podemos decir sólido.
Corrí un borde punteado.
Hay algunos otros.
La mayoría del tiempo lo que ves es sólido, tan sólido, borde cinco píxeles púrpura.
Y tenemos un borde alrededor de todos los H.
Hay unos buenos atajos e impuestos que podemos usar.
Entonces, como a menudo establecemos los tres a la vez, existe la sintaxis equivalente que simplemente se
llama frontera.
Y tenemos dos puntos, el color sólido y el color púrpura.
Entonces, puedo comentarlos y no verán cambios.
Es idéntico
Así que juguemos un poco la jugada.
Vamos con un Forder de 8 pixel dasht que es solo tomemos nuestra R. GRAMO. B desde abajo y tenemos este bonito
efecto de borde discontinuo.
Entonces, por lo general, no he visto esto.
No he visto esto desde los sitios web en los años 90 usando este todo el tiempo diferentes estilos.
Por lo general, todo lo que ves es un lindo borde delgado de uno o dos píxeles.
DE ACUERDO.
Solo para recapitular en el borde podemos establecer las propiedades individualmente o podemos usar los
atajos e impuestos y establecer el estilo y el color.
Todo en uno ir