Tipos de seletores de atributos CSS - Semalt Expert
Um elemento HTML consiste em uma classe, ID e atributos. Um seletor de atributos seleciona os elementos HTML que apresentam um atributo ou com um valor de atributo. Os seletores de atributo fornecem um método simples de aplicar estilos em elementos HTML com um atributo ou valor de característica específico. Os seletores de atributo são definidos por dois colchetes, que incluem o atributo com seu valor. Ainda assim, você pode colocar um seletor de tipo de elemento antes dele. O seletor CSS [attribute] aplica as regras de estilo a um elemento se e quando ele consiste em uma determinada característica.
Tipos de seletores de atributos
Existem diferentes tipos de seletores de atributos, cada um dos quais pode ser usado para casos separados:
O seletor CSS [attribute | = "value"] destaca elementos que possuem uma característica específica e começa com um valor definido.
O seletor CSS [attribute ~ = "value"] é utilizado para encontrar elementos com um valor de propriedade com uma palavra específica.
O seletor CSS [attribute ^ = "value"] localiza elementos com um valor de propriedade implorando por um valor específico. O valor não é necessariamente uma palavra inteira.
O seletor CSS [attribute $ = "value"] localiza componentes que possuem um valor de atributo que termina com um valor definido.
Aplicativos dos seletores de atributos CSS
Existem várias maneiras pelas quais o seletor de atributos pode ser usado em vez de usar o seletor universal, de classe ou de ID
O uso mais comum de seletores de atributos é nas entradas. Isso inclui seletores de texto, seletores de caixa de seleção, seletores de senha, seletores de arquivo, seletores ocultos, seletores de senha, seletores de rádio, seletores de redefinição e outros.
Formas de estilo
Os seletores de atributos são muito úteis ao estilizar formulários sem classe ou ID.
Links de estilo
Por exemplo, os seletores de atributos podem ser usados para criar um estilo de blog em que você tenha uma lista de links para sites amigos. No entanto, você deseja que cada link tenha um estilo diferente. A maneira tradicional de fazer isso é atribuir um nome de chamada que exigiria mais marcações. Ainda assim, você pode usar o enésimo filho, o que exige que as ordens nunca mudem. O uso dos seletores de atributos facilita muito, pois existe um atributo que você pode segmentar.
Entradas de fronteira
O estilo de elementos de bordas usando o atributo de imagem de borda CSS é uma maneira elegante de adicionar imagens ao corpo. Permite definir uma imagem como a borda de um elemento. A imagem da borda pode ser redimensionada, cortada e repetida de diferentes maneiras para garantir que caiba na área da borda. O atributo raio das bordas permite adicionar cantos arredondados sem usar imagens. A propriedade define a forma do canto.
Cores de estilo
Os seletores de atributos CSS simplificam o estilo de todos os elementos que possuem um valor de cor específico. Você pode usar as notações de palavras-chave em cores, RGB (), RGBA (), HSL () e HSLA (). Os valores de cores RGBA são uma extensão do modelo de cores RGB com um canal que define a opacidade de uma cor. O valor dos parâmetros varia de 1,0 (opaco) a 0,0 (transparente)
O modelo de cores HSL é explicado como (Hue_saturation_Lightness). A representação de matiz está na forma de ângulo (0-360) ou na roda de cores. A saturação e a luminosidade são medidas como porcentagens: 0% da saturação representa sombra ou cinza, enquanto 100 representa cores. 100% de luminosidade representa branco, enquanto 0% é preto.