Propriedades CSS

Muito bom! Você já sabe várias coisas sobre HTML e CSS, mas ainda faltam algumas propriedades CSS para você ficar mais fera ainda na sua introdução ao desenvolvimento de sites.

Como eu já descrevi nas aulas anteriores, normalmente utilizamos as classes (class) para selecionar um elemento e modificar suas propriedades de estilo.

Em nosso arquivo CSS (criado na aula anterior), deixei várias propriedades para você tentar modificar, porém, não descrevi nada sobre o que elas eram capazes de fazer. Foi intencional, já que a melhor forma de aprender é colocando a mão na massa, mas é claro que não vou deixar você a ver navios, sem nenhuma explicação.

Nessa aula vamos falar bastante sobre as propriedades CSS e o que elas são capazes de fazer.

Como propriedades CSS são definidas?

Para editar as propriedades CSS de um elemento, você precisa primeiro especificar uma classe para tal elemento, por exemplo:

<div class="minha_classe">Conteúdo da DIV</div>

Essa tag HTML (<div>), especifica uma sessão em um documento, e no trecho de código acima, ela tem uma classe chamada de “minha_classe“.

Para alterar suas propriedades, basta escrever um ponto (.) e o nome da classe no seu arquivo CSS. Exemplo:

.minha_classe{}

As chaves servem para especificar que tudo o que está dentro delas pertence à classe minha_classe.

.minha_classe{
	font-size:12px;
}

No exemplo acima, tudo o que estiver envolvido na classe .minha_classe terá fonte de 12 pixels.

Uma única classe pode receber quantas propriedades você desejar, no entanto, tais propriedades devem ser separadas por um ponto e vírgula (;).

.minha_classe{
	font-size:12px;
	background:#ffffff
}

Não é necessário colocar o ponto e vírgula na última propriedade de uma classe.

Cada uma das propriedades CSS têm valores, você pode encontrar todos os valores em W3schools CSS Reference. Mas não se preocupe com isso, com o tempo você vai decorando o que cada propriedade faz e para qual motivo deve utilizá-las.

Um pouco mais adiante, vou passar uma lista com as propriedades mais utilizadas no CSS.

As propriedades do nosso arquivo CSS

Lembra do nosso arquivo CSS?

