Css

Incluindo CSS na página

• Inline
• A primeira forma de aplicar CSS a uma página é utilizando o atributo style em elementos do HTML:
• <p style="color: blue">Parágrafo com fonte azul.</p>
• <p>Esse outro parágrafo não é azul, a não ser que
• exista <span style="color: red">CSS em outro lugar</span>.</p>
• Interno
• A segunda forma é utilizar a tag style dentro do head da página HTML:
• <head>
• <style type="text/css">
• seletor { propriedade: valor; }
• </style>
• </head>
• Externo
• E a última - porém a mais utilizada - maneira de aplicar CSS é criar um ou mais arquivos com extensão .css e incluí-los na estrutura head do HTML:
• <head>
• <link rel="stylesheet" type="text/css" href="reset.css">
• <link rel="stylesheet" type="text/css" href="styles.css">
• </head>

Classes e ids

• O que são classes?
• As classes são uma forma de identificar um grupo de elementos. Através delas, pode-se atribuir formatação a VÁRIOS elementos de uma vez. Exemplo:
• Código CSS:
• .classe1 {
• background: blue;
• }
• O que são ids?
• As ids são uma forma de identificar um elemento, e devem ser ÚNICAS para cada elemento. É como se fossem impressões digitais de nossos dedos ou RGs. Através delas, pode-se atribuir formatação a um elemento em especial. Exemplo:Código CSS:
• #idUm {
• background: blue;
• }

Box model

• Basicamente, a idéia do box model é composta por quatro partes:
• conteúdo
• espaçamento
• bordas
• margens
• 
• Bildunterschrift: Box model

Box-model

• Se aplicarmos a classe acima em um elemento, ele vai ter as dimensões que setamos (50 pixels de altura e largura), certo? Errado. O elemento vai ser renderizado com 72 pixels de altura e 92 pixels de largura. Isso acontece devido ao fato das propriedades padding e border serem somadas à largura e altura já definidas, aumentando as dimensões do elemento. Isso nos leva a ver que as propriedades width e height definem as dimensões do seu conteúdo e não do elemento como um todo.
• Largura
• 50 (largura definida) +
• 20 (padding left) +
• 20 (padding right) +
• 1 (border left) +
• 1 (border right) => 92 pixels de largura
• Altura
• 50 (altura definida) +
• 10 (padding top) +
• 10 (padding bottom) +
• 1 (border top) +
• 1 (border bottom) => 72 pixels de altura

Border-box

• A propriedade box-sizing permite um novo valor que resolve todos os problemas apresentados nos exemplos anteriores:
• box-sizing: border-box;
• O que ela faz? Simples. Ela altera o comportamento do box-model, fazendo com que o navegador calcule a largura/altura do elemento contando não apenas o seu conteúdo (como visto no content-box), mas também considerando o padding (espaçamento) e border (borda) do elemento.

Propriedade Background Inserindo fundo nos elementos

• Color
• Define a cor do fundo.
• Possíveis valores:
• inherit: Herda o valor do elemento pai.
• transparent: Define cor como transparente.
• <cor>: Define uma determinada cor.
• div {
• background-color: gray;
• }
• Image
• Define a imagem de fundo.
• Possíveis valores:
• inherit: Herda o valor do elemento pai.
• none: Indica que não há imagem de fundo.
• url(): Define a localização da imagem de fundo.
• div {
• background-image: url("../img/bg.png");
• }

Background

• Repeat
• Define a posição de repetição da imagem de fundo.
• Possíveis valores:
• inherit: Herda o valor do elemento pai.
• repeat: Repete a imagem vertical e horizontalmente.
• repeat-x: Repete a imagem horizontalmente.
• repeat-y: Repete a imagem verticalmente.
• no-repeat: Não repete a imagem.
• div {
• background-repeat: no-repeat;
• }
• Attachment
• Define se a imagem definida irá rolar juntamente com o viewport, ou se irá ficar fixo.
• Possíveis valores:
• inherit: Herda o valor do elemento pai.
• fixed: Mantém a imagem de fundo fixa na posição definida independente da rolagem do viewport.
• scroll: A imagem de fundo acompanha a rolagem do viewport.
• div {
• background-attachment: fixed;
• }

