Como fazer uma caixa ao redor do texto

Destacar texto importante na sua página Web utilizando caixas.

Sempre que você visita um site que tem caixas em torno do texto, os desenvolvedores do site, provavelmente, criado esse efeito usando Cascading Style Sheets (CSS). CSS permite aos desenvolvedores aplicar estilo visual para elementos em uma página da Web. Muitos elementos HTML têm caixas em torno deles. As caixas podem não ser visíveis, mas eles existem. Os desenvolvedores não apenas torná-los visíveis, conforme necessário, mas eles também usam CSS para definir a cor, estilo e largura das caixas. Para adicionar uma caixa ao redor do texto em uma página da Web, colocar o texto dentro de um HTML

elemento e uso CSS para estilizar-lo.

Crie um novo arquivo HTML e adicionar este código para o seção:

A caixa em torno deste texto é pontilhada e vermelho

A caixa em torno deste texto é mais espessa, tracejada e azul

A caixa em torno deste texto é sólido, mais espessa e amarelo

o
tag define uma caixa. Se você não definir quaisquer propriedades de um
, A caixa será invisível. Cada uma destas caixas referência a uma classe CSS diferente. A seção CSS do documento HTML mantém as características de exibição para cada
. Por exemplo, a primeira caixa de texto faz referência a uma classe CSS chamada "dottedRed." Essa classe define a cor da borda para o vermelho e o estilo de borda de pontilhado. A caixa ao redor do texto em que div aparece pontilhada e vermelho. Os outros dois
tags de referência diferentes classes que definem diferentes características visuais para suas caixas.
Adicione estas definições de estilo folha para a seção:
Consulte Recursos para ver os possíveis valores de propriedade de fronteira que um elemento de bloco HTML pode ter. Na definição de classe "dottedRed", as propriedades de fronteira são definidas para os valores mostrados. Controlar o preenchimento entre o texto ea borda da caixa, ajustando o valor para "padding". Nestes exemplos, o preenchimento é definido como cinco pixels. Isso significa que o texto em cada caixa será cinco pixels de distância a partir de cada lado da caixa.
Salve o arquivo e visualizá-lo no seu browser. A caixa em torno de cada bloco de texto irá exibir as propriedades visuais definidos no Cascading Style Sheet.

dicas avisos

O texto dentro de uma caixa vai embrulhar de acordo com o valor "width" que você definir no CSS. Aumentar o valor de largura, se você quiser mais longas linhas de texto. Use sua imaginação ao denominar as fronteiras caixa em torno de seu texto. Misturar e combinar cores diferentes, beira-estilos, beira-larguras e outras propriedades para adaptar a aparência de suas caixas.

De esta maneira? Compartilhar em redes sociais: