CSS Att
Neste guia, exploraremos a função att () no CSS e usaremos esta função para recuperar o valor. Explicaremos como usar essa função no CSS e como ele retornará o valor na saída no local desejado. Faremos alguns exemplos aqui e deixaremos esse conceito de função att () claro para você.
Exemplo 1
Devemos ter um código HTML para usar esta função att () no CSS. Podemos usar esta função att () em nosso código CSS para recuperar os valores usados no HTML. O software que usamos para executar esses exemplos neste guia é o código do Visual Studio. Abrimos um novo arquivo no código do Visual Studio e depois selecionamos o idioma no arquivo como HTML. O arquivo criado é o arquivo html. Em seguida, escrevemos o código HTML neste arquivo. Quando salvamos esse arquivo após concluir o código, este arquivo é salvo com o “.Extensão de arquivo html ”.
No código HTML, criamos um título 1 usando o “
”. Em seguida, usamos a tag "" na qual criamos um "link" do "Google" e depois escrevemos o "Google Link", que é exibido na tela. Em seguida, feche a tag "". Usamos a função att () no "href" no CSS, para que o link apareça com o texto.
Código CSS:
Aqui, criamos o arquivo CSS. Podemos usar a função att () para recuperar os dados. Devemos usar o “.Extensão do arquivo CSS ”ao salvar este arquivo.
O "H1" representa o título que criamos no arquivo html. Alinhamos este caminho para o centro da "tela" usando o "alinhamento de texto". Em seguida, usamos o "a: antes", então quando usamos a função "att ()", ele exibirá o valor desejado que recuperamos antes do conteúdo. Este "conteúdo" define os dados que escrevemos no arquivo HTML usando a propriedade personalizada. O "Att (href)" obtém os dados do "href", que é o link. E coloca antes do conteúdo e coloque o "=>" após o "href".
Em seguida, estilizamos o "a" que é usado para definir o hiperlink no html. Definimos o "estilo de fonte" como "itálico", para que ele renderá na tela em estilo "itálico". Além disso, definimos a “cor” como “azul”. Esta propriedade "cor" define a cor da fonte. O "tamanho da fonte" está definido como "30px". Podemos obter a saída depois de vincular e salvar os códigos HTML e CSS pressionando "Alt+B" na página HTML.
Saída:
A saída do código anterior é refletida na seguinte imagem:
O link que usamos no código HTML é exibido aqui, pois usamos o "att ()" para recuperar este link. Usamos "antes" para que este link seja exibido antes do conteúdo. Aqui, o conteúdo é "link do google". O valor que queremos recuperar é o link do Google que salvamos no "href" no código HTML.
Exemplo #2
Para este exemplo, usamos o mesmo arquivo html. Mas vamos fazer algumas alterações no código CSS e usar a função "att ()" novamente no código HTML anterior.
Novamente, o cabeçalho está alinhado no "centro". Usamos o "depois" com "A"; portanto, quando a função "att ()" recupera o valor, esse valor será exibido após o conteúdo. Aqui, usamos o "conteúdo", então temos uma seta "=>" e depois usamos a função "att ()". Quando tivermos a saída disso, você verá que o link aparece após o conteúdo. Neste exemplo, usamos uma cor de fonte "vermelha" com um "tamanho de fonte de 30px".
Saída:
Esta saída mostra o link após o conteúdo. Primeiro exibe o conteúdo que é "link do google". Em seguida, ele exibe o link dele, que obtemos usando a função "afr ()" do CSS.
Exemplo #3
Aqui, criamos uma lista com nomes diferentes. O "OL" é usado para definir a lista ordenada. Enquanto "li" é usado para representar o elemento na lista. Criamos a lista de quatro nomes e recuperamos esses nomes usando a função "att ()" no CSS.
Código CSS:
Usamos a cor "laranja" para o cabeçalho e alinhá -la no "centro". Queremos colocar os nomes após o conteúdo, então usamos "depois" com a "lista.li ”. Usamos o "Conteúdo" para exibir o conteúdo que escrevemos no código HTML. Também usamos os parênteses dentro dos parênteses. Usamos a função "att ()". Passamos o "nome" como o elemento na função "att ()". Quando tivermos a saída, os nomes aparecerão nos parênteses. A cor da fonte deste conjunto é "azul" e exibe em estilo itálico enquanto definimos o "estilo de fonte" como "itálico". Eles usam algumas propriedades nos itens da lista, que é a propriedade "tamanho da fonte". Definimos o tamanho da fonte como "25px". E use a propriedade "Font-Family", que está definida como "Times New Roman".
Saída:
Aqui, podemos ver que o conteúdo é renderizado primeiro. Então os nomes aparecem dentro dos parênteses após o conteúdo. Recebemos todos os nomes usando apenas uma função att () e renderizamos esses nomes com cada elemento da lista após o conteúdo.
Exemplo #4
Criamos quatro links neste código HTML usando "href" e tendo o conteúdo para cada link. Agora, veja o código CSS e como recuperamos esses links usando a função "att ()".
Código CSS:
Nós estilizamos o cabeçalho alterando a "cor" e "font-família" do texto. Alinhamos o texto no "centro". Usamos "depois" para que o link que obtemos usando a função att () seja renderizado após o conteúdo. Usamos o parêntese, então quando a função att () recuperar o link, ela os exibirá dentro dos parênteses. Esses links renderizam na cor "vermelha" e no estilo "itálico".
Saída:
Exemplo #5
Criamos uma lista de diferentes frutas e vegetais e aplicamos a função att () nesta lista. A lista que criamos aqui é a lista ordenada. Agora, vem o código CSS no qual usamos a função att ().
Código CSS:
Usamos a cor "verde" para o título. A cor de fundo para este título é "aqua". Usamos "depois" que discutimos em nossos códigos anteriores. Aqui, a função att () é usada novamente dentro dos parênteses, para que os dados recuperados sejam exibidos neste parêntese. Definimos sua cor como "orangerada" e o tamanho da fonte para "22px". Usamos a cor de fundo para isso e a colocamos como "amarelo".
Saída:
Conclusão
Neste guia, aprendemos o que é a função att () e por que usamos essa função att () no CSS. Também aprendemos a usar essa função no CSS. Explicamos este attr () função teoricamente e realizamos exemplos em que usamos essa função no CSS. Exploramos os cinco exemplos diferentes neste guia e exibimos os dados ou link que recuperamos usando a função att () antes e depois do conteúdo. Explicamos como essa função recupera os dados desejados do elemento ou valor selecionado e o exibe na saída.