Linha vertical CSS
Exemplo 1
Estamos usando o código do Visual Studio na geração de um novo arquivo. O arquivo em branco é aberto e devemos escolher um idioma. Estamos fazendo o código HTML primeiro, por isso estamos escolhendo a linguagem HTML. Depois disso, o arquivo produzido é um arquivo html. Não precisamos dar uma extensão de arquivo ao salvá -lo. Agora, coloque as tags HTML básicas (ou você pode colocar o “!”Marca para gerar automaticamente essas tags). Se você colocar “!”E depois pressione“ Enter ”, você receberá todas as tags fundamentais do HTML imediatamente. No corpo, você pode ver que há um título e um recipiente de div um. O "V1" é o nome do contêiner div. Também vinculamos este arquivo HTML ao CSS, utilizando a tag "Link" na "cabeça" deste código HTML.
Estamos decorando o título e utilizando a propriedade "decoração de texto" e configurando-a para "sublinhar". Então, usando esta propriedade, o cabeçalho será sublinhado. Também usamos a propriedade "cor", que define a cor do texto do cabeçalho e a definimos como "azul-violeta". Na linha seguinte, temos a propriedade "font-família" que definimos como "Times New Roman". Em seguida, colocamos o nome do contêiner Div, que é "V1" e desenhamos a linha vertical neste contêiner Div. Podemos desenhar a linha vertical usando a propriedade "Border".
Então, estamos utilizando esta propriedade de propriedade "borda-esquerda", que nos ajuda a desenhar uma linha vertical. Como é a propriedade "borda esquerda", precisamos definir a "largura", "tipo" e "cor" para esta propriedade para: "10px" em sua "largura", "sólida" em "tipo" e "Vermelho" em "cor". Ele tornará uma linha vertical na tela de 10px de largura e em vermelho. Também definimos a "altura" desta linha vertical como "400px". Agora, vamos produzir a saída deste código clicando no botão direito do mouse e depois selecionando “Abrir no navegador padrão”. Ou você pode usar o atalho que é "alt+b" para obter a saída.
A saída é mostrada abaixo. Você pode ver a linha vertical. Esta linha é renderizada no lado esquerdo, pois usamos a propriedade "borda esquerda" para desenhar esta linha vertical.
Exemplo 2
No Exemplo 2, adicionamos um parágrafo no código HTML acima. Agora, temos um título, um parágrafo e um contêiner de div neste código HTML. Depois disso, estamos prosseguindo para o arquivo CSS para gerar o código CSS.
Decore o cabeçalho um pouco aplicando a propriedade "Decoração de texto" e configurando-a como "tracejada" e usando "vermelho" como o valor da propriedade "cor". O "argelino" é usado como a "família da fonte". Agora, aplique algum estilo no parágrafo e defina seu "tamanho da fonte" como "20px". Utilizamos "verde" como o valor da propriedade "cor". Além disso, utilize “calibri” como uma “família de fontes”. A palavra-chave "ousada" é utilizada aqui como o "peso da fonte".
Use a div chamada "V1" e coloque a propriedade "Border-Left". Esta propriedade ajuda a desenhar uma linha vertical dentro do contêiner Div. A "largura" da linha vertical é "10px". Esta linha aparece no tipo "sólido" porque definimos "sólido" como o tipo de propriedade da fronteira. A cor da linha vertical é "laranja". A "altura" determina a altura da linha que definimos como "400px". A "posição" da linha vertical é "absoluta". Definimos a “esquerda” como “50%” para que essa linha vertical apareça no lado esquerdo de 50% no centro. A “margem-esquerda” é “-3px”. Esta propriedade é usada para definir o espaço fora do objeto no lado esquerdo. Também definimos o "topo" da linha vertical como o "50px".
A linha vertical aparece no lado esquerdo de 50% da tela de saída porque definimos esse valor no CSS e utilizamos a propriedade "borda esquerda" para desenhar esta linha.
Exemplo 3
Agora, vamos desenhar duas linhas verticais. Então, colocamos dois recipientes de div diferentes neste código HTML. Usaremos cada div para desenhar linhas verticais separadamente. O cabeçalho e as tags de parágrafo são iguais que acima e apenas alteramos o texto que está escrito nas tags de parágrafo.
Nesse caso, a "família da fonte" é "argeliana" para o título. Defina o "tamanho da fonte" do parágrafo como "20px" e aplique mais estilo. Para a "cor", utilizamos o "roxo". Além disso, use "Times New Roman" como uma "família de fontes". A palavra-chave "ousada" é usada como o "peso da fonte". Também "sublinhamos" o texto do parágrafo usando "decoração de texto". Usamos a propriedade "Border-left" na div chamada "V1.”Este atributo permite que uma linha vertical seja desenhada dentro do contêiner div. A "largura" da linha vertical é "12px" e a linha é "sólida" na aparência, já que o tipo de propriedade da fronteira é "sólido". Nesse caso, a linha vertical é colorida "azul". A altura da linha especifica na "altura", que colocamos para "400px". A "posição" da linha vertical é "absoluta". Definimos a “esquerda” como “50 %”, portanto, essa linha vertical será exibida no lado esquerdo de 50 %, que está no meio. O "-3px" é o "margem-esquerda."O" top "aqui é" 130px ".
Agora, novamente usamos as mesmas propriedades para a segunda div na criação de outra linha vertical na segunda div. Definimos a propriedade "borda esquerda" como "Green sólido de 12px" e a "altura" para esta linha é a mesma da primeira linha vertical que é "400px". Definimos sua propriedade "esquerda" como "20%" e essa linha aparecerá em 20% no lado esquerdo. A “margem-esquerda” e o “top” são iguais à primeira linha vertical.
Podemos ver que duas linhas verticais renderizam na tela de saída. Ambos são renderizados em uma posição diferente na saída enquanto definimos essa posição no código CSS.
Exemplo 4
Colocamos um título e uma div no corpo e também escrevemos algum texto no contêiner div. Também desenharemos uma linha vertical no CSS e vincularemos os dois arquivos.
Ajuste a propriedade "decoração de texto" para "sublinhar" e "verde" como a "cor" para adicionar um toque adicional ao cabeçalho. A “família de fontes” do cabeçalho é “argeliana” neste exemplo e está alinhado no “centro”. Na div, utilizamos o atributo "fronteira-direita". Dentro do contêiner Div, esse atributo permite que uma linha vertical seja desenhada. A "largura" da linha vertical é "10px" e a linha parece "sólida", pois o tipo da propriedade da fronteira é "sólido". A linha vertical é colorida "GoldenRod" neste código. A "altura" indica a altura da linha, que ajustamos para "500px". Usamos a cor "marrom" para a "cor". Alterar o “tamanho da fonte” do texto para “23px” e adicione mais decoração a ele. A palavra-chave "ousada" é utilizada como o "peso da fonte" aqui. Além disso, como uma "família de fontes", use "Sans-Serif".
Nesta captura de tela, a linha vertical é renderizada no lado direito da tela de saída, porque utilizamos a propriedade "fronteira-direita" neste exemplo.
Conclusão
O objetivo de apresentar este guia é ajudá -lo a entender a "linha vertical" no CSS. Passamos por essa noção em detalhes e demos vários exemplos de como desenhamos esta linha vertical no CSS. Explicamos que utilizamos a propriedade "borda esquerda" ou "borda-direita" para renderizar esta linha vertical na tela de saída. Escrevemos aqui sobre como renderizar linhas verticais. Usamos quatro exemplos distintos aqui e, demos a saída neste guia.