Obramowanie przycisków CSS
Przykład 01: Używanie CSS do przycisku stałej granicy w pliku HTML
W tym przykładzie będziemy używać znacznika stylów CSS do modyfikacji przycisku w pliku HTML. Dodamy solidną obramowanie do domyślnego przycisku, który nie ma granicy, aby wyróżnić ją z tła i reszty strony.
Otworzyliśmy znacznik stylu i rozpoczęliśmy parametr przycisku do stylizacji. W tym przycisku podaliśmy kolor tła za pomocą kodu referencyjnego HTML. Następnie daliśmy przycisk granicę, pisząc ją jako słowo kluczowe i daliśmy mu trzy właściwości: rozmiar granicy przycisku, stan granicy, a następnie kolor granicy. Następnie w stylu podaliśmy przycisk trochę wyściółki, wyrównania tekstu i wyświetlania, aby przycisk był regulowany w przeglądarce i bardziej widoczny.
Następnie zamknęliśmy styl i tag na głowę i przenieśliśmy się do znacznika ciała. W tym znaczniku podaliśmy naszą stronę HTML nagłówek za pomocą znacznika H1, a następnie otworzyliśmy znacznik przycisku. Następnie zamkniemy oba tagi i zapiszemy ten skrypt w „.Format HTML ”, aby otworzyć go w naszej przeglądarce.
Po uruchomieniu skryptu w naszej przeglądarce otrzymamy powyższe dane wyjściowe. Powyższe wyjście pokazuje, że przycisk ma styl tak, jak określono w znaczniku stylu w nagłówku pliku.
Przykład 02: Używanie CSS do podania kropkowanej granicy przycisku w pliku HTML
W tym przykładzie dodamy kropkowaną granicę do domyślnego przycisku, który nie ma granicy, aby odróżnić ją od tła i reszty strony. Skrypt zostanie opracowany w Notepad ++ i użyje znacznika stylu CSS do modyfikacji przycisku w pliku HTML.
Otworzyliśmy znacznik stylu i zaczęliśmy dostosowywać parametr przycisku. Użyliśmy kodu referencyjnego HTML, aby nadać kolor tła przycisku. Następnie podaliśmy przycisk granicę, pisząc ją jako słowo kluczowe i podając mu trzy właściwości: „4px”, który jest wielkością granicy; „Kropkowane”, które jest formą granicy; i „czarny”, który jest kolorem granicy.
Następnie dodaliśmy wyściółkę, wyrównanie tekstu, ustawienia wyświetlania i rozmiar czcionki do przycisku, aby było bardziej regulacyjne i zauważalne przeglądarki. Styl i znaczniki głowy zostały następnie zamknięte. Dalej jest znacznik ciała. Użyliśmy znacznika H1, aby podać naszą stronę HTML nagłówek, a następnie otworzyliśmy znacznik przycisku w znaczniku ciała. Napisaliśmy tekst, który pojawi się na przycisku w tym znaczniku. Następnie zamkniemy oba tagi i zapiszemy ten skrypt w „.format HTML ”, abyśmy mogli uruchomić go w naszej przeglądarce.
Otrzymamy powyższe dane wyjściowe po uruchomieniu skryptu w naszej przeglądarce. Snippet pokazuje, że przycisk ma czarną kropkowaną granicę zgodnie z definicją w znaczniku stylu w nagłówku pliku.
Przykład 03: Używanie CSS, aby nadać przycisk solidną obramowanie okrągłego w pliku HTML
W tym przykładzie użyjemy tagów stylów CSS, aby zmienić wygląd przycisku w pliku HTML. Utworzymy solidną obramowanie z okrągłymi zakątkami i trochę koloru, aby odróżnić domyślny przycisk od pierwszego planu i reszty strony.
Otworzyliśmy znacznik stylu w powyższym skrypcie i zaczęliśmy modyfikować parametr przycisku w nagłówku pliku HTML. Następnie podaliśmy przycisk granicę, pisząc ją jako słowo kluczowe i przypisując jej trzy właściwości: „4px”, który jest rozmiarem granicy; „Solid”, który jest kształtem granicy; i „czarny”, który jest kolorem granicy. Następnie dodaliśmy kolejną właściwość graniczną o nazwie Border-Radius, a jej wartość jest przypisywana w pikselach, aby wokół krawędzi granicznych. Następnie zamknęliśmy styl i znaczniki na głowie, zanim przejdziemy do znacznika ciała. Napisaliśmy tekst między znacznikami przycisków, które pojawią się na przycisku.
Jak pokazuje powyższe wyjście, granica przycisku ma zaokrąglone krawędzie i wszystkie inne styl, które zdefiniowaliśmy w nagłówku pliku.
Przykład 04: Używanie wbudowanego CSS do dodania granicy do przycisku w pliku HTML
W tym przykładzie będziemy używać stylizacji CSS na przycisku, aby nadać mu granicę w pliku HTML. Cała stylizacja, która zostanie wykonana na przycisku, zostanie podana wewnątrz znacznika przycisku.
W powyższym skrypcie będziemy wykonywać wszystkie styl w treści pliku. Najpierw otworzymy znacznik H1, aby nagłówek na stronę. Następnie otworzymy znacznik przycisku. W tym znaczniku zdefiniujemy styl przycisku. Zainicjujemy styl słowo kluczowe i zaczniemy nadawać mu różne właściwości, takie jak rozmiar, forma, kolor, wyściółka i wyrównanie. Następnie zamknęliśmy tag i napisaliśmy tekst, który pojawi się na przycisku. Następnie zamknęliśmy wszystkie tagi i uruchomiliśmy ten plik, aby uzyskać poniższe wyjście:
Jak widać na wyjściu, przycisk zawiera całą stylistykę, którą dostarczyliśmy w znaczniku przycisku i pomyślnie dodaliśmy obramowanie do przycisku za pomocą wbudowanego CSS.
Przykład 05: Używanie CSS do podania podwójnej granicy przycisku w pliku HTML
W tym przykładzie dodamy podwójną granicę do przycisku. Skrypt zostanie opracowany w Notepad ++ i użyje metody tagu stylu CSS do modyfikacji przycisku w pliku HTML.
Otworzyliśmy znacznik stylu i zaczęliśmy zmieniać element przycisku w nagłówku pliku HTML. Granica została następnie dodana do przycisku, pisząc ją jako słowo kluczowe i przypisując jej trzy właściwości: „10px”, rozmiar granicy; „Podwójne”, kształt granicy; i „czarny”, kolor granicy.
Przycisk zawiera wszystkie styl z znacznika stylu i pomyślnie nałożyliśmy granicę do przycisku za pomocą CSS.
Wniosek
W tym artykule omówiliśmy granicę przycisku za pomocą CSS w pliku HTML. Domyślny przycisk przeglądarki zwykle nie ma stylizacji i jest po prostu prostym białym kwadratem. Używamy więc CSS do stylizacji tego elementu i sprawiają, że jest dostosowywany do strony HTML. W tym artykule omówiliśmy różne przykłady, w których dodaliśmy granicę do przycisku, stosując różne podejścia, a wszystkie te przykłady zostały zaimplementowane w notatniku++.