URL CSS
Ejemplo 1:
Comenzaremos con nuestro primer ejemplo abriendo un nuevo archivo en el software, que es Visual Studio Code. Cuando hacemos un nuevo archivo en el código de Visual Studio, tenemos la opción de elegir el idioma y elegimos HTML. A continuación, debemos construir el código HTML. Escribiendo "!"Y luego presionando" Enter ", Visual Studio Code nos brinda la capacidad de adquirir las etiquetas básicas automáticamente. Damos el enlace al archivo CSS en la etiqueta de cabeza HTML, por lo que usaremos la función url () en CSS. En el cuerpo, tenemos un encabezado y un párrafo simple. Después de esto, colocamos un contenedor "div". Guardamos este archivo y luego nos estamos moviendo hacia el archivo CSS. Ahora, mira el código CSS a continuación.
Establecemos el "div" en este código y agregamos la propiedad de "imagen de fondo". Ahora tenemos que configurar la imagen para el fondo. Para agregar una imagen, debemos usar la función "url ()" y dar la ruta de la imagen que queremos agregar como el parámetro de la función "url ()". Utilizamos la propiedad "Alineación de texto" y la establecemos en "Center". Luego, configure el "ancho" en "500px". La "altura" es "260px". También diseñamos el encabezado para hacer que la salida sea más atractiva. Establecemos el "color" que define el color del texto del encabezado y establece "rojo" para esta propiedad. La "Fontamily Font" para el texto del encabezado es "Argelino".
También tenemos un párrafo en el archivo HTML, por lo que también aplicamos algunas propiedades a este párrafo. Establecemos el tamaño del texto del párrafo utilizando la propiedad de "tamaño de fuente" CSS y lo establecemos como "18px". Ahora, nuevamente usamos la propiedad "color" para el texto del párrafo y usamos "azul".
Obtenemos esta salida presionando "Alt+B" en el archivo HTML o puede presionar el botón derecho del mouse y luego seleccionar el "Abrir en el navegador predeterminado" para obtener la salida. En la salida, puede ver que hay la imagen debajo del encabezado y el texto. Agregamos esta imagen colocando la ruta de esta imagen en el parámetro URL ().
Ejemplo # 2:
Nuevamente agregamos el encabezado "H2" y el párrafo "P" en este ejemplo. Luego, pon el "div" debajo de esto. Agregaremos la url de la imagen () en la propiedad de imagen de fondo para este div. Verá esto en el archivo CSS, cómo agregamos la ruta en la función "url ()".
Solo estamos agregando la "imagen de fondo" en el "div" y colocando la función "url ()". Estamos proporcionando el camino de la imagen como el "Myhouse.PNG ". Debe poner la ruta correcta en este parámetro "url ()". El "ancho" de esta imagen es "400px" y la "altura" es "350px". El encabezado "color" que estamos usando es "púrpura". La "familia de fuentes" del encabezado es "Times New Roman". El párrafo "tamaño de fuente" es "20px" y "color" es "verde".
La salida muestra que hay una imagen después del encabezado y el párrafo. El otro encabezado aparece en la imagen como establecido en el archivo CSS.
Ejemplo # 3:
El código HTML para este ejemplo es el mismo que hemos incorporado en el primer ejemplo en el que tenemos un párrafo, un encabezado y un contenedor DIV vacío, pero usaremos los diferentes parámetros de la función url () en el código CSS.
La "altura" para el "div" es "700px" y "500px" en su "ancho". Ahora, estamos utilizando la "imagen de fondo" y estamos poniendo dos URL diferentes donde estamos dando diferentes imágenes. Ponemos la primera "URL" y dentro del parámetro. Ponemos "Smily.jpeg "como el camino de la imagen y luego coloca otra" URL "separando ambas URL con", ",.
Ponemos "Smily.jpeg ”como el parámetro de la segunda URL. Luego, tenemos la propiedad de "repetición de fondo" que se utiliza para configurar cómo se repiten las imágenes de fondo. Lo establecemos en "sin repetición" para ambas imágenes. También establecemos la "posición de fondo" que establece las posiciones de ambas imágenes. Colocamos "a la derecha" para la primera imagen y "izquierda" para la segunda imagen. Para "H2" tenemos "Marron" para el "color" del encabezado. La "familia de fuentes" del encabezado es "Times New Roman" y está alineado en el "Centro". El "30px" que estamos utilizando para el "tamaño de la fuente" y cambia la "familia de fuentes" a "argelino". También utilizamos la propiedad de "tamaño de fuente" para la "P" y es "25px". Establecimos el "color" del párrafo como "RGB (37, 35, 35)" que aparece como "gris". También alineamos esto como el encabezado, en el "centro".
Puede ver dos imágenes en las que se coloca la primera imagen en el lado izquierdo y la segunda imagen se coloca en el lado derecho de la pantalla de salida. Ponemos la ruta de ambas imágenes en la URL como parámetro. Entonces, ambas imágenes aparecen en la salida.
Ejemplo # 4:
El archivo HTML que estamos usando es el mismo que el anterior y cambiaremos la familia de fuentes colocando la URL y colocando la imagen usando la otra función de URL en CSS.
En este archivo CSS, la "Font-Face" se usa para especificar la fuente personalizada. Nos brinda la oportunidad de seleccionar desde una amplia gama de fuentes. Establecemos "Font-Family" como "Open Sans". En el "SRC", la función "local" es para obtener la fuente del sistema local del usuario. Si no se encuentra en el "Open Sans", verificará la siguiente opción donde colocamos la "URL". Y lo verifica en formato "woff2", si está disponible. Luego, aplicará esto, pero si no está disponible, se moverá a la próxima "URL". Si no está disponible en ninguna opción, seleccionará la "Familia de fuentes" que hemos descrito a continuación, que es "sans serif".
Hacemos todo esto colocando la "URL". Luego, todas las imágenes en el contenedor Div utilizando el mismo método, como discutimos, colocando la ruta en la función y configuración de "URL" "ancho" y "altura".
La salida muestra que la familia de fuentes del encabezado y el párrafo cambia y también hay una imagen a continuación para todos estos.
Conclusión
Hemos presentado este tutorial para guiarlo sobre la función CSS URL (). Hemos pasado por este tema en profundidad profunda y hemos explorado diferentes ejemplos en los que hemos utilizado esta función "url ()" en el código CSS. Hemos explicado que usamos esta función url () para vincular a un recurso: imagen, fuente de fuente, etc. En este tutorial, también hemos discutido cómo agregar la ruta como el parámetro en esta función "url ()". Hemos preparado un tutorial completo para usted en el que hemos proporcionado el código y hemos explicado este código en detalle junto con la salida.