URL CSS
Esempio 1:
Inizieremo con il nostro primo esempio aprendo un nuovo file nel software, che è il codice Visual Studio. Quando creiamo un nuovo file nel codice Visual Studio, abbiamo la scelta di scegliere la lingua e scegliamo HTML. Successivamente, dobbiamo creare il codice HTML. Digitando "!"E quindi premendo" Invio ", il codice Visual Studio ci dà la possibilità di acquisire automaticamente i tag di base. Diamo il collegamento al file CSS nel tag Head HTML, quindi useremo la funzione URL () in CSS. Nel corpo, abbiamo un'intestazione e un semplice paragrafo. Dopo questo, abbiamo messo un contenitore "div". Salviamo questo file e quindi ci stiamo muovendo verso il file CSS. Ora, guarda il codice CSS qui sotto.
Impostiamo il "div" in questo codice e aggiungiamo la proprietà "l'immagine di background". Ora, dobbiamo impostare l'immagine per lo sfondo. Per l'aggiunta di un'immagine, dobbiamo usare la funzione "url ()" e dare il percorso dell'immagine che vogliamo aggiungere come parametro della funzione "url ()". Usiamo la proprietà "allineate al testo" e la impostiamo su "Center". Quindi, imposta la "larghezza" su come "500px". L '"altezza" è "260px". Alliamo inoltre l'intestazione per rendere l'output più attraente. Impostamo il "colore" che definisce il colore del testo dell'intestazione e imposta "rosso" per questa proprietà. La "famiglia del carattere" per il testo dell'intestazione è "algerina".
Abbiamo anche un paragrafo nel file HTML, quindi applichiamo anche alcune proprietà a questo paragrafo. Abbiamo impostato le dimensioni del testo del paragrafo utilizzando la proprietà CSS "Size Font" e la impostata come "18px". Ora, di nuovo usiamo la proprietà "Colore" per il testo del paragrafo e usiamo "Blue".
Ottiamo questo output premendo "Alt+B" nel file HTML oppure è possibile premere il pulsante destro del mouse e quindi selezionare il browser predefinito per ottenere l'output. Nell'output, puoi vedere che c'è l'immagine sotto l'intestazione e il testo. Aggiungiamo questa immagine mettendo il percorso di questa immagine nel parametro URL ().
Esempio n. 2:
Aggiungiamo di nuovo l'intestazione "H2" e il paragrafo "P" in questo esempio. Quindi, metti il "div" sotto questo. Aggiungeremo l'URL () dell'immagine nella proprietà dell'immagine di background per questo div. Lo vedrai nel file CSS, come aggiungiamo il percorso nella funzione "url ()".
Stiamo solo aggiungendo la "immagine di sfondo" nella "div" e posizionando la funzione "url ()". Stiamo fornendo il percorso dell'immagine come "Myhouse.PNG ". È necessario inserire il percorso corretto in questo parametro "url ()". La "larghezza" di questa immagine è "400px" e "altezza" è "350px". L'elemento "colore" che stiamo usando è "viola". La "famiglie di carattere" dell'intestazione è "Times New Roman". Il paragrafo "Size Font" è "20px" e "Color" è "Verde".
L'output mostra che c'è un'immagine dopo l'intestazione e il paragrafo. L'altro intestazione appare sull'immagine come impostato nel file CSS.
Esempio # 3:
Il codice HTML per questo esempio è lo stesso che abbiamo integrato nel primo esempio in cui abbiamo un paragrafo, un'intestazione e un contenitore di div vuoto ma utilizzeremo i diversi parametri della funzione URL () nel codice CSS.
L '"altezza" per "Div" è "700px" e "500px" nella sua "larghezza". Ora stiamo usando la "immagine di sfondo" e stiamo mettendo due diversi URL in cui stiamo dando un percorso di immagini diverse. Mettiamo il primo "URL" e all'interno del parametro. Mettiamo "Smily.JPEG "come percorso dell'immagine e poi mettere un altro" URL "separando entrambi gli URL con" ",".
Mettiamo "Smily.jpeg "come parametro del secondo URL. Quindi, abbiamo la proprietà "Ripeti di background" che viene utilizzata per impostare il modo in cui vengono ripetute le immagini di sfondo. Lo impostiamo su "No-REPEAT" per entrambe le immagini. Abbiamo anche impostato la "posizione di sfondo" che imposta le posizioni di entrambe le immagini. Posizioniamo "a destra" per la prima immagine e "a sinistra" per la seconda immagine. Per "H2" abbiamo "Marron" per il "colore" dell'intestazione. La "famiglia del carattere" della voce è "Times New Roman" ed è allineato nel "centro". Il "30px" che stiamo utilizzando per la "dimensione del carattere" e cambia la "famiglie di carattere" in "algerino". Utilizziamo anche la proprietà "Size di carattere" per la "P" ed è "25px". Abbiamo impostato il "colore" del paragrafo come "RGB (37, 35, 35)" che appare come "grigio". Allineiamo anche questo come l'intestazione, nel "centro".
Puoi vedere due immagini in cui la prima immagine è posizionata sul lato sinistro e la seconda immagine viene posizionata sul lato destro della schermata di uscita. Mettiamo il percorso di entrambe le immagini nell'URL come parametro. Quindi, entrambe le immagini compaiono nell'output.
Esempio # 4:
Il file HTML che stiamo usando è lo stesso di sopra e cambieremo la famiglia del carattere posizionando l'URL e mettendo l'immagine usando l'altra funzione URL in CSS.
In questo file CSS, la "faccia del carattere" viene utilizzata per specificare il carattere personalizzato. Ci offre l'opportunità di selezionare da una vasta gamma di caratteri. Abbiamo impostato "Font-Family" come "Open Sans". Nel "SRC", la funzione "locale" è per ottenere il carattere dal sistema locale dell'utente. Se non si trova in "Open sans", controllerà l'opzione successiva in cui posizioniamo "URL". E lo controlla in formato "Woff2", se disponibile. Quindi, lo applicherà ma se non è disponibile, si sposterà al prossimo "URL". Se non è disponibile in nessuna opzione, selezionerà la "famiglie font" che abbiamo descritto di seguito che è "sans serif".
Facciamo tutto questo mettendo l'URL. Quindi, tutte le immagini nel contenitore DIV utilizzando lo stesso metodo, come abbiamo discusso, posizionando il percorso nella funzione "URL" e impostazioni "larghezza" e "altezza".
L'output mostra che la famiglia dei caratteri dell'intestazione e il paragrafo cambia e c'è anche un'immagine qui sotto per tutti questi.
Conclusione
Abbiamo presentato questo tutorial per guidarti sulla funzione CSS URL (). Abbiamo esaminato questo argomento in profondità e abbiamo esplorato diversi esempi in cui abbiamo utilizzato questa funzione "url ()" nel codice CSS. Abbiamo spiegato che utilizziamo questa funzione url () per il collegamento a una risorsa: immagine, famiglie di carattere, ecc. In questo tutorial, abbiamo anche discusso di come aggiungere il percorso come parametro in questa funzione "url ()". Abbiamo preparato un tutorial completo per te in cui abbiamo fornito il codice e abbiamo spiegato questo codice in dettaglio insieme all'output.