CSS pré -etiqueta
Exemplo 01:
Vamos começar com o primeiro exemplo do nosso artigo. Precisamos iniciar este exemplo de código HTML com o uso da tag "html". A etiqueta principal continua com o uso de uma tag de título, eu.e. “CSS Pre”. Para entender completamente o script HTML, precisamos olhar para a seção corporal da nossa página da web primeiro. O cabeçalho do tamanho 1 é inicializado dentro do corpo. Depois disso, um elemento "div" é eliminado para criar uma nova seção e adicionar outros elementos a ele. Esta seção div contém um título do tamanho 2. Após o título, uma etiqueta de extensão é utilizada para criar um novo período na seção "Div". Este período contém dados de texto longo nele.
Depois de todas essas frases, a etiqueta de extensão é seguida de perto pelo fechamento da tag "Div". O corpo da nossa página HTML está concluído. Depois disso, precisamos dar uma olhada no estilo CSS deste código HTML dentro da tag de estilo. O elemento de span é usado para estilizá -lo de acordo. O atributo "espaço branco" é usado com o valor "pré". O atributo de valor "pré" é usado aqui para preservar todos os espaços e quebras de linha que o elemento "span" contém dentro dele. Depois disso, a família de fontes está definida como Monospace, e a propriedade Display atribui o valor "Block". O tamanho da fonte é definido para 20 pixels com a cor marrom. Enquanto a cor do fundo é definida como "bisque". Existem outras famílias de fontes usadas no estilo a ser usado por esse período. A etiqueta da cabeça está completa e podemos executar nosso código com o código VS.
A saída para esta página HTML dentro do navegador Chrome é fornecida na imagem a seguir. Você pode ver que a página criou uma nova seção e adicionou um elemento de span dentro dela. O elemento Span contém algumas linhas como conteúdo, enquanto as quebras e espaços da linha são todos preservados devido ao uso do atributo "pré" como um valor para a propriedade "White Space" do CSS.
Exemplo 02:
Dentro do exemplo anterior, analisamos o uso do atributo "pré" como o valor da propriedade do espaço branco. Agora, nós o usamos como uma tag no arquivo html. Iniciamos este exemplo com o mesmo formato de tag html, cabeça e corporal. Dentro da etiqueta corporal deste código de exemplo, usamos o cabeçalho simples do tamanho 1 seguido pela tag "pré" contendo um conteúdo de texto muito grande nele. Este conteúdo contém quebras de linha e espaços entre as palavras.
Depois disso, utilizamos outro título do tamanho 1 para afirmar que o pré-elemento contém a largura e a altura fixa. O elemento "div" é usado aqui para criar uma nova seção após o título. A etiqueta de estilo é utilizada dentro da etiqueta de abertura “Div” para estilizar a seção “Div” a uma largura de 300 pixels, transbordamento definido como automático, altura de 200 pixels e uma cor de fundo de verde claro. Esta seção "div" contém uma tag "pré" nela para exibir algum conjunto de linhas de uma maneira bem diferente, em vez de usar algumas linhas de texto como conteúdo. Este conteúdo de tag "pré" de estilo é exibido na imagem a seguir. A tag pré-marca e a tag "div" estão fechadas aqui.
Depois disso, fechamos as tags "corpo" e "html" porque esse código não contém nenhum estilo mais do que o básico que já fornecemos na linha. Este código está pronto para ser executado no código do Visual Studio usando a opção "Run".
A saída deste código HTML é mostrada abaixo na imagem a seguir. Está claramente mostrando o uso da pré-marca padrão nas linhas simples de textos que contêm os espaços. As quebras exibem o texto do conteúdo como é sem uma única mudança de caractere. Além disso, o uso da largura e altura fixa para a seção "div" não impede a tag "pré" para exibir seus dados como é. Após o cabeçalho 2, o fundo verde com barra de rolagem mostra os mesmos dados de estilo que são especificados com a tag "pré".
Exemplo 03:
Vamos ter nosso último exemplo deste artigo contendo uma pré-marca nele. O código HTML começa com o mesmo formato - tag html e a etiqueta principal seguindo a tag "Title" para dar a uma página HTML um novo nome. Em seguida, o uso de uma etiqueta corporal para adicionar alguns elementos a serem exibidos na tela do navegador. Depois de usar a etiqueta da cabeça, usamos o título do tamanho 1 no corpo de uma página HTML. A tag de figura é utilizada antes do uso de tag "pré". A pré-marca é estilizada com o fundo marrom, a cor do texto branco, uma largura de 600 pixels, um preenchimento de 10 pixels e um tamanho de fonte de 16 pixels através do estilo embutido.
Adicionamos o sinal de menor e maior que a página HTML usando os caracteres -chave como LT, GT e a forma de uma vaca criada por alguns caracteres especiais, juntamente com alguns textos. A pré-marca está agora completa e inicializamos a tag "figcaption" para a legenda a forma que formamos dentro da pré-marca. O ID da tag FigCaption é especificado como "Caption Cow" e contém 2 linhas de dados com alguns espaços e quebras de linha. A tag de figura, a etiqueta corporal e as tags html são fechadas depois disso. Usamos este código no código VS para executá -lo.
A saída mostra que o cabeçalho é separado da seção separada de "div". Esta seção div contém uma forma de vaca com fundo marrom e a legenda fornecida no final desta figura semelhante à imagem. Os espaços são removidos da legenda.
Conclusão
Este artigo é sobre o uso das pré -etiquetas no código HTML de várias maneiras para permitir que as quebras e espaços de linha por qualquer motivo. Tentamos alguns exemplos para demonstrar seu uso da maneira mais fácil e melhor possível. Tentamos usar a palavra-chave "pré" como o valor do atributo da propriedade do espaço branco em um de nossos exemplos. Dentro do restante dos exemplos, tentamos isso como uma tag separada para demonstrar seu funcionamento de forma mais clara e eficiente.