W tym artykule zademonstrujemy następujące podejścia:
- Metoda 1: Rysowanie symbolu zaznaczenia/zaznaczenia za pomocą właściwości CSS
- Metoda 2: Wstawianie znacznika wyboru/zaznaczenia przy użyciu znaków Unicode
Metoda 1: Rysowanie symbolu zaznaczenia/zaznaczenia za pomocą właściwości CSS
Aby narysować symbol kleszcza, pierwszym wymaganiem jest wizualizacja, jak znacznik będzie wyglądał na końcu, ponieważ można go utworzyć w dowolnym kolorze lub kształcie. Lepiej będzie to zrozumieć na przykładzie.
Przykład
Na przykład programista chce narysować prosty znacznik wyboru w kolorze zielonym, używając właściwości stylu CSS i wyświetlić go na środku interfejsu. W kodzie HTML wymagane jest utworzenie „
< dz ID = „znacznik wyboru” >< / dz >
W powyższej instrukcji HTML „ dz ” został dodany z id zadeklarowanym jako „ znacznik wyboru ”.
Podczas stylizowania elementu za pomocą właściwości CSS dodaj „ ID ”, aby odnieść się do elementu HTML, a następnie określić właściwości w nim zawarte:
#znacznik wyboru
{
przekształcać: obracać ( 45 st ) ;
wysokość : 45 pikseli;
szerokość : 20 pikseli;
lewy margines: pięćdziesiąt %;
obramowanie na dole: 9px jednolicie ciemnooliwkowozielone;
obramowanie po prawej: 9 pikseli jednolite ciemnooliwkowozielone;
}
Powyższy element stylu CSS ma następujące właściwości:
- „ przekształć: obróć (45 stopni) ” obraca proste pionowe i poziome linie w taki sposób, że tworzy kształt symbolu kleszcza.
- „ wysokość ” ustawia wysokość symbolu zaznaczenia na „ 45px ”.
- „ szerokość „właściwość tworzy symbol” 20px ' szeroki.
- „ lewy margines ” wyrównuje symbol zaznaczenia do środka interfejsu strony internetowej.
- Następnie „ granica-dół ' I ' granica-prawo ” właściwości ustawiają wagę obramowania obu linii na „ 9px ” i zdefiniuj „ ciemnooliwkowozielony ” dla obu linii, które tworzą pełny symbol kleszcza.
Spowoduje to utworzenie zielonego prostego znacznika wyboru lub symbolu zaznaczenia wyświetlanego na środku interfejsu strony internetowej „ 45px „wysokie i” 20px ' szeroki:
Metoda 2: Wstawianie znacznika wyboru/zaznaczenia przy użyciu znaków Unicode
Istnieją również znaki Unicode, które automatycznie wstawiają symbole znaczników w danych wyjściowych bez konieczności stylizowania i definiowania dla nich wartości parametrów. Na przykład znak Unicode „ U+2713 ” pomaga dodać prosty symbol zaznaczenia na wyjściu. Podobnie znak Unicode „ U+2713 ” pomaga wstawić biały ciężki symbol zaznaczenia na wyjściu. Aby dowiedzieć się, jak dodawać te znaki Unicode w dokumencie HTML za pomocą kompletnego przewodnika, kliknij Tutaj .
Wniosek
Znacznik wyboru lub symbol kleszcza można narysować, najpierw tworząc element HTML z identyfikatorem lub klasą, a następnie dodając identyfikator lub selektor klasy w elemencie stylu CSS, aby odnieść się do tego elementu. Aby utworzyć kształt znacznika wyboru/haczyka w interfejsie strony internetowej, różne właściwości CSS, takie jak „ wysokość ”, „ szerokość ”, „ obracać się ' I ' kolor ” można użyć zgodnie z typem i rozmiarem żądanego znacznika wyboru. Ten blog demonstruje metodę rysowania znacznika wyboru/haczyka za pomocą CSS.