Neste tutorial vou mostrar os estilos de bordas, a necessidade de utilizar "padding" para distanciar o conteúdo das bordas, e quando usar "span" ou usar "div" na aplicação de bordas a textos dentro do post. Em próximo artigo veremos como adicionar bordas às colunas e aos elementos dentro das colunas.
Construção do atributo
Para aplicar uma borda a qualquer elemento, você deve definir:
1. A grossura da borda (border-width);
2. O estilo da borda (border-style)
3. e a cor da borda (border-color)
Exemplo:
border: 2px solid #238E23;
Texto com Borda
Por "default" a borda é aplicada ao redor do elemento quando não há definição do local a aplicar. Se quisermos que a borda do exemplo acima seja aplicada apenas no "bottom", modificamos para:
border-bottom: 2px solid #238E23;
Texto com Borda
Se optarmos por aplica-la no "top" e no "bottom", acrescentamos uma linha, definindo a grossura para cada lado:
border: 2px solid #238E23;
border-width: 2px 0 2px 0;
Texto com Borda
Os valores são atribuídos a cada lado conforme o sentido horário: top - right - bottom - left.
Escrevendo o atributo - "div" ou "span"?
Para colocar bordas em um texto nos posts do Blogger, precisamos usar a janela de postagem no modo "Editar HTML".
Se quisermos que a borda circule apenas o texto, usaremos "span":
Texto com Borda
Texto com Borda
Se a opção for usar a borda em toda a linha, usaremos "div":
Texto com Borda
Texto com Borda
Para textos longos se usarmos "span" a borda irá circular cada linha:
Texto Longo
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin elementum iaculis odio. Nullam pharetra quam id diam. Aenean lobortis enim in est vulputate tempus. Morbi eleifend justo et purus. Aliquam nec metus tristique risus malesuada pharetra. Mauris eget risus eu nibh euismod bibendum. Morbi egestas adipiscing ante. Maecenas mauris purus, egestas sed, ornare in, suscipit quis, lacus.
Nesse caso, o adequado é usar "div":
Texto Longo
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin elementum iaculis odio. Nullam pharetra quam id diam. Aenean lobortis enim in est vulputate tempus. Morbi eleifend justo et purus. Aliquam nec metus tristique risus malesuada pharetra. Mauris eget risus eu nibh euismod bibendum. Morbi egestas adipiscing ante. Maecenas mauris purus, egestas sed, ornare in, suscipit quis, lacus.
Colocando "padding" para distanciar o texto das bordas
Notem que em todos os exemplos acima os textos ficam colados às bordas. Para distancia-los, precisamos usar a propriedade "padding":
Texto Longo
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin elementum iaculis odio. Nullam pharetra quam id diam. Aenean lobortis enim in est vulputate tempus. Morbi eleifend justo et purus. Aliquam nec metus tristique risus malesuada pharetra. Mauris eget risus eu nibh euismod bibendum. Morbi egestas adipiscing ante. Maecenas mauris purus, egestas sed, ornare in, suscipit quis, lacus.
Propriedade border-width - Grossura da Borda
Geralmente usamos px para definir bordas mais finas ou mais grossas. Outra alternativa é usar: "thin" (fina), "medium" (média) ou "thick" (grossa).
Texto com Borda
Texto com Borda
Texto com Borda
Texto com Borda
Texto com Borda
Texto com Borda
Propriedade border-style - Estilos de bordas
São 8 os estilos mais utilizados para as bordas:
1. solid:
Texto com Borda
Texto com Borda
2. dotted:
Texto com Borda
Texto com Borda
3. dashed:
Texto com Borda
Texto com Borda
4. double:
Texto com Borda
Texto com Borda
5. groove:
Texto com Borda
Texto com Borda
6. ridge:
Texto com Borda
Texto com Borda
7. inset:
Texto com Borda
Texto com Borda
8. outset:
Texto com Borda
Texto com Borda
Nenhum comentário:
Postar um comentário