Cássio Fabre
Beleza, gente? Então, hoje vamos falar de uma propriedade CSS que pode nos confundir caso não as estudemos corretamente. Configurar as direções nas classes CSS é algo que, na verdade, não precisaria nem desse post... Mas resolvi fazê-lo mesmo assim.
Toda propriedade CSS que trata de tamanho ou posição possui 4 valores que devem ser configurados. Sim, os valores do título desse post. Algumas das mais utilizadas, se é que isso pode ser dito, são margin, padding, border-radius entre muitas outras. Na verdade, não existe muito segredo para entender isso. Vamos a um exemplo. Vamos configurar um botão, assim como este abaixo:
Então vamos ao código. Abra seu editor de código predileto e, dentro da tag <body> escreva o seguinte código
<a href="#" class="botao">Teste Botão</a>Agora, ao CSS. Criar um arquivo separado apenas para fazer este procedimento é desnecessário, mas se você preferir fazê-lo, crie o link devidamente, como visto na Parte 1 da série Aprenda HTML e CSS na Prática. Escreva dentro de <head> </head> o seguinte código.
<style type="text/css">
a.botao {
background: #dfdfdf;
border-radius: 2px;
color: #444;
font-family: calibri;
margin: 0 auto;
padding: 10px;
text-transform: uppercase;
text-decoration: none;
}
a.botao:hover{
color: #FFF;
background: #f90;
}
</style>
Antes de começar a explicação deste trecho, dê uma lida na Parte 2 da série Aprenda HTML e CSS na Prática, no trecho onde é visto a diferença entre ID e CLASS.No código CSS acima, estamos indicando ao navegador que todos os links com a class="botao", terão as configurações descritas, que não entraremos em maiores detalhes por agora. Vamos nos ater às propriedades margin e padding.
Quando escrevemos as direções no CSS ela é disposta da seguinte maneira:
seletor{
propriedade: top right bottom left;
}
Estes valores podem ser em porcentagem, pixels, centímetros, etc... Mas geralmente são utilizados os pixels. Mas não precisamos necessariamente informar os 4 valores. Podemos informar apenas um, dois ou três se quisermos. Vamos aos casos...Caso informemos apenas um valor, significa que aquele valor vai ser o valor das quatro direções. Ou seja, se fizermos isto:
a.botao{
padding: 10px;
}
Será a mesma coisa que escrever isso:a.botao{
padding: 10px 10px 10px 10px;
}
Se escrevermos apenas dois valores, significa que o primeiro valor será o valor correspondente ao top e bottom e o segundo à direita e esquerda. Ou seja, se fizermos isto:
a.botao{
padding: 10px 5px;
}
Será a mesma coisa que escrever isso:a.botao{
padding: 10px 5px 10px 5px;
}
Se escrevermos três valores, significa que o primeiro valor será o valor do top, o segundo será o direita e esquerda e o terceiro valor será referente ao bottom. Ou seja, se fizermos isto:
a.botao{
padding: 10px 5px 8px;
}
Será a mesma coisa que escrevermos isso:a.botao{
padding: 10px 5px 8px 5px;
}
Então, como você pôde perceber, essas formas nada mais são que forma abreviadas das direções. É algo que você deve saber para poupar tempo durante a escrita do código.
Antes de terminar o post, já está muito grande, quero fazer uma ressalva a respeito das propriedades margin e padding. As duas, de certa forma, servem para a mesma coisa. Mas tem uma diferença que é crucial na hora de escolher qual das duas utilizar. Bom, a margin é um espaçamento externa, ou seja, ela faz com que o elemento formatado afaste-se de outros elementos da código tendo como eixo a largura e altura do elemento. Fazendo uma analogia, ela seria um segurança que você pagou para não deixar que as pessoas cheguem perto de você. (risos). Já o padding funciona como um espaçamento interno, ou seja, ela faz com que o elemento se afaste dos outros tendo ele mesmo como eixo. Fazendo uma analogia, novamente, ela seria como uma blusa de frio de grossa, que faz com que o seu corpo seja o eixo da proteção da blusa.
Deu pra entender? Bom galera, espero que tenham gostado... Escrevam e modifiquem o código para saber onde cada propriedade está formatando e tentando ajustar à sua necessidade ou gosto.
Até a próxima.
0 comentários:
Postar um comentário