Entendendo Códigos - Primeira Matéria

Olá!  Hoje vamos ter a nossa primeira matéria, relacionada a códigos, e vamos falar dos mais conhecidos, dos menos conhecidos, dos mais usados dos menos usados de vários tipos de códigos html. Mas hoje vamos com a nossa Primeira Matéria que tem como o tem Borda.

Você vai entender para o que ele funciona qual a sua necessidade, e alguns tutoriais que necessitam desse código para poder funcionar e tudo mais! Lembrando que sobre o layout eu não peguei nada de nenhum blog, fiz com todo o meu conhecimento sobre css, incluindo esta matéria feita com as minhas palavras pelo que eu entendo de códigos não peguei nada de outros blogs, apenas vi tutoriais e montei os meus próprios códigos,etc. Então vamos começar agora que já sabem??

                                                                    Borda:

A borda é um efeito muito usado em imagens, gadgets e etc. Para adicionar borda a seu código é apenas adicionas essa linha ao código:

border-top: 1px dotted #000000;

                                                              Entendendo o código:
As partes que devem ser alteradas são as que estão em negrito ou seja: Top; 1; dotted; #000000;

#000000; é o código da cor da sua borda, eu recomendo a você a tabela de cores da web para modificar código da cor.

Dotted; É o tipo de borda que você quer, existem vários tipos de borda, mas as mais usadas são solid, dotted, dashed,double, Veja:

 solid: é um tipo de borda lisa                                                                                                           dotted: é uma borda pontilhada porém como se fosse pontos                                                   double: é uma borda composta por uma linha dupla sólida.                                        dashed: é uma borda também pontilhada mas não com pontos e sim com linhas

top, é o posicionamento da borda, veja os posicionamentos:

border-top:  Borda em cima do objeto                                                                            border-bottom:  Borda em baixo do objeto                                                                    border-left: Borda a direita                                                                                                       border-right: Borda a esquerda

1px, é a espessura, ou seja a largura da borda, mas eu se fosse você deixaria 1px mesmo.


Bem espero que goste da nossa primeira matéria com o tem Borda!  Então, sugestões para a próxima matéria? É só comentar beijos!