Background

• Position
• Define a posição da imagem de fundo. Observe que esta propriedade necessita de atenção de acordo com o background-repeat definido.
• inherit: Herda o valor do elemento pai.
• <porcentagem>: sendo A e B dois números, quando declaramos o position com A% e B%, a posição A,B da imagem ficará na posição A%, B% do elemento.
• <comprimento>: sendo A e B dois números, quando declaramos o position com Apx e Bpx, a posição A,B da imagem ficará na posição Apx, Bpx do elemento.
• top: Equivale a 0% na posição vertical.
• bottom: Equivale a 100% na posição vertical.
• left: Equivale a 0% na posição horizontal.
• right: Equivale a 100% na posição horizontal.
• center: Caso não tenha sido declarado um valor horizontal, equivale a 50% na posição horizontal, ou, caso não tenha sido declarado um valor vertical, equivale a 50% na posição vertical.
• div {
• background-position: top center;
• }
• Background
• É uma propriedade abreviada que une todas as propriedades do background.
• div {
• background: gray url("../img/bg.png") no-repeat fixed top center;
• }

Font

• A font trata das caracteristicas de todos os textos do site. Ela pode ser aplicada diretamente ao elemento body e por consequência todos os elementos filhos herdarão esta propriedade.
• Family
• Determina a familia da font a ser usada. Existem dois tipos básicos: as famílias e as famílias genéricas
• As famílias genéricas podem ser três:
• serif: Font com serifa.
• sans-serif: Font sem serifa.
• monoespace: Font com a mesma largura em todos os caracteres.
• Serifa nada mais é do que aquelas pontinhas que tem em algumas fontes tipo Times, ou seja, Times é uma font com serifa e Arial é uma font sem serifa.
• div {
• font-family: "Times New Roman", Times, serif;;
• }
• Entre aspas vai o nome da font, seguido da familia (Times) e depois da família genérica (serif).

Propriedade Display

• Block
• O elemento se comporta como um bloco. Ocupando praticamente toda a largura disponível na página. Elementos de parágrafo (p) e título(h1, h2, ...) possuem esse comportamento por padrão.
• Inline
• O elemento se comporta como um elemento em linha. Exemplos de elemento que se comportam assim são por exemplo as tags span e a.
• Inline-block
• Semelhante ao inline, no entanto, ao definirmos inline-block em um elemento, conseguimos definir as propriedades de largura e altura para ele. Coisa que não conseguimos em um elemento com display: inline.
• None
• Ao contrários dos valores atuais, o valor none permite, informalmente dizendo, que você desative a propriedade do elemento. Quando você utiliza essa propriedade, o elemento e todos seus elementos filhos não são renderizados na página.
• Uma coisa importante a ressaltar que a propriedade display: none não é a mesma coisa da propriedade visibility: hidden. Nessa última o elemento não aparece na tela mas é renderizado na página, ou seja, vemos um espaço vazio no lugar do elemento; já a propriedade display: none não renderiza o elemento e, o espaço que era ocupado por ele, é ocupado pelo elemento seguinte no fluxo do documento.

Propriedade Margin e Padding

• Margin
• É a margem do elemento, ou seja, o espaçamento externo do elemento.
• margin-top
• Define a margem superior do elemento.
• margin-right
• Define a margem direita do elemento.
• margin-bottom
• Define a margem inferior do elemento.
• margin-left
• Define a margem esquerda do elemento.
• Padding
• É o preenchimento do elemento, ou seja, o espaçamento interno do elemento.
• padding-top
• Define o preenchimento superior do elemento.
• padding-right
• Define o preenchimento direito do elemento.
• padding-bottom
• Define o preenchimento inferior do elemento.
• padding-left
• Define o preenchimento esquerdo do elemento.

Float

• left: Elemento é empurrado para baixo de elementos com float left;
• right: Elemento é empurrado para baixo de elementos com float right;
• both: Elemento é empurrado para baixo de elementos com float left ou right;
• none: Elemento não é empurrado para baixo de elementos com float.