Avviso CSS
Esempio 1:
Innanzitutto, dobbiamo creare il file HTML per creare la mia casella di avviso e quindi creare il file CSS per lo styling della casella di avviso. Dimostreremo questi codici nello studio del codice visivo. Stiamo creando un nuovo file con qualsiasi nome file e usando il ".Estensione del file HTML "per salvare questo file HTML. Quindi, inizia a digitare il codice dato in questo file HTML.
Qui, menzioniamo il tipo di documento "HTML". Quindi apri il tag "". Devi chiudere tutti i tag che usi qui. Quindi, chiudiamo questo tag "" usando "" alla fine. Apri il tag "". Nel tag "", c'è un nuovo tag "meta". Il "nome" qui specifica il nome e il "contenuto" definisce i valori. Questa riga viene utilizzata per impostare il "Viewport" in modo che la nostra pagina di avviso abbia un bell'aspetto su ogni dispositivo.
Ora collega questo file HTML al file "CSS" chiamato "Styling.CSS ". Il tag "link" e il "rel" definiscono la connessione tra la pagina collegata e questa pagina. "HREF" è per dare il nome del file "CSS" .Il file "CSS" è "Styling.CSS ". Dopo questo vicino, il tag utilizzando questo tag "". Ora dobbiamo aprire il tag "". Il corpo contiene il tag di intestazione
E c'è un'intestazione in questo tag. Dopo aver chiuso questo, abbiamo usato una classe Div e per questo, il tag viene utilizzato qui. Abbiamo creato un "avviso" di classe Div che viene utilizzato come contenitore e una classe di span chiamata "CloseBTN".
Qui, abbiamo aggiunto una classe con una proprietà "onclick" che viene utilizzata per nascondere l'elemento genitore. Quando si fa clic su di esso, è in . Il "& Times" viene utilizzato per la creazione della lettera "X". IL ""Il tag è lì in modo che il testo verrà visualizzato in grassetto. Dopo questo, chiudi tutti i tag. Ora, salvalo. Quindi, crea il file CSS per dare stile a questa casella di avviso. Il codice del file CSS è anche qui sotto.
Innanzitutto, applica lo stile al "avviso". Imposta la sua "posizione" come assoluta, il che significa che possiamo posizionare gli elementi ovunque vogliamo. L'imbottitura è qui per creare una spaziatura extra all'interno di un elemento. Il valore dell'imbottitura è "20px". Il colore dello sfondo è rosso. Il codice di colore rosso è "#f44336". Il colore del testo è bianco. Quindi, applica lo stile su "CloseBtn" in cui fissiamo il margine sinistro "15px" e il colore è "bianco".
Il peso della piega dice quanto è spesso o sottile il carattere o sottile. In questo CAE, è "audace". La famiglia dei caratteri viene utilizzata per lo stile del carattere che è il carattere "Cambria". Il colore di "x" è "marrone" e "galleggia" sul lato destro della scatola di allerta. La dimensione del carattere è impostata come "22px" e l '"altezza della linea" è "20px". Il "cursore" è qui come un "puntatore". Questo viene utilizzato per specificare il tipo di cursore. Qui, il tipo di cursore è impostato come "puntatore", quindi il puntatore viene visualizzato all'utente. Applichiamo lo styling alla mia casella di avviso in questo file CSS e abbiamo anche collegato questo file al file HTML. Quindi, genera l'output sul browser. Vedi l'output nell'immagine:
Esempio n. 2:
Creeremo più di una casella di avviso contemporaneamente modificando il codice sopra. Puoi vedere come creiamo caselle di avviso in questo codice qui sotto.
Il codice HTML è lo stesso spiegato nel primo esempio. Dobbiamo visualizzare l'intestazione "messaggi di allerta", quindi per questo stiamo usando il
> tag. Quindi, un paragrafo è Display che è scritto all'interno "
""
"Tag. Quindi, usa i tag "" e "" che abbiamo spiegato nel primo esempio. Questa scatola di avviso visualizzerà "pericolo". Creiamo quattro caselle di avviso utilizzando lo stesso metodo qui in questo codice.Ora, qui stiamo accontentando le caselle di messaggio di avviso usando CSS. Innanzitutto, dobbiamo allineare il testo al centro dello schermo. Quindi, perithis abbiamo usato "allineamento: il centro". Ora, usa ".mettere in guardia.Danger "che applica tutto lo stile fornito tra le parentesi graffe di questo alla scatola di allerta" pericolo ". Qui, puoi vedere che il colore di sfondo è impostato come "rosso". Quando appare questa scatola di avviso, il colore di questo sarà "rosso". Il testo scritto all'interno di questo sarà di stile "algerino".
Qui, per applicare lo stile del carattere, abbiamo usato la "Family-Family". Il colore del carattere o del testo è impostato come "nero". Dopo questo, il colore della prossima scatola di allerta è "viola". La scatola di allerta "successo" e lo stile del carattere è "Times New Roman". Inoltre, dobbiamo cambiare il colore del testo con l'aiuto di "colore" e impostarlo come "aranceto". Quindi, dobbiamo modellare la terza scatola di allerta, "Avviso.informazioni". Scegliamo il colore di sfondo chiaro e il codice per questo è "#219643". Lo stile del carattere che abbiamo scelto questa volta è "Arial" e il colore per questo è "blu".
Inoltre, abbiamo la quarta scatola di allerta chiamata "Avviso". Il colore dello sfondo di questa scatola di avviso di avvertimento è "nero", "Font-Family" è "Georgia" e il colore è "bianco". Sfondo nero e testo bianco o carattere. Ora è il momento di modellare il pulsante di chiusura. Per questo, abbiamo usato ".Closebtn ". In questo, dobbiamo modellare questo pulsante di chiusura. Imposta il "margine-sinistra" come "15px" e il colore su "bianco". Il weight di carattere è usato qui di cui abbiamo discusso nel codice sopra. Usiamo il po 'di carattere come "audace" e lo fluttiamo al "giusto". La "dimensione del carattere" e la "linea di linea" è rispettivamente "22px" e "20px". Il tipo di "cursore" è "puntatore".
Nell'output, puoi vedere che il testo sopra le caselle di avviso è centrato e tutte le scatole di allerta sono di colori diversi. Lo stile del carattere e il colore del carattere sono anche diversi in ogni scatola di allerta. Tutti questi stili sono fatti usando CSS.
Conclusione:
In questo tutorial, abbiamo discusso in dettaglio i messaggi di avviso. Abbiamo spiegato come creare la casella di avviso in HTML, come modellare la casella di avviso usando CSS e come collegare il file HTML con il file CSS. Abbiamo dimostrato esempi qui in questo tutorial e mostrano anche l'output dei codici che abbiamo scritto in HTML e CSS. Abbiamo anche spiegato ogni riga di questi codici in modo che sia facile per te imparare questo concetto. Questo tutorial ti sarà utile nello stile e nella creazione delle scatole di avviso sui tuoi siti Web.