Usuário CSS Selecionar

A propriedade "Select User-Select" é usada no CSS para especificar se o texto será selecionado pelo usuário ou não. Quando queremos controlar se o usuário selecionará o texto fornecido ou não, usamos esta propriedade "seleciona do usuário" e definirá seu valor de acordo com a nossa escolha. Temos valores diferentes para esta propriedade "seleciona do usuário". Quando definimos o valor "nenhum" para esta propriedade "Select", o usuário não poderá selecionar o texto fornecido. Se não usarmos essa propriedade, ela será definida como padrão e seu valor padrão é "automático", o que significa que o usuário selecionará o texto fornecido clicando duas vezes este texto. Neste guia, exploraremos esta propriedade "Select" em detalhes. Faremos exemplos e usaremos um valor diferente para esta propriedade "seleciona do usuário" em cada exemplo.

Exemplo 1

Para começar, criamos um novo arquivo no software, que neste guia é o código do Visual Studio. Quando criamos um novo arquivo, podemos escolher o idioma e selecionar HTML. O código HTML deve então ser criado. O Código do Visual Studio nos permite adquirir instantaneamente as tags fundamentais entrando “!”E depois clicando em“ Enter ”. Então, estamos aproveitando essa capacidade e coletando todas essas tags fundamentais. Utilizaremos a propriedade selecionada do usuário no CSS e vincularemos esse arquivo ao arquivo CSS adicionando a tag "Link" na tag html hatela. Temos um cabeçalho simples e uma div neste código HTML. Também escrevemos algum texto dentro da tag de título "H1" e também na tag "Div". Depois de concluir este código, salve -o e prossiga para o arquivo CSS. Agora, aplicaremos a propriedade "Select" a esses textos no arquivo CSS.

Estamos selecionando "RGB" como a "cor" do cabeçalho e os valores que estamos utilizando aqui são "RGB (16, 100, 8)", que representa a cor da sombra "verde". Então, "argeliano" é selecionado como a "família da fonte" e também decoramos esse título colocando "sublinhado" aqui. Adicionamos essa "sublinhada", utilizando a propriedade "Decoração de texto". Selecionaremos este texto de título clicando duas. O valor padrão desta propriedade é "automático". Acabamos de definir "nenhum" como o valor desta propriedade "seleciona do usuário" para o elemento "div".

Vamos colocar a propriedade "WebKit-User-Select", pois o Chrome suporta apenas esse prefixo e define seu valor como "nenhum". Em seguida, utilizamos o "MS-User-Select" que é usado para especificar o valor da palavra-chave que é "nenhum". Isso significa que o usuário não poderá selecionar o texto que está escrito dentro da div. Também usamos apenas a propriedade "Select" e configuramos como "nenhum". Agora, quando esse elemento div aparecer na tela, o usuário não selecionará o elemento div para o texto.

A saída deste código mostra que não há texto selecionado mostrado nesta imagem, pois não permite que o usuário selecione o texto da div. Isso ocorre devido ao valor "nenhum" da propriedade "Select".

Exemplo 2

Temos um cabeçalho simples e um div aqui. Também incluímos algum texto na tag "H1", bem como a tag "Div". Agora, aplicaremos a propriedade "Select ao usuário" neste texto div.

Escolhemos o "RGB" como "cor" do cabeçalho e os números que escolhemos são "RGB (87, 23, 4)", que é a cor da sombra "marrom". Em seguida, escolhemos "argelino" como a "família da fonte" e adicionamos "sublinhado" a esse título também. Para o elemento "div", simplesmente definimos a propriedade "Select" para "Auto". Estamos usando a propriedade "WebKit-User-Select" aqui porque o Chrome permite apenas esse prefixo e altera seu valor para "Auto".

