Papel css
Exemplo # 01:
Temos que iniciar este exemplo com as tags básicas HTML seguidas pela tag de cabeça que está usando a tag de título para dar um nome à nossa página da web como "função do CSS". Estaremos pulando a explicação da tag de estilo por um tempo, pois precisamos olhar para a tag do corpo primeiro. Dentro da etiqueta corporal deste código HTML, especificamos um título de tamanho 1, afirmando que isso estaria explicando a propriedade CSS Property.
Depois disso, usamos uma tag div para criar uma nova seção em nossa página da web html ao dividir a página em seções. Especificamos o ID para esta seção como "conteúdo" e especificamos seu papel como primário. Depois disso, a etiqueta de extensão foi usada nesta seção que tem contendo algum texto nela. Junto com isso, o papel dessa tag de extensão foi especificado como secundário. As tags de extensão e div são concluídas e fechadas aqui. Terminamos o corpo de uma página HTML.
Agora, precisamos dar uma olhada no estilo do corpo html. Dentro da tag de estilo, especificamos os papéis para estilizar os elementos específicos de acordo. Por exemplo, para o papel principal, usamos o fundo como algo como a cor verde e a cor azul próxima para o papel secundário. Depois de especificar as cores de fundo para ambos os papéis, estamos usando títulos de elementos DIV e SPAN para estilá -los. Temos usado preenchimento de 15 pixels, margens de 5 pixels e propriedade de exibição em bloco embutido para ambos os elementos. Nosso estilo, cabeça e elementos do corpo agora estão concluídos e o código está pronto para execução no navegador Chrome.
Depois de executar esse código no navegador Chrome, temos a saída mostrada abaixo que está mostrando uma única div com um período. Esse período foi intitulado "Secundário", enquanto a camada externa desse período tem mostrado o papel principal. Você pode ver que a área primária da seção DIV foi colorida com verde claro e a extensão interna do papel secundário foi colorida com roxo claro ou azul. Por outro lado, padrões, margens e estilos de exibição têm sido os mesmos para ambos.
Exemplo # 02:
Vamos dar uma olhada em outro exemplo de uso do atributo de função do script html css para estilizar nossos elementos html. Dentro desses exemplos, usaremos a função e os atributos de destino para comparar seus usos. Assim como o exemplo acima, iniciamos este exemplo com a tag principal HTML seguida pela tag de cabeça que contém o título desta página em sua tag de título.
Dentro da etiqueta corporal do script html, especificamos o título do tamanho 2. Três parágrafos foram usados para demonstrar o uso de atributos de alvo e função. Depois de usar os parágrafos, estamos utilizando as tags de âncora para adicionar os links a alguns sites de mídia social que são muito famosos hoje em dia e especificá -los com o papel e os atributos de destino. Dentro da nossa primeira tag de âncora, estamos adicionando um link ao Facebook e especificamos seu papel como "principal". As próximas duas tags âncora contêm o link para os mecanismos de pesquisa do Google e da Wikipedia, seguidos pelo atributo de destino para demonstrar o alvo de ambos os links. A última tag de âncora contém o URL do Gmail que não é válido e especificou seu papel como "principal". Dentro da tag de estilo, damos muitos valores para a família de fontes para todas as quatro tags de ancoragem.
Isso significa que qualquer uma das famílias de fontes pode ser utilizada para essas tags de âncora. O tamanho da fonte foi definido como grande. A tag âncora ou URLs com o papel "Main" teria uma cor de fundo de Cyan. Âncora, onde o alvo está em branco, seria colorido amarelo e onde o alvo está no topo da cor seria vermelho. Este script foi concluído para etiquetas de ancoragem e está pronto para uso.
A saída para este código HTML foi dada abaixo. Você pode ver o cabeçalho e os três primeiros parágrafos mostrados como textos simples na tela. Link para a âncora no Facebook e Gmail foi colorido ciano devido ao uso da função principal. Enquanto o Google âncora obteve a cor amarela porque foi direcionada como preta e a âncora da Wikipedia recebeu a cor vermelha porque era direcionada como um topo. É assim que os seletores funcionam em html.
Vamos atualizar um pouco o mesmo código para obter uma saída um pouco diferente em nossa página da web. Dentro do corpo do código HTML, usamos um único cabeçalho e um único parágrafo com o texto longo. Quatro tags de âncora diferentes foram usadas para vincular sites diferentes com quatro palavras -chave. As duas primeiras tags de ancoragem e a última tag de ancoragem foram especificadas com o papel do principal. Enquanto a terceira etiqueta de âncora foi especificada com o topo alvo.
As etiquetas de linha quebradas foram usadas após cada etiqueta de ancoragem para dar um salto de linha. Dentro da tag de estilo, estamos usando a mesma família de fontes e tamanho de fonte para todas as tags de ancoragem. A cor de fundo "ciano" foi escolhida para as âncoras onde o papel é quase igual.
Depois de executar este código, temos os dois primeiros links coloridos "ciano" em nossa página da web, enquanto o resto dois não foram estilizados. Isso ocorre porque a palavra -chave "oficial" só foi usada para as duas primeiras tags de ancoragem no atributo "função".
Conclusão
Este artigo foi um bom guia para todos os novos usuários de HTML se eles não tiverem nenhum conhecimento prévio do "papel" do seletor no CSS. Usamos três exemplos diferentes para esclarecer o conceito de "papel" e "seletores de destino". Dentro de nossos exemplos, também tentamos a abordagem da palavra -chave para exibir o uso de "função" e seletores de destino. Era isso, e tentamos cobrir esses exemplos da maneira mais simples possível.