/* Meu CSS */
*{
	margin:0; 
	padding:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.topo, 
.corpo, 
.barra-lateral, 
.rodape{
	padding:20px;
}
.topo,
.rodape{
	width:100%;
	height:100px;
	background:#000;
	color:#fff;
	text-align: center;
}
.corpo{
	width:70%;
	float:left;
	background:#f1f1f1;
}
.barra-lateral{
	width:30%;
	float:right;
	background:#ccc;
}

Vou explicar o que cada uma das propriedades desse arquivo faz logo abaixo.

Margin

Essa propriedade configura a margem de um elemento HTML em pixels, porcentagem e EMs. Tais margens podem ser definidas em geral (como fizemos) ou para qualquer um dos cantos do elemento. Exemplo:

margin:0;

Especifica que nenhum dos quatro cantos do elemento terá margem.

margin:0 10px;

Especifica que a parte superior e a parte inferior do elemento terão margem 0, já a parte da direita e da esquerda têm 10px de distância.

margin:0 10px 5px 3px;

Especifica que o topo não tem margem, a direita tem margem de 10px, a parte inferior tem margem de 5px e a parte da esquerda tem margem de 3px.

Padding

O padding funciona praticamente como a margem, no entanto, ao invés de empurrar o elemento, ele faz tal elemento inchar até atingir os pixels desejados:

padding:0 10px 5px 3px;

No exemplo acima, o elemento não tem enchimento superior, tem um enchimento de 10px na direita, de 5px na parte inferior e 3px na esquerda.

Exemplo de padding:0 10px 5px 3px;

Box-sizing

Box-sizing é uma propriedade do CSS3 e não é suportado por todos os navegadores de Internet, no entanto, o trecho abaixo:

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

Identifica que a borda do elemento não deve ultrapassar o tamanho do elemento que envolve o elemento que recebeu essa propriedade.

Observação: O seletor asterisco (*), indica todos os elementos. Portanto, todos os elementos do nosso exemplo terão suas bordas no tamanho correto dos elementos que os envolvem.

Width e Height

Propriedades que especificam a largura e altura do elemento respectivamente.

width:100%;
height:100px;

No nosso exemplo, o elemento tem 100% de largura e 100px de altura.

Background e color

Background especifica a cor de fundo que desejamos utilizar no elemento e color a cor do texto, tais cores são especificadas pela tabela de cores HTML.

Text-align

Text-align especifica o alinhamento do texto que desejamos, tais alinhamentos podem ser: Left (esquerda), Center (Centro), Right (Direita) e Justify (Texto justificado).

Float

Float empurra um elemento para a direita (right) ou para a esquerda (left), permitindo que outros elementos o envolvam com o espaço que sobrou.

Font-size

Font-size especifica o tamanho da fonte de determinado elemento, por exemplo, 12px para nosso caso.

Tabela de propriedades CSS

Abaixo vou passar uma lista com as propriedades mais utilizadas em CSS para estilizar elementos HTML.

Propriedades de cor

PropriedadeDescriçãoCSS
colorAplica cor em texto1
opacityConfigura o nível de opacidade de um elemento3

Propriedades de fundo e borda

PropriedadeDescriçãoCSS
backgroundConfigura todas as propriedades de fundo em uma linha1
background-attachmentConfigura quando uma imagem de fundo é fixa ou rola com a página1
background-colorConfigura a cor do fundo1
background-imageConfigura uma imagem de fundo para um elemento1
background-positionConfigura a posição de uma imagem de fundo1
background-repeatConfigura como uma imagem de fundo deve se repetir1
background-clipConfigura a área de pintura de um fundo3
background-originConfigura a área de posicionamento da imagem de fundo3
background-sizeConfigura o tamanho de uma imagem de fundo3
borderConfigura todas as propriedades de borda em uma linha1
border-bottomConfigura as propriedades da borda abaixo do elemento1
border-bottom-colorConfigura a cor da borda abaixo do elemento1
border-bottom-left-radiusConfigura o formato da borda inferior esquerda3
border-bottom-right-radiusConfigura o formato da borda inferior direita3
border-bottom-styleConfigura o estilo da borda abaixo do elemento1
border-bottom-widthConfigura a largura da borda abaixo do elemento1
border-colorConfigura a cor das quatro bordas1
border-imagePropriedade abreviada para definir todos as propriedades de border-image-*3
border-image-outsetEspecifica a quantidade que a área da imagem da borda se estende além da caixa da borda3
border-image-repeatEspecifica se a borda da imagem deve ser repetida, arredondada ou alongada3
border-image-sliceEspecifica os deslocamentos interiores da imagem da borda3
border-image-sourceEspecifica uma imagem para usar como borda3
border-image-widthEspecifica a largura da imagem da borda3
border-leftConfigura todas as propriedades da borda esquerda1
border-left-colorConfigura a cor da borda da esquerda1
border-left-styleConfigura o estilo da borda da esquerda1
border-left-widthConfigura a largura da borda da esquerda1
border-radiusConfigura o estilo de todas as bordas3
border-rightConfigura a borda da direita1
border-right-colorConfigura a cor da borda da direita1
border-right-styleConfigura o estilo da borda da direita1
border-right-widthConfigura a largura da borda da direita1
border-styleConfigura o estilo de todas as bordas1
border-topConfigura a borda do topo1
border-top-colorConfigura a cor da borda do topo1
border-top-left-radiusConfigura o formato da borda superior esquerda3
border-top-right-radiusConfigura o formato da borda superior direita3
border-top-styleConfigura o estilo da borda do topo1
border-top-widthConfigura a largura da borda do topo1
border-widthConfigura a largura da borda1
box-decoration-breakDefine o comportamento do fundo e borda de um elemento em uma quebra de página, ou, para os elementos em linha, na quebra de linha.3
box-shadowCria uma sombra em um elemento3

Propriedades básicas para caixas

PropriedadeDescriçãoCSS
bottomEspecifica a posição de um elemento posicionado relacionada à parte inferior do elemento que o sustenta2
clearEspecifica qual lado do elemento não permitirá elementos flutuantes1
clipRecorta um elemento posicionado como “absolute” ou “fixed”2
displayEspecifica como alguns elementos devem ser mostrados1
floatEspecifica um elemento flutuante1
heightConfigura a altura de um elemento1
leftEspecifica a posição de um elemento relacionado à parte da esquerda do elemento que o sustenta2
overflowEspecifica o que acontece se um elemento passar do tamanho do elemento que o sustenta2
overflow-xA mesma coisa de overflow, mas só controla direita e esquerda3
overflow-yA mesma coisa de overflow, mas só controla a parte superior e inferior3
paddingEspecifica o “enchimento” de um elemento1
padding-bottomEspecifica o “enchimento” inferior de um elemento1
padding-leftEspecifica o “enchimento” da esquerda de um elemento1
padding-rightEspecifica o “enchimento” da direita de um elemento1
padding-topEspecifica o “enchimento” superior de um elemento1
positionEspecifica a posição de um elemento (static, relative, absolute ou fixed)2
rightEspecifica a posição de um elemento relacionado à parte da direita do elemento que o sustenta2
topEspecifica a posição de um elemento relacionado à parte superior do elemento que o sustenta2
visibilityEspecifica a visibilidade de um elemento2
widthConfigura a largura de um elemento1
vertical-alignConfigura o alinhamento vertical do elemento1
z-indexEnvia um elemento posicionado para frente ou para trás de outros elementos2

Margem e estilo

PropriedadeDescriçãoCSS
displayConfigura como o elemento será exibido1
marginConfigura a margem de um elemento1
margin-bottomConfigura a margem inferior do elemento1
margin-leftConfigura a margem da esquerda de um elemento1
margin-rightConfigura a margem da direita de um elemento1
margin-topConfigura a margem do topo de um elemento1
max-heightConfigura a altura máxima de um elemento2
max-widthConfigura a largura máxima de um elemento2
min-heightConfigura a altura mínima de um elemento2
min-widthConfigura a largura mínima de um elemento2

Decoração de textos

PropriedadeDescriçãoCSS
text-decorationEspecifica a decoração de um texto1

Propriedades de fonte

PropriedadeDescriçãoCSS
fontConfigura todas as propriedades de fonte1
font-familyConfigura a família da fonte utilizada1
font-sizeConfigura o tamanho da fonte1
font-styleConfigura o estilo da fonte1
font-weightConfigura a espessura da fonte1

Propriedades de listas

PropriedadeDescriçãoCSS
list-styleEspecifica todas as propriedades de elementos de lista1
list-style-imageEspecifica uma imagem para marcar uma lista1
list-style-positionConfigura a posição dos elementos de uma lista1
list-style-typeConfigura o estilo de um elemento de uma lista1

Concluindo

HTML e CSS não são extremamente difíceis, o problema é entender para qual motivo podemos utilizar cada uma das tags e quais propriedades CSS devemos aplicar para atingir um objetivo maior.

Como você ainda está aprendendo, recomendo que tente criar documentos em HTML com vários estilos diferentes para treinar.

Próxima aula

Na próxima aula vamos criar nosso próprio site. Vou tentar explicar a maneira que utilizo para criar e estilizar um site básico com HTML e CSS.

Todas as aulas

Veja todas as aulas do curso:

Lembre-se de seguir nosso blog. Postamos todos os nossos novos artigos no Google Plus, Twitter e Facebook. Além disso, enviamos artigos por e-mail, basta se inscrever. Fique sempre por dentro de nossos tutoriais.