Uma propriedade é uma característica de um elemento
do nosso HTML (cor de fundo, largura, altura, espaçamento, etc). Um
valor define o resultado de uma propriedade e como
o navegador deve exibir o estilo daquele elemento.
Formas de declarar o CSS
CSS Inline: adicionamos o código CSS utilizando o atributo style
dentro das tags HTML, elemento por elemento.
CSS Interno: código CSS é adicionado dentro da tag
<head> da página HTML. Dentro da tag
<head> adicionamos outra tag,
a <style>, e colocamos as regras CSS nessa
área.
CSS Externo: é criado um arquivo com a extensão .css com todas
as regras CSS que queremos aplicar e esse arquivo é referenciado
no HTML da página através da tag <link>.
Seletores CSS
Seletor por tipo: Busca elementos por uma tag
HTML especifica.
Seletor por ID (#): Busca elementos através
do atributo "id", que é único para cada elemento HTML na
página.
Seletor por Classe (.): Busca elemntos
através do atributo "class".
Seletor Universal (*): Seleciona todos os
elementos HTML.
Seletor de Atributo ([atrib]): Seleciona
elemntos que possuem um atributo específico em nosso documento
HTML e conseguimos também buscar atributos com um valor
específico.
Especifica o tipo de relação entre dois seletores.
Combinador Descendente
É o padrão e busca os elementos descendentes (filhos) do primeiro
seletor para o segundo.
Exemplos:
Item 1
Subitem A
Subitem B
Item 2
Subitem A
Subitem B
Item 3
Subitem A
Subitem B
Combinador Filho
Busca os elementos filhos (filhos diretos) do primeiro seletor para
o segundo.
Exemplos:
Parágrafo 1 dentro da div
Parágrafo 2 dentro da div
Paragrafo 3 dentro da div, dentro do span
Paragrafo 4 fora da div
Paragrafo 5 fora da div
Combinador Irmão
Busca os elementos irmãos (semelhantes) do primeiro seletor. Usa-se
(+) para selecionar apenas o próximo irmão e (~) para selecionar
todos os irmãos.
Exemplos:
Parágrafo 1 dentro da div
Parágrafo 2 dentro da div
Paragrafo 3 dentro da div, dentro do span
Paragrafo 4 fora da div
Paragrafo 5 fora da div
Parágrafo 6 dentro da div
Parágrafo 7 dentro da div
Paragrafo 8 dentro da div, dentro do span
Paragrafo 9 fora da div
Paragrafo 10 fora da div
Parágrafo 11 dentro da div
Parágrafo 12 dentro da div
Paragrafo 13 dentro da div, dentro do span
Paragrafo 14 fora da div
Paragrafo 15 fora da div
Dimensionamento e Espaçamento
Largura e Altura
Exemplo altura e largura de um elemento
A palavra-chave auto faz com que a altura e largura
do elemento sejam adustadas de acordo com o conteúdo e o tamanho da
tela.
A palavra-chave initial aplica o valor inicial
padrão do css.
A palavra-chave inherit aplica o mesmo valor do
elemento pai.
Div 01
Div 02
Largura e Altura Máxima e Mínima
Margin
Espaçamento externo de um elemento, criando espaço ao redor dele,
fora das bordas.
Um valor: aplica-se a todos os lados
Dois valores: primeiro, em cima e embaixo, segundo laterais
Três valores: em cima, lados, embaixo
Quatro valores: em cima, esquerda, embaixo, direita
A palavra-chave auto faz com que o elemento fique
centralizado na tela na horizontal. Então se ainda assim quiser
aplicar margem em cima e embaixo tem jeito.
Podem ser aplicados também valores negativos, fazendo com que um
elemento se sobreponha a outro.
Exemplos:
Padding
Espaçamento interno, cria espaço entre o conteúdo de um elemento e
suas bordas.
Segue a mesma regra de margin para a quantidade de valores
atribuídos.
Quando aumentamos o padding do elemento, é como se a largura e a
altura aumentassem junto.
Exemplos:
Com padding:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum,
cumque facilis repellat dignissimos ullam tempore neque aliquam
accusamus aperiam excepturi molestias delectus nam quo repellendus
sunt sint. Optio, praesentium totam!
Sem padding:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Box-siding:
Box Sizing = border-box
Define como o tamanho total de um elemento é calculado.
Com box-sizing border-box, o padding e a borda são
incluídos na largura e altura definidas do elemento.
Com box-sizing content-box, a largura e altura
aumentam com o padding.
Exemplos:
Box-siding = border-box: o elemento não aumenta com o padding.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum,
cumque facilis repellat dignissimos ullam tempore neque aliquam
accusamus aperiam excepturi molestias delectus nam quo repellendus
sunt sint.
Box-siding = content-box: o elemento aumenta com o padding.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum,
cumque facilis repellat dignissimos ullam tempore neque aliquam
accusamus aperiam excepturi molestias delectus nam quo repellendus
sunt sint.