Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Programação Externa

#1
 Gmtp

avatar
Membro

Vou explicar aqui cada comando do css. O css é a parte entre que comanda o gráfico e o design do theme. Os código ficam entre chaves {} e cada um tem uma função.

width: determina a largura de um objeto. {width: LARGURApx;}. {min-width: LARGURApx} serve para indicar a largura mínima do objeto. {max-width: LARGURApx} serve para indicar a largura máxima do objeto.

height: determina a altura de um objeto. {height: ALTURApx;}. {min-height: ALTURApx} serve para indicar a altura mínima do objeto. {max-height: ALTURApx} serve para indicar a altura máxima do objeto.

background: determina o fundo do seu objeto. Pode conter uma cor {background-color: #COR} ou uma url {background: url(‘URL_DA_IMAGEM’)}

Código:
background-repeat: determina se o background repete, ou não.  Pode ser {background-repeat: repeat;} para repetir e {background-repeat: no-repeat;} para não repetir, {background-repeat: repeat-x;} para repetir para os lados e {background-repeat: repeat-y;} para repetir para cima ou para baixo.

background-attachment: determina se o background é fixo, ou móvel.  Pode ser: {background-attachment: fixed;} para ficar fixo, ou {background-attachment: scroll;} para ficar móvel.

border: determina um contorno para o seu objeto. Pode ser atribuído apenas para o topo {border-top: TAMANHOpx solid #COR;}, para a base {border-bottom: TAMANHOpx solid #COR;} para o lado direito {border-right: TAMANHOpx solid #COR;} e para o lado esquerdo {border-left: TAMANHOpx solid #COR;}

Código:
solid: determina uma borda/contorno/linha sólida.

dashed: determina uma borda/contorno/linha tracejada.

dotted: determina uma borda/contorno/linha pontilhada.

border-radius: determina se as bordas são arredondadas ou não. Quanto maior o tamanho, mais arredondado fica. Pode ser {border-radius: SIZEpx;} para todas as bordas ficarem arredondadas, e o código para arredondar somente dois lados, ou um só, pode ser gerado nesse site.

color: determina a cor do texto {color: #COR;}

position: super importante, determina se o objeto vai ficar fixo ou móvel. Pode ser {position: fixed;} para ficar fixo, ou {position: absolute} para ficar móvel.

float: determina a posição do objeto. Pode ser {float: left} para a esquerda, ou {float: right;} para a direita, ou {float: center} para ficar no meio/centro.

margin: determina a distância entre o objeto e uma direção. Pode ser {margin-top: DISTÂNCIApx;} para indicar a distância entre o topo e o objeto, {margin-bottom: DISTÂNCIApx;} para indicar a distância entre a base inferior e o objeto, {margin-left: DISTÂNCIApx;} para indicar a distância entre a margem esquerda e o objeto, {margin-right: DISTÂNCIApx;} para indicar a distância entre a margem direita e o objeto.

font-family: determina a fonte usada no texto. {font-family: FONTE;}

Código:
text-align: determina o alinhamento do texto.  Pode ser {text-align: left;} para ficar a esquerda, ou {text-align: right;} para ficar a direita, ou {text-align: center;} para ficar no meio/centro.

font-size: determina o tamanho do texto.  {font-size: TAMANHOpx;}

padding: é a distância entre a borda e o conteúdo do objeto. Pode ser {padding: DISTÂNCIApx;} para a distância ser atribuída a todas as bordas, {padding-top: DISTÂNCIApx;} para a distância ser atribuída à margem do topo, {padding-bottom: DISTÂNCIApx;} para a distância ser atribuída à margem da base inferior, {padding-left: DISTÂNCIApx;} para a distância ser atribuída à margem da esquerda, ou {padding-right: DISTÂNCIApx;} para a distância ser atribuída à margem da direita. É esse código que faz o menu esticar quando passa o mouse, no menu hover.
Ver perfil do usuário

#2
 D'Leandro™

avatar
Fundador
Muito bom cara, parabéns pelo excelente conteúdo!
Ver perfil do usuário