Em seguida, usamos "MS-User-Select" para especificar o valor da palavra-chave, que é "automático" neste caso. Também estamos indicando que o usuário poderá selecionar o texto clicando duas. Também definimos a propriedade "Select" para "Auto". Quando esse elemento div aparecer na tela, o usuário seleciona este texto clicando duas vezes. Em seguida, estamos definindo o valor "20px" para o "tamanho da fonte" do "div" e "Times New Roman" como a "família da fonte".

Quando a saída deste código renderiza na tela, parece a primeira captura de tela. Podemos selecionar esses textos clicando duas.

Na segunda captura de tela, você também pode ver o texto selecionado enquanto selecionamos o texto clicando duas vezes. O texto selecionado é destacado nesta captura de tela.

Exemplo 3

O arquivo html é o mesmo que acima. Acabamos de substituir o elemento div pelo parágrafo e alteramos o texto que está escrito dentro desta tag de parágrafo.

Alinhamos todos os elementos "do corpo" no "centro". Em seguida, use “RGB (96, 18, 199)” como a “cor” do cabeçalho e a “família da fonte” é a mesma dos exemplos acima. Como o Chrome aceita apenas o prefixo "webkit", utilizamos a propriedade "Webkit-User-Select" e definimos seu valor como "texto". O valor do "Moz-User-Select" está definido como "texto". Em seguida, usamos "MS-User-Select" para especificar o valor da palavra-chave, que é "texto". A propriedade "Select User-Select" também está definida como "Texto", o que significa que o usuário pode selecionar o texto usando esta propriedade. Não impede o usuário de selecionar texto. O "tamanho da fonte" deste "P" é "22px" e "Calibri" é selecionado aqui como a "família da fonte" e escolha "verde" como a "cor" do texto.

A saída mostra que selecionamos o texto de qualquer lugar que desejarmos ao definir o valor da propriedade selecionada do usuário como "texto" neste exemplo.

Exemplo 4

Neste código, apenas alteramos o texto que está escrito dentro do contêiner div. Agora, também aplicaremos a propriedade "Select" neste exemplo, mas com um valor diferente.

Todos os elementos "do corpo" estão alinhados no "centro". Em seguida, use "Maroon" como a "cor" do cabeçalho, e a "família da fonte" é a mesma que nos exemplos antes. Definimos a palavra-chave "tudo" para o valor de "WebKit-User-Select", "Moz-User-Select", "MS-User-Select" e também para a sintaxe padrão que é "selecionada". Quando usamos "tudo" como o valor desta propriedade "Select", ele selecionará o texto com um único clique do mouse em vez de um clique duas vezes. Portanto, poderemos selecionar o texto div com apenas um único clique e não precisamos clicar duas vezes nele para selecionar este texto. Também utilizamos "23px" para o "tamanho da fonte" e estilizam este texto no estilo de fonte "itálico", e "ousado" este texto com a ajuda da propriedade "Fonte-peso".

A saída antes da seleção de texto ser exibida na primeira captura de tela. Estamos fornecendo a outra captura de tela em que selecionamos o texto inteiro com apenas um único clique do mouse.

Nesta captura de tela, o texto é selecionado. Ou podemos dizer que o texto é destacado quando usamos um único mouse clique neste texto. Não precisamos clicar duas vezes no texto para selecioná-lo, porque usamos a palavra-chave "tudo" e também seleciona o texto inteiro, como você pode ver na captura de tela abaixo.

Conclusão

Este guia foi criado para ajudá-lo a entender a propriedade CSS "Select". Passamos por esse tópico em detalhes e analisamos muitos exemplos de como usamos a propriedade "Select User-Select" no código CSS. Já abordamos como utilizar a propriedade selecionada pelo usuário para controlar como o usuário seleciona o texto ou se o usuário selecionará o texto ou não. Também abordamos como definir os valores para esta propriedade e explicamos todos os valores desta propriedade em detalhes aqui. Reunimos um guia abrangente para você, no qual incluímos o código e explicações detalhadas de como usá -lo, bem como os resultados.