Este artigo demonstrará as seguintes abordagens:
- Método 1: Desenhando um símbolo de marca de seleção/carrapato usando propriedades CSS
- Método 2: Inserir uma marca de seleção/carrapato usando caracteres Unicode
Método 1: Desenhando um símbolo de marca de seleção/carrapato usando propriedades CSS
Para desenhar um símbolo de escala, o primeiro requisito é visualizar como a marca de escala ficará no final, pois ela pode ser criada em qualquer tamanho de cor ou forma. Será melhor entender isso com a ajuda de um exemplo.
Exemplo Na instrução HTML acima, um “ div ” elemento foi adicionado com o id declarado como “ marca de seleção ”. Ao estilizar o elemento usando as propriedades CSS, adicione um “ eu ia ” para se referir ao elemento HTML e, em seguida, especificar as propriedades dentro dele: O elemento de estilo CSS acima tem as seguintes propriedades: Isso criará uma marca de seleção simples de cor verde ou um símbolo de verificação exibido no centro da interface da página da web “ 45px 'alta e' 20px ' largo: Há também alguns caracteres Unicode que inserem automaticamente os símbolos de marca de escala na saída sem precisar estilizar e definir valores de parâmetro para eles. Por exemplo, o caractere Unicode “ U+2713 ” ajuda a adicionar um símbolo de escala simples na saída. Da mesma forma, o caractere Unicode “ U+2713 ”ajuda a inserir o símbolo branco pesado na saída. Para saber como adicionar esses caracteres Unicode em um documento HTML por meio de um guia completo, clique em aqui . Uma marca de seleção ou um símbolo de escala pode ser desenhado criando primeiro um elemento HTML com um id ou uma classe e, em seguida, adicionando o seletor de id ou classe no elemento de estilo CSS para se referir a esse elemento. Para criar a forma de uma marca de seleção na interface da página da Web, diferentes propriedades CSS como “ altura ”, “ largura ”, “ girar ' e ' cor ” pode ser usado de acordo com o tipo e tamanho da marca de seleção que se deseja. Este blog demonstra o método para desenhar uma marca de seleção/carrapato usando CSS.
Por exemplo, o desenvolvedor deseja desenhar uma marca de seleção simples de cor verde usando propriedades de estilo CSS e exibi-la no centro da interface. No código HTML, é necessário criar um “
< div eu ia = 'marca de seleção' >< / div >
#checkmark
{
transformar: girar ( 45 graus ) ;
altura : 45 px;
largura : 20 px;
margem esquerda: cinquenta %;
border-bottom: 9px solid darkolivegreen;
borda direita: 9px sólido verde-oliva escuro;
}
Método 2: Inserir uma marca de seleção/carrapato usando caracteres Unicode
Conclusão