CSS URL
Eksempel nr. 1:
Vi starter med vårt første eksempel ved å åpne en ny fil i programvaren, som er Visual Studio Code. Når vi lager en ny fil i Visual Studio Code, har vi valget mellom å velge språket, og vi velger HTML. Deretter må vi bygge HTML -koden. Ved å skrive “!”Og deretter å trykke på“ Enter ”, gir Visual Studio Code oss muligheten til å skaffe grunnmerker automatisk. Vi gir lenken til CSS -filen i HTML Head -taggen, så vi bruker URL () -funksjonen i CSS. I kroppen har vi en overskrift og et enkelt avsnitt. Etter dette satte vi en "div" container. Vi lagrer denne filen og så beveger vi oss mot CSS -filen. Se nå på CSS -koden nedenfor.
Vi setter "div" i denne koden og legger til egenskapen "bakgrunnsbilde". Nå må vi sette bildet for bakgrunnen. For å legge til et bilde, må vi bruke "URL ()" -funksjonen og gi banen til bildet som vi ønsker å legge til som parameteren til "URL ()" -funksjonen. Vi bruker egenskapen "tekst-align" og setter den til "sentrum". Sett deretter "bredden" til som "500px". "Høyden" er "260px". Vi styler også overskriften for å gjøre produksjonen mer attraktiv. Vi setter "fargen" som definerer fargen på overskriften og setter "rød" for denne egenskapen. "Font-Family" for overskriften er "Algerie".
Vi har også et avsnitt i HTML -filen, så vi bruker også noen egenskaper på dette avsnittet. Vi setter størrelsen på avsnittets tekst ved å bruke CSS “Font-size” -egenskaper og sette den som “18px”. Nå, igjen bruker vi "farge" -egenskapen for avsnittets tekst og bruker "blå".
Vi får denne utgangen ved å trykke på “Alt+B” i HTML -filen, eller du kan trykke på høyre museknapp og deretter velge “Åpne i standard nettleser” for å få utdata. I utgangen kan du se at det er bildet under overskriften og teksten. Vi legger til dette bildet ved å legge banen til dette bildet i URL () -parameteren.
Eksempel 2:
Vi legger igjen overskriften “H2” og avsnittet “P” i dette eksemplet. Sett deretter "div" under dette. Vi vil legge til bildets URL () i bakgrunnsbilde-egenskapen for denne DIV. Du vil se dette i CSS -filen, hvordan vi legger til banen i "URL ()" -funksjonen.
Vi legger bare til "bakgrunnsbildet" i "div" og plasserer "url ()" -funksjonen. Vi gir banen til bildet som “Myhouse.PNG ”. Du må legge riktig bane i denne "URL ()" -parameteren. "Bredden" på dette bildet er "400px" og "høyden" er "350px". Overskriften "farge" vi bruker er "lilla". "Font-Family" av overskriften er "Times New Roman". Avsnittet "Font-size" er "20px" og "farge" er "grønn".
Utgangen viser at det er et bilde etter overskriften og avsnittet. Den andre overskriften vises på bildet som angitt i CSS -filen.
Eksempel nr. 3:
HTML -koden for dette eksemplet er den samme som vi har bygget i det første eksemplet der vi har et avsnitt, en overskrift og en tom DIV -beholder, men vi vil bruke de forskjellige parametrene til URL () -funksjonen i CSS -koden.
"Høyden" for "div" er "700px" og "500px" i "bredde". Nå bruker vi "bakgrunnsbilde" og legger to forskjellige nettadresser der vi gir forskjellige bilder vei. Vi legger den første "url" og inne i parameteren. Vi setter "Smily.JPEG ”som banen til bildet og la deretter en annen“ URL ”ved å skille begge nettadressene med“, ”.
Vi setter "Smily.JPEG ”som parameter for den andre URL -en. Deretter har vi egenskapen "bakgrunnsrepeter" som brukes til å stille inn hvordan bakgrunnsbildene gjentas. Vi setter den til "No-Repeat" for begge bildene. Vi setter også "bakgrunnsstilling" som setter posisjonene til begge bildene. Vi plasserer "høyre" for det første bildet og "venstre" for det andre bildet. For "H2" har vi "Marron" for "fargen" på overskriften. Overskriften “Font-Family” er “Times New Roman”, og den er på linje i “Center”. "30px" vi bruker for "fontstørrelse" og endrer "font-family" til "Algerie". Vi bruker også egenskapen "Font-size" for "P", og det er "25px". Vi setter "fargen" i avsnittet som "RGB (37, 35, 35)" som fremstår som "grå". Vi justerer dette også som overskriften, i "senteret".
Du kan se to bilder der det første bildet er plassert på venstre side og det andre bildet er plassert på høyre side av utgangsskjermen. Vi legger banen til begge bildene i nettadressen som parameter. Så begge bildene vises i utgangen.
Eksempel 4:
HTML-filen vi bruker er den samme som ovenfor, og vi vil endre fontfamilien ved å plassere nettadressen og sette bildet ved hjelp av den andre URL-funksjonen i CSS.
I denne CSS-filen brukes "font-face" for å spesifisere den tilpassede fonten. Det gir oss muligheten til å velge fra et bredt spekter av skrifter. Vi satte "font-family" som "åpne sans". I "SRC" er den "lokale" funksjonen for å få skriften fra brukerens lokale system for brukeren. Hvis det ikke finnes i "Open Sans", vil den sjekke neste alternativ der vi plasserer "URL". Og det sjekker det i “WOFF2” -format, hvis tilgjengelig. Deretter vil den bruke dette, men hvis det ikke er tilgjengelig, vil den flytte til neste "URL". Hvis den ikke er tilgjengelig i noe alternativ, vil den velge "font-family" som vi har beskrevet nedenfor som er "sans serif".
Vi gjør alle disse ved å sette "URL". Deretter, alle bildene i DIV -beholderen ved å bruke den samme metoden, som vi diskuterte, ved å plassere banen i "URL" -funksjonen og innstillingene "bredde" og "høyde".
Utgangen viser at fontfamilien til overskriften og avsnittet endres, og at det også er et bilde nedenfor for alle disse.
Konklusjon
Vi har presentert denne opplæringen for å veilede deg om CSS URL () -funksjonen. Vi har gått gjennom dette emnet i dyp dybde og har undersøkt forskjellige eksempler der vi har brukt denne "URL ()" -funksjonen i CSS -kode. Vi har forklart at vi bruker denne URL () -funksjonen for å koble til en ressurs: bilde, font-family osv. I denne opplæringen har vi også diskutert hvordan du legger til banen som parameter i denne "URL ()" -funksjonen. Vi har utarbeidet en fullstendig opplæring for deg der vi har gitt koden og har forklart denne koden i detalj sammen med utdataene.