Varsel CSS
Eksempel nr. 1:
Først må vi opprette HTML -filen for å opprette varslingskassen min og deretter opprette CSS -filen for styling av varslingsboksen. Vi skal demonstrere disse kodene i Visual Code Studio. Vi oppretter en ny fil med noe filnavn og bruker ".HTML ”Fil Extension for Laging denne HTML -filen. Begynn deretter å skrive den gitte koden i denne HTML -filen.
Her nevner vi typen dokument “HTML”. Åpne deretter “” -merket. Du må lukke alle taggene du bruker her. Så vi lukker denne "" -koden ved å bruke "" på slutten. Åpne “” -merket. I "" -merket er det en ny tag "Meta". "Navnet" her spesifiserer navnet, og "innholdet" definerer verdiene. Denne linjen brukes til å angi "Viewport" slik at varslingssiden vår ser bra ut på hver enhet.
Koble nå denne HTML -filen til "CSS" -filen som heter "Styling.CSS ”. "Link" -koden og "REL" definerer forbindelsen mellom den koblede siden og denne siden. “Href” er for å gi navnet på “CSS” -filen .“CSS” -filen er “Styling.CSS ”. Etter dette lukkes, taggen ved å bruke denne taggen “”. Nå må vi åpne "" -merket. Kroppen inneholder overskriftstoden
Og det er en overskrift i denne taggen. Etter å ha stengt dette, har vi brukt en DIV -klasse, og for dette brukes taggen her. Vi har opprettet en Div -klasse “Alert” som brukes som en container og en spennklasse som heter “CloseBtn”.
Her la vi til en klasse med en "OnClick" -egenskap som brukes til å skjule foreldreelementet. Når du klikker på den som er i . “& Times” brukes til å lage “X” -brevet. “”Tag er der slik at teksten vises som fet. Etter dette, lukk alle tagger. Nå, lagre det. Opprett deretter CSS -filen for å gi stil til denne varslingsboksen. Koden til CSS -filen er også her nedenfor.
Først må du bruke stylingen på "varselet". Sett sin "posisjon" som absolutt, noe som betyr at vi kan plassere elementer hvor vi vil. Polstringen er her for å skape ekstra avstand i et element. Verdien av polstring er “20px”. Bakgrunnen er rød. Koden for rød farge er “#F44336”. Fargen på teksten er hvit. Deretter bruker du stil på "CloseBtn" der vi fikser venstre margin "15px" og farge er "hvit".
Vekten på brettet forteller hvor tykk eller tynn skriften er eller tynn er. I denne CAE er det "fet". Fontfamilien brukes til skriftstilen som er "Cambria" -font. Fargen på "X" er "brun" og den "flyter" til høyre side av varslingsboksen. Størrelsen på skriften er satt til "22px" og "linjehøyden" er "20px". "Markøren" er her som en "peker". Dette brukes til å spesifisere markørens type. Her er typen markør satt som "peker" slik at pekeren vises for brukeren. Vi bruker stylingen på min varslingsboks i denne CSS -filen og koblet også denne filen til HTML -filen. Generer deretter utdataene på nettleseren. Se utgangen i bildet:
Eksempel 2:
Vi skal opprette mer enn en varslingsboks samtidig ved å endre koden ovenfor. Du kan se hvordan vi lager varslingsbokser i denne koden nedenfor.
HTML -koden er den samme som forklart i det første eksemplet. Vi må vise overskriften "varslingsmeldinger", så for dette bruker vi
> Tag. Deretter vises et avsnitt som er skrevet inne i "
""
”Tagger. Bruk deretter "" og "" -merkerne som vi har forklart i det første eksemplet. Denne varslingsboksen vil vise "fare". Vi oppretter fire varslingsbokser ved å bruke den samme metoden her i denne koden.Nå, her, styler vi varslingsboksene ved hjelp av CSS. Først må vi justere teksten til midten av skjermen. Så, forithis vi brukte "tekst-align: sentrum". Nå, bruk ".varsling.Fare ”som bruker all styling gitt i krøllete seler av dette for" Danger "varslingsboksen. Her kan du se at bakgrunnsfargen er satt som "rød". Når denne varslingsboksen vises, vil fargen på dette være "rødt". Teksten skrevet i dette vil være av "algerisk" stil.
Her, for å bruke skriftstilen, brukte vi "font-family". Fargen på skriften eller teksten er satt som "svart". Etter dette er fargen på neste varslingsboks "lilla". "Success" -varslingsboksen og stilen til skriften er "Times New Roman". Vi må også endre fargen på teksten ved hjelp av "farge" og sette den som "orangered". Deretter må vi style den tredje varslingsboksen, “Alert.info ”. Vi velger bakgrunnsfargen lyseblå og koden for dette er "#219643". Fontstilen vi valgte denne gangen er "Arial" og fargen for dette er "blå".
Vi har også den fjerde varslingsboksen som heter "Advarsel". Fargen på bakgrunnen til denne advarselsvarslingsboksen er "svart", "font-family" er "Georgia", og fargen er "hvit". Svart bakgrunn og hvit tekst eller skrift. Nå er det på tide å style lukkeknappen. For dette har vi brukt “.CloseBtn ”. I dette må vi style denne lukkeknappen. Sett "margin-venstre" som "15px" og fargen til "hvit". Fontvekten brukes her som vi har diskutert i koden ovenfor. Vi bruker fontvekten som "fet" og flyter den til "høyre". "Font-size" og "linjehøyden" er henholdsvis "22px" og "20px". Typen "markør" er "peker".
I utgangen kan du se at teksten over varslingsboksene er sentrert og alle varslingsboksene er i forskjellige farger. Fontstilen og skriftfargen er også forskjellige i hver varslingsboks. Alle disse stylingene gjøres ved hjelp av CSS.
Konklusjon:
I denne opplæringen har vi diskutert varselmeldingene i detalj. Vi har forklart hvordan du oppretter varslingsboksen i HTML, hvordan du styler varslingsboksen ved å bruke CSS, og hvordan du kobler HTML -filen med CSS -filen. Vi har demonstrert eksempler her i denne opplæringen og viser også utdataene fra kodene som vi har skrevet i HTML og CSS. Vi forklarte også hver linje av disse kodene, slik at det er enkelt for deg å lære dette konseptet. Denne opplæringen vil være nyttig for deg i styling og lage varslingsboksene på nettstedene dine.