Rozmiar przycisku CSS
Przykład 01:
W tym przykładzie użyjemy właściwości szerokości i wysokości dla elementu przycisku, aby zwiększyć jego rozmiar. W tym przykładzie użyjemy podejścia CSS Style Tag, aby dodać kilka właściwości. Najpierw przyjrzymy się domyślnym rozmiarze elementu przycisku obecnego w pliku HTML.
Jak widzimy w danym skrypcie, nie zmieniliśmy rozmiaru przycisku. Przy następnym wyjściu możemy zobaczyć, że rozmiar przycisku jest bardzo mały i nie jest możliwy do strony internetowej.
Więc teraz dodajemy styl do przycisku. Najpierw otwieramy znacznik głowy pliku. W tym znaczniku nazywana jest styl CSS. W tym znaczniku dodajemy wszystkie właściwości elementu przycisku. Piszemy wszystkie właściwości elementu przycisku wewnątrz nawiasu klasy przycisku. Najpierw ustawiamy kolor tła na „żółty”. Następnie ustawiamy szerokość w formacie piksela na „100px”. Na koniec ustawiamy wysokość w formacie piksela na „30px”. Zamykamy styl i znaczniki głowy po zakończeniu wszystkich formatów. Następnie idziemy do znacznika ciała. Piszemy nagłówek strony za pomocą znacznika H1 w znaczniku nadwozia, a następnie otwierają znacznik przycisku. Klasa z znacznika stylu jest wywoływana w znaczniku przycisku. Następnie zamykamy znacznik przycisku z tekstem wyświetlanym na przycisku pomiędzy nimi, a także znacznikiem ciała.
Jak wyjaśniono wcześniej, dodaliśmy kod w poprzednim skrypcie. Teraz otwieramy ten nowy skrypt w naszej przeglądarce po zapisaniu go we właściwym formacie.
W danym wyjściu widzimy, że przycisk ma wszystkie formatowanie, w tym rozmiar określony w klasie stylu w nagłówku pliku.
Przykład 02: Używanie wbudowanego CSS do zmiany rozmiaru przycisku w pliku HTML
W tym przykładzie użyjemy inline CSS do zmiany rozmiaru domyślnego elementu przycisku pliku HTML. Wszystkie właściwości stylu zostaną przypisane wewnątrz znacznika przycisku. Jest to niekonwencjonalna metoda dodawania CSS do dowolnego elementu i będzie powiązana tylko z bieżącym elementem.
Jak widzimy w poprzednim fragmencie, przeprowadziliśmy bezpośrednio do korpusu pliku, ponieważ cała zawartość byłaby w znaczniku ciała. Najpierw otwieramy tag H1, aby napisać nagłówek dla strony, a następnie zamykamy. Następnie otwieramy przycisk. W tym znaczniku wywołujemy atrybut stylu po jego słowie kluczowym. Następnie piszemy wszystkie właściwości elementu przycisku w odwróconych przecinkach i oddzielamy je za pomocą postaci półkolonowych. Najpierw przypisujemy kolor tła „Żółty”. Następnie przypisujemy szerokość w formacie piksela. W końcu przypisujemy wysokość, również w formacie piksela. Następnie zamykamy znacznik przycisku z tekstem pomiędzy, który pojawi się na przycisku. I zamknij wraz z nim znacznik nadwozia. Teraz zapisujemy ten plik w „.Format HTML ”i otwórz go na naszej przeglądarce, aby uzyskać następujący wynik:
Jak widać na wyjściu naszego skryptu, nagłówek i przycisk z znacznika ciała są widoczne. Przycisk zawiera wszystkie wartości zdefiniowane w znaczniku, w tym wysokość i szerokość.
Przykład 03: Zwiększenie rozmiaru przycisku, gdy unosi się z naszym kursorem w pliku HTML
W tym przykładzie użyjemy właściwości szerokości i wysokości elementu przycisku, aby uczynić go większym, tylko wtedy, gdy wskaźnik się skończy. W tym przykładzie użyjemy tagów stylów CSS, aby dodać liczne atrybuty i efekty do elementu przycisku.
W tym przykładzie dostosowujemy przycisk za pomocą tagów stylów CSS. Najpierw otwieramy znacznik głowy pliku. A potem nazywamy stamtąd tag stylu CSS. W tym znaczniku dodajemy wszystkie atrybuty elementu przycisku. Wewnątrz nawiasu klasy przycisku wprowadzamy wszystkie właściwości elementu przycisku; W tym przykładzie ustawiamy kolor tła na „żółty.„Następnie otwieramy klasę przycisków, która dziedziczy metodę o nazwie„ Watch ”. W tej funkcji wykonujemy następujące czynności: ustawiamy szerokość w formacie piksela na „100px” i ustawiamy wysokość w formacie pikselowym na „30px”. Po zakończeniu formatowania zamykamy styl i znaczniki głowy. Następnie idziemy do znacznika ciała. Używamy znacznika H1, aby utworzyć tytuł strony w znaczniku ciała, a następnie otwórz znacznik przycisku. Znacznik przycisku używa klasy z znacznika stylu i ma tekst, który pojawia się na przycisku pomiędzy. Następnie zamykamy znacznik przycisku i znacznik ciała.
Jak widać na poprzednim wyjściu, rozmiar i kolor tła zmieniły. Wynika to z faktu, że funkcja zawisu ma wszystkie te właściwości zdefiniowane w znaczniku stylu pliku nagłówka.
Przykład 04: Za pomocą rozmiaru czcionki do poprawy rozmiaru przycisku za pomocą CSS
W tym przykładzie zdecydujemy się na inną metodę zmiany rozmiaru przycisku. Właściwość rozmiaru czcionki zostanie użyta do zwiększenia rozmiaru przycisku za pomocą znacznika stylu CSS.
Najpierw otwieramy znacznik stylu w nagłówku pliku i tworzymy klasę stylistyczną dla przycisku. W tej klasie przypisujemy kolor tła do przycisku. Następnie przypisujemy również rozmiar czcionki. W takim przypadku jest ustawiony na „25px”. Następnie zamykamy odpowiednio klasę, styl i głowę. Następnie znacznik ciała ma nagłówek i znacznik przycisku, w którym odziedziczono w niej klasę stylu. Następnie zamykamy znaczniki i zapisujemy plik, aby otworzyć go w naszej przeglądarce.
Na ekranie wyjściowym możemy zobaczyć, że przycisk ma zwiększony rozmiar od domyślnego przycisku, który zapewnia HTML z powodu zmiany właściwości rozmiaru czcionki.
Wniosek
W tym artykule omówiliśmy rozmiar elementu przycisku obecnego w języku znaczników hipertekstu. Domyślny przycisk ma bardzo mały rozmiar, co utrudnia nawigację na stronie internetowej. Tak więc zastosowaliśmy różne podejścia w CSS, takie jak metka stylu i podejście CSS. Najczęstszą właściwością używaną do zmiany rozmiaru są właściwość szerokości i wysokości przycisku. Omówiliśmy tę koncepcję i wdrożyliśmy to w notatniku++. Wdrożyliśmy również podejście wielkości czcionki, aby zwiększyć rozmiar przycisku.