Ostrzeżenie CSS
Przykład 1:
Najpierw musimy utworzyć plik HTML, aby utworzyć moje pole alertu, a następnie utworzyć plik CSS do stylizacji pole alertu. Zamierzamy zademonstrować te kody w studio kodu wizualnego. Tworzymy nowy plik z dowolną nazwą pliku i używamy „.rozszerzenie pliku HTML ”do zapisywania tego pliku HTML. Następnie zacznij wpisywać dany kod w tym pliku HTML.
Tutaj wspominamy o rodzaju dokumentu „HTML”. Następnie otwórz tag „”. Musisz zamknąć wszystkie tagi, których używasz tutaj. Zamykamy więc ten znacznik „”, używając „” na końcu. Otwórz tag „”. W znaczniku „” jest nowy tag „Meta”. „Nazwa” tutaj określa nazwę, a „treść” określa wartości. Ta linia służy do ustawienia „rzutni”, aby nasza strona alert wygląda dobrze na każdym urządzeniu.
Teraz połącz ten plik HTML do pliku „CSS” o nazwie „Styling.CSS ”. Znacznik „link” i „Rel” zdefiniują połączenie między połączoną stroną a tą stroną. „HREF” służy do podania nazwy pliku „CSS” .Plik „CSS” to „Stylowanie.CSS ”. Po tym zamknięciu tag za pomocą tego znacznika „”. Teraz musimy otworzyć metkę „”. Ciało zawiera znacznik nagłówka
I w tym znaczniku jest nagłówek. Po zamknięciu użyliśmy klasy DIV i do tego tag jest tutaj używany. Stworzyliśmy klasę DIV „Alert”, który jest używany jako kontener i klasa spanów o nazwie „CloseBtn”.
Tutaj dodaliśmy klasę z właściwością „onClick”, która jest używana do ukrywania elementu nadrzędnego. Po kliknięciu, który jest w . „& Times” służy do tworzenia litery „x”. „„”Tag jest, więc tekst będzie wyświetlany jako odważny. Po tym zamknij wszystkie tagi. Teraz zapisz to. Następnie utwórz plik CSS do nadawania stylu temu pudełku alertów. Kod pliku CSS jest również tutaj poniżej.
Najpierw zastosuj styl do „ostrzeżenia”. Ustaw swoją „pozycję” jako absolutną, co oznacza, że możemy umieścić elementy w dowolnym miejscu. Wyściółka jest tutaj, aby stworzyć dodatkowe odstępy w elemencie. Wartość wyściółki wynosi „20px”. Kolor tła jest czerwony. Kod koloru czerwonego to „#F44336”. Kolor tekstu jest biały. Następnie zastosuj styl na „CloseBtn”, w którym naprawiamy lewy margines „15px”, a kolor jest „biały”.
Waga fałdu mówi, jak gruba lub cienka jest czcionka lub cienka. W tym CAE jest „odważny”. Rodzina czcionek jest używana do stylu czcionki, która jest czcionką „Cambria”. Kolor „X” jest „brązowy” i „unosi się” po prawej stronie skrzynki alertowej. Rozmiar czcionki jest ustawiony jako „22px”, a „wysokość linii” to „20px”. „Kursor” jest tutaj jako „wskaźnik”. Służy to do określenia rodzaju kursora. Tutaj rodzaj kursora jest ustawiony jako „wskaźnik”, więc wskaźnik jest wyświetlany użytkownikowi. Stosujemy styl do mojego pole alertu w tym pliku CSS, a także połączyliśmy ten plik do pliku HTML. Następnie wygeneruj wyjście w przeglądarce. Zobacz dane wyjściowe na obrazie:
Przykład nr 2:
Utworzymy jednocześnie więcej niż jedno pole alertów, zmieniając powyższy kod. Możesz zobaczyć, w jaki sposób tworzymy pola alertów w tym kodzie poniżej.
Kod HTML jest taki sam, jak wyjaśniono w pierwszym przykładzie. Musimy wyświetlić nagłówek „komunikaty o alercie”, więc do tego używamy
> Tag. Następnie akapit jest wyświetlany, który jest zapisany w środku „
”„
”Tagi. Następnie użyj tagów „” i „”, które wyjaśniliśmy w pierwszym przykładzie. To pole alertu wyświetli „Niebezpieczeństwo”. Tworzymy cztery pola alertów, używając tej samej metody tutaj w tym kodzie.Teraz tutaj stylizujemy pola wiadomości ostrzegawczy za pomocą CSS. Najpierw musimy wyrównać tekst do środka ekranu. Więc forithis użyliśmy „Text-Align: Center”. Teraz użyj „.alarm.Niebezpieczeństwo ”, które stosuje wszystkie styl podane w kręconych klamrach tego do„ niebezpieczeństwa ”. Tutaj widać, że kolor tła jest ustawiony jako „czerwony”. Kiedy pojawi się to pole alertów, kolor tego będzie „czerwony”. Tekst napisany w tym będzie styl „algierski”.
Tutaj, aby zastosować styl czcionki, użyliśmy „rodziny czcionki”. Kolor czcionki lub tekstu jest ustawiony jako „czarny”. Następnie kolor następnego pola alarmowego jest „fioletowy”. Pudełko alertów „Success” i styl czcionki to „Times New Roman”. Musimy również zmienić kolor tekstu za pomocą „koloru” i ustawić go jako „oranbed”. Następnie musimy stylizować trzecie pole alertu: „Alarm.informacje ”. Wybieramy jasnoniebieski kolor tła, a kod to „#219643”. Styl czcionki, który wybraliśmy tym razem, to „Arial”, a kolor tego jest „niebieski”.
Mamy również czwarte pole alerty o nazwie „Ostrzeżenie”. Kolor tła tego ostrzegawczego skrzynki alertowej to „czarny”, „Font Family” to „Georgia”, a kolor jest „biały”. Czarne tło i biały tekst lub czcionka. Teraz nadszedł czas, aby stylizować przycisk zamknięcia. W tym celu użyliśmy „.CloseBtn ”. W tym musimy stylizować ten przycisk zamknięcia. Ustaw „margines-lew” jako „15px” i kolor na „biały”. Używana jest tu czcionka, którą omówiliśmy w powyższym kodzie. Używamy font-worki jako „pogrubionego” i unosimy go do „prawej”. „Rozmiar czcionki” i „wysokość linii” to odpowiednio „22px” i „20px”. Rodzaj „kursora” to „wskaźnik”.
W wyjściu widać, że tekst powyżej pola alertów jest wyśrodkowany, a wszystkie pola alertów są w różnych kolorach. Styl czcionki i kolor czcionki są również różne w każdym pudełku alertów. Wszystkie te styl są wykonywane za pomocą CSS.
Wniosek:
W tym samouczku szczegółowo omówiliśmy komunikaty alertów. Wyjaśniliśmy, jak utworzyć pole alertu w HTML, jak stylizować pole alertu za pomocą CSS i jak połączyć plik HTML z plikiem CSS. Wykazaliśmy przykłady tutaj w tym samouczku, a także pokazujemy wyniki kodów, które napisaliśmy w HTML i CSS. Wyjaśniliśmy również każdą wiersz tych kodów, aby łatwo było nauczyć się tej koncepcji. Ten samouczek będzie dla Ciebie pomocny w stylizacji i tworzeniu skrzynek alertów na twoich stronach internetowych.