CSS Plus Sign
Exemplo 01:
Vamos começar com o primeiro exemplo de uso do sinal de mais dentro do código HTML para usá -lo de várias maneiras. Demos uma olhada na etiqueta corporal do código HTML. Dentro do corpo da página HTML, temos um título de tamanho 1 que afirma que usamos o sinal de mais através do estilo CSS para que as principais histórias sejam lançadas. Usamos outro título do tamanho 2, que é o segundo maior tamanho dos títulos HTML, seguido pela tag div. Esta tag "div" cria uma nova seção que contém algumas informações sobre a data de lançamento e o local onde é lançado.
Após esta tag, temos outra tag "Div" que é usada para a criação de uma nova seção na página HTML. A seção corporal deste HTML é concluída aqui. Vamos dar uma olhada na tag "estilo" de uma página HTML para dar uma olhada no estilo dos diferentes elementos. Dentro desta tag, utilizamos o sinal de mais "+" entre o cabeçalho 2 e a tag "Div" para aplicar o estilo no elemento "div" adjacente ao cabeçalho 2. O tamanho da fonte é de 22 pixels, o peso da fonte é mais leve, a tela está embutida, enquanto a cor de fundo para a seção "div" é roxa e a cor do texto é CIANA CIANA. Depois disso, usamos o título de cabeçalho H1 para estilizá-lo com a cor do texto quase em preto. O estilo é concluído aqui.
A saída deste código é exibida na imagem a seguir. O primeiro título do tamanho 1 é colorido azul escuro, enquanto o outro título do segundo maior tamanho é exibido em uma cor preta a jato. Como a primeira tag de div é adjacente ao título 2 de uma página HTML, ela é estilizada de acordo com as propriedades usadas para os elementos combinados de "div" e "H2". Por outro lado, o cabeçalho 1 é estilizado de acordo com o uso do H1 na tag de estilo.
Exemplo 02:
Vamos começar com outro exemplo de usar o sinal de plus para estilizar. Iniciamos este exemplo com o uso da tag principal Doctype HTML seguida pela abertura única da etiqueta da cabeça. Segue -se a abertura da etiqueta do título que contém o título "CSS Plus Sign" dentro dela e o fechamento da tag de título.
Vamos dar uma olhada na área do corpo de um código HTML usando a etiqueta do elemento corporal. Usamos os diferentes títulos e parágrafos por meio de suas tags específicas, eu.e. “H1, H2 e P”. Primeiro, usamos o cabeçalho H1 do maior tamanho. Depois disso, usamos o título 2 do segundo maior tamanho junto com o parágrafo adjacente. Criamos uma nova tag div após o cabeçalho para criar uma nova seção na página HTML. Por fim, usamos o cabeçalho 2 novamente, seguido pelo elemento de parágrafo dentro da seção DIV.
Usando o sinal de mais entre o cabeçalho 2 e o parágrafo, estilizamos o parágrafo adjacente ao cabeçalho 2. Temos mais de um título do mesmo tamanho. Portanto, leva o cabeçalho 2 que vem primeiro desde o início da etiqueta do corpo. Usamos a cor verde no parágrafo adjacente a este primeiro cabeçalho 2 com o tamanho da fonte de 28 pixels, cáqui de cor de fundo e a propriedade de transformação de texto para mostrar o texto em alta.
Depois disso, usamos a etiqueta do parágrafo para estilizar os parágrafos restantes da nossa página HTML colorindo -a com rosa de chá com o peso de fonte em negrito e a família de fontes de fantasia. Trata -se do uso do sinal de plus para estilo. Vamos executar este código agora.
Obtemos a saída com os títulos dos tamanhos 1 e 2 sem nenhum estilo. O primeiro parágrafo é exibido em todas. Enquanto o último parágrafo é exibido separadamente no texto de cor roxa. O uso do sinal de mais para modelar o parágrafo não afeta o estilo do segundo parágrafo.
Exemplo 03:
O corpo começa com o cabeçalho 1 elemento seguido pelo elemento div para criar uma nova seção. Esta seção contém um total de quatro elementos de parágrafos para criar os diferentes parágrafos e uma seção div que também usa a tag de parágrafo para criar um único parágrafo nesta seção.
Depois que todos os elementos internos desta seção são concluídos, fechamos a seção Div externa junto com o fechamento da seção do corpo. Dentro da tag de estilo, usamos o parágrafo "P" para aplicar o peso da fonte como em negrito e o tamanho da fonte de 25 pixels a todos os parágrafos do corpo. Agora, usamos o sinal de mais nas duas tags de parágrafos para aplicar o estilo especificado no parágrafo adjacente do primeiro parágrafo na seção do corpo. Diferentes propriedades de fonte, fronteira e texto estão definidas para o segundo parágrafo, eu.e. Border dupla de 5px.
Agora, usamos as tags do parágrafo novamente com o sinal de posição para estilizar os 3º e 4º parágrafos adjacentes da área do corpo. As diferentes propriedades do estilo de fonte, juntamente com a cor da borda e a propriedade de contorno da borda, estão definidas, i.e. A borda de 5 pixels pontilhados e a cor do texto carmesim são especificados para os parágrafos adjacentes. Agora, o código é concluído e estamos indo para executá -lo.
A saída mostra que o segundo parágrafo é de maneira bem diferente do restante dos parágrafos, enquanto os 3º e 4º parágrafos são de maneira semelhante. O 1º e 5º parágrafo parecem semelhantes em estilo.
Conclusão
Este artigo demonstra alguns exemplos simples para ilustrar o uso do sinal "+" Plus no script html. Aprendemos como o sinal "+" mais pode estilizar alguns elementos mencionados após o sinal "+" Plus no estilo CSS sem alterar o estilo do primeiro elemento especificado do HTML. Para esse fim, usamos um total de 3 exemplos para estilizar os parágrafos e as seções DIV. Usando este elemento de atributo, você pode fazer alterações em qualquer página HTML sem o medo de perder a formatação para sua página HTML.