CSS attr
I denne guiden vil vi utforske Attr () -funksjonen i CSS og bruke denne funksjonen for å hente verdien. Vi vil forklare hvordan du bruker denne funksjonen i CSS og hvordan den vil returnere verdien i utgangen på ønsket sted. Vi vil gjøre noen eksempler her og gjøre dette attr () -funksjonskonseptet klart for deg.
Eksempel 1
Vi må ha en HTML -kode for å bruke denne attr () -funksjonen i CSS. Vi kan bruke denne attr () -funksjonen i vår CSS -kode for å hente verdiene som brukes i HTML. Programvaren vi bruker for å utføre disse eksemplene i denne guiden er Visual Studio Code. Vi åpner en ny fil i Visual Studio -koden og velger deretter språket i filen som HTML. Filen som er opprettet er HTML -filen. Deretter skriver vi HTML -koden i denne filen. Når vi lagrer denne filen etter å ha fullført koden, lagres denne filen med ".HTML ”Fil Extension.
I HTML -koden oppretter vi en overskrift 1 ved å bruke "
”. Så bruker vi "" -merket der vi oppretter en "lenke" av "Google" og skriver deretter "Google -lenken" som vises på skjermen. Lukk deretter "" -merket. Vi bruker Attr () -funksjonen på “Href” i CSS, så lenken vises med teksten.
CSS -kode:
Her oppretter vi CSS -filen. Vi kan bruke Attr () -funksjonen for å hente dataene. Vi må bruke “.CSS ”Fil Extension når du lagrer denne filen.
"H1" representerer overskriften vi opprettet i HTML -filen. Vi justerer denne overskriften til midten av "skjermen" ved å bruke "tekst-align". Deretter bruker vi "A: før", så når vi bruker "attr ()" -funksjonen, vil den vise den ønskede verdien vi hentet før innholdet. Dette "innholdet" definerer dataene vi skrev i HTML -filen ved hjelp av den tilpassede egenskapen. "Attr (href)" får dataene fra "href" som er lenken. Og plasserer det før innholdet og plasserer “=>” etter “href”.
Deretter styler vi “A” som brukes til å definere hyperkoblingen i HTML. Vi setter "fontstilen" til "kursiv", så den vil gjengi på skjermen i "kursiv" -stil. Vi setter også "fargen" til "blå". Denne "farge" -egenskapen definerer fargen på skriften. "Font-size" er satt til "30px". Vi kan få utdataene etter å ha koblet og lagret både HTML- og CSS -kodene ved å trykke på “Alt+B” på HTML -siden.
Produksjon:
Utgangen fra den forrige koden gjenspeiles i følgende bilde:
Koblingen vi brukte i HTML -koden vises her siden vi brukte “attr ()” for å hente denne lenken. Vi brukte "før", så denne lenken vises før innholdet. Her er innholdet “Google Link”. Verdien vi ønsker å hente er lenken til Google som vi lagret i "Href" i HTML -koden.
Eksempel nr. 2
For dette eksemplet bruker vi den samme HTML -filen. Men vi kommer til å gjøre noen endringer i CSS -koden og bruke "attr ()" -funksjonen igjen på forrige HTML -kode.
Igjen er overskriften justert i "senteret". Vi bruker "etter" med "A", så når "attr ()" -funksjonen henter verdien, vil denne verdien vises etter innholdet. Her bruker vi "innholdet" så har vi en pil "=>" og bruker deretter "attr ()" -funksjonen. Når vi får produksjonen av dette, vil du se at lenken vises etter innholdet. I dette eksemplet bruker vi en "rød" fontfarge med en "30px" "fontstørrelse".
Produksjon:
Denne utgangen viser lenken etter innholdet. Den viser først innholdet som er "Google Link". Deretter viser den lenken til den, som vi får ved å bruke "affr ()" -funksjonen til CSS.
Eksempel nr. 3
Her oppretter vi en liste med forskjellige navn. “OL” brukes til å definere den bestilte listen. Mens "Li" brukes til å representere elementet i listen. Vi oppretter listen over fire navn og henter disse navnene ved å bruke "attr ()" -funksjonen i CSS.
CSS -kode:
Vi bruker den "oransje" fargen for overskriften og justerer den i "senteret". Vi ønsker å plassere navnene etter innholdet, så vi bruker "etter" med "listen.Li ”. Vi bruker "innholdet" for å vise innholdet vi skrev i HTML -koden. Vi bruker også parentesen inne i parentesene. Vi bruker "attr ()" -funksjonen. Vi passerer "navnet" som elementet i "attr ()" -funksjonen. Når vi får utdataene, vises navnene i parentesen. Fontfargen på dette settet er "blått" og vises i kursiv stil når vi setter "fontstil" til "kursiv". De bruker noen egenskaper på listeartiklene som er "font-size" -egenskapen. Vi setter fontstørrelsen til “25px”. Og bruk egenskapen "Font-Family" som er satt til "Times New Roman".
Produksjon:
Her kan vi se at innholdet først blir gjengitt. Da vises navnene i parentesen etter innholdet. Vi får alle navnene ved å bruke bare en attr () -funksjon og gjengitt disse navnene med hvert listeelement etter innholdet.
Eksempel 4
Vi oppretter fire lenker i denne HTML -koden ved å bruke "Href" og ha innholdet for hver lenke. Se nå på CSS -koden og hvordan vi henter disse koblingene ved å bruke "attr ()" -funksjonen.
CSS -kode:
Vi styler overskriften ved å endre "fargen" og "font-familiens" av teksten. Vi justerer teksten i "senteret". Vi bruker "After" slik at lenken vi får ved hjelp av attr () -funksjonen blir gjengitt etter innholdet. Vi bruker parentesen, så når Attr () -funksjonen henter lenken, vil den vise dem inne i parentesen. Disse koblingene gjengir i "rød" farge og i "kursiv" stil.
Produksjon:
Eksempel 5
Vi lager en liste over forskjellige frukt og grønnsaker og bruker Attr () -funksjonen på denne listen. Listen vi opprettet her er den bestilte listen. Nå kommer CSS -koden vi bruker attr () -funksjonen.
CSS -kode:
Vi bruker den "grønne" fargen for overskriften. Bakgrunnsfargen for denne overskriften er “Aqua”. Vi bruker "etter" som vi diskuterte i våre tidligere koder. Her brukes Attr () -funksjonen igjen inne i parentesen, slik at de hentede dataene vises i denne parentesen. Vi setter fargen til "Orangered" og skriftstørrelsen til "22px". Vi bruker bakgrunnsfargen for dette og setter den til "gul".
Produksjon:
Konklusjon
I denne guiden lærte vi hva som er attr () -funksjon og hvorfor vi bruker denne ATTR () -funksjonen i CSS. Vi lærte også hvordan vi bruker denne funksjonen i CSS. Vi forklarte denne attr () -funksjonen teoretisk og utførte eksempler der vi brukte denne funksjonen i CSS. Vi utforsket de fem forskjellige eksemplene i denne guiden og viste dataene eller lenken som vi hentet ved å bruke Attr () -funksjonen, før og etter innholdet. Vi forklarte hvordan denne funksjonen henter ønsket data fra det valgte elementet eller verdien og viser den i utgangen.