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.
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
| Propriedade | Descrição | CSS |
|---|---|---|
| color | Aplica cor em texto | 1 |
| opacity | Configura o nível de opacidade de um elemento | 3 |
Propriedades de fundo e borda
| Propriedade | Descrição | CSS |
|---|---|---|
| background | Configura todas as propriedades de fundo em uma linha | 1 |
| background-attachment | Configura quando uma imagem de fundo é fixa ou rola com a página | 1 |
| background-color | Configura a cor do fundo | 1 |
| background-image | Configura uma imagem de fundo para um elemento | 1 |
| background-position | Configura a posição de uma imagem de fundo | 1 |
| background-repeat | Configura como uma imagem de fundo deve se repetir | 1 |
| background-clip | Configura a área de pintura de um fundo | 3 |
| background-origin | Configura a área de posicionamento da imagem de fundo | 3 |
| background-size | Configura o tamanho de uma imagem de fundo | 3 |
| border | Configura todas as propriedades de borda em uma linha | 1 |
| border-bottom | Configura as propriedades da borda abaixo do elemento | 1 |
| border-bottom-color | Configura a cor da borda abaixo do elemento | 1 |
| border-bottom-left-radius | Configura o formato da borda inferior esquerda | 3 |
| border-bottom-right-radius | Configura o formato da borda inferior direita | 3 |
| border-bottom-style | Configura o estilo da borda abaixo do elemento | 1 |
| border-bottom-width | Configura a largura da borda abaixo do elemento | 1 |
| border-color | Configura a cor das quatro bordas | 1 |
| border-image | Propriedade abreviada para definir todos as propriedades de border-image-* | 3 |
| border-image-outset | Especifica a quantidade que a área da imagem da borda se estende além da caixa da borda | 3 |
| border-image-repeat | Especifica se a borda da imagem deve ser repetida, arredondada ou alongada | 3 |
| border-image-slice | Especifica os deslocamentos interiores da imagem da borda | 3 |
| border-image-source | Especifica uma imagem para usar como borda | 3 |
| border-image-width | Especifica a largura da imagem da borda | 3 |
| border-left | Configura todas as propriedades da borda esquerda | 1 |
| border-left-color | Configura a cor da borda da esquerda | 1 |
| border-left-style | Configura o estilo da borda da esquerda | 1 |
| border-left-width | Configura a largura da borda da esquerda | 1 |
| border-radius | Configura o estilo de todas as bordas | 3 |
| border-right | Configura a borda da direita | 1 |
| border-right-color | Configura a cor da borda da direita | 1 |
| border-right-style | Configura o estilo da borda da direita | 1 |
| border-right-width | Configura a largura da borda da direita | 1 |
| border-style | Configura o estilo de todas as bordas | 1 |
| border-top | Configura a borda do topo | 1 |
| border-top-color | Configura a cor da borda do topo | 1 |
| border-top-left-radius | Configura o formato da borda superior esquerda | 3 |
| border-top-right-radius | Configura o formato da borda superior direita | 3 |
| border-top-style | Configura o estilo da borda do topo | 1 |
| border-top-width | Configura a largura da borda do topo | 1 |
| border-width | Configura a largura da borda | 1 |
| box-decoration-break | Define 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-shadow | Cria uma sombra em um elemento | 3 |
Propriedades básicas para caixas
| Propriedade | Descrição | CSS |
|---|---|---|
| bottom | Especifica a posição de um elemento posicionado relacionada à parte inferior do elemento que o sustenta | 2 |
| clear | Especifica qual lado do elemento não permitirá elementos flutuantes | 1 |
| clip | Recorta um elemento posicionado como “absolute” ou “fixed” | 2 |
| display | Especifica como alguns elementos devem ser mostrados | 1 |
| float | Especifica um elemento flutuante | 1 |
| height | Configura a altura de um elemento | 1 |
| left | Especifica a posição de um elemento relacionado à parte da esquerda do elemento que o sustenta | 2 |
| overflow | Especifica o que acontece se um elemento passar do tamanho do elemento que o sustenta | 2 |
| overflow-x | A mesma coisa de overflow, mas só controla direita e esquerda | 3 |
| overflow-y | A mesma coisa de overflow, mas só controla a parte superior e inferior | 3 |
| padding | Especifica o “enchimento” de um elemento | 1 |
| padding-bottom | Especifica o “enchimento” inferior de um elemento | 1 |
| padding-left | Especifica o “enchimento” da esquerda de um elemento | 1 |
| padding-right | Especifica o “enchimento” da direita de um elemento | 1 |
| padding-top | Especifica o “enchimento” superior de um elemento | 1 |
| position | Especifica a posição de um elemento (static, relative, absolute ou fixed) | 2 |
| right | Especifica a posição de um elemento relacionado à parte da direita do elemento que o sustenta | 2 |
| top | Especifica a posição de um elemento relacionado à parte superior do elemento que o sustenta | 2 |
| visibility | Especifica a visibilidade de um elemento | 2 |
| width | Configura a largura de um elemento | 1 |
| vertical-align | Configura o alinhamento vertical do elemento | 1 |
| z-index | Envia um elemento posicionado para frente ou para trás de outros elementos | 2 |
Margem e estilo
| Propriedade | Descrição | CSS |
|---|---|---|
| display | Configura como o elemento será exibido | 1 |
| margin | Configura a margem de um elemento | 1 |
| margin-bottom | Configura a margem inferior do elemento | 1 |
| margin-left | Configura a margem da esquerda de um elemento | 1 |
| margin-right | Configura a margem da direita de um elemento | 1 |
| margin-top | Configura a margem do topo de um elemento | 1 |
| max-height | Configura a altura máxima de um elemento | 2 |
| max-width | Configura a largura máxima de um elemento | 2 |
| min-height | Configura a altura mínima de um elemento | 2 |
| min-width | Configura a largura mínima de um elemento | 2 |
Decoração de textos
| Propriedade | Descrição | CSS |
|---|---|---|
| text-decoration | Especifica a decoração de um texto | 1 |
Propriedades de fonte
| Propriedade | Descrição | CSS |
|---|---|---|
| font | Configura todas as propriedades de fonte | 1 |
| font-family | Configura a família da fonte utilizada | 1 |
| font-size | Configura o tamanho da fonte | 1 |
| font-style | Configura o estilo da fonte | 1 |
| font-weight | Configura a espessura da fonte | 1 |
Propriedades de listas
| Propriedade | Descrição | CSS |
|---|---|---|
| list-style | Especifica todas as propriedades de elementos de lista | 1 |
| list-style-image | Especifica uma imagem para marcar uma lista | 1 |
| list-style-position | Configura a posição dos elementos de uma lista | 1 |
| list-style-type | Configura o estilo de um elemento de uma lista | 1 |
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:
- Aula 1: Introdução ao HTML
- Aula 2: Tags HTML
- Aula 3: Introdução ao CSS
- Aula 4: Propriedades CSS
- Aula 5: Criando seu próprio site
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.
