CSS

CSS

1. Salva arquivo separado *.css.

   • body{
     • h1{
       • h1 = seletor do CSS, etc
       • main h1{
         • Restringe a configuração somente às TAGs h1 que encontram-se dentro da TAG main.
         • Não é necessário especificar TAGs intermediárias entre "main" e "h1" se houver.
       • h1, h2 {
         • É possível configurar duas TAGs ao mesmo tempo.
     • body = seletor do CSS

2. <head></head> HTML

   • <link rel="stylesheet" href="site.css">

3. Atributos da página

   • font-family: "Times New Roman", "Arial", serif;
     • background-color: #F2FFFC;
       • font-size: 60px;
         • font-size: 120%
       • COR HEXADECIMAL: #35AF18 35 = TOM DE VERMELHO AF = TOM DE VERDE 18 = TOM DE AZUL AF = VALOR MÁXIMO = 255
     • Gogle fontes: Codigo que carrega banco de fontes do Google. Mesmo que o usuário não possua tal fonte instalada em sua máquina, o navegador baixa esta fonte e à instala devidamente.
       • <head></head> HTML
         • <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson +Text:400,400italic,600">
           • <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
             • Em seguida, no arquivo site.css, podemos usá-las em seus respectivos lugares.

4. Cores inherit

   • Dado o HTML:
     • <ul> <li> <a href="#">Link 1</a> </li> </ul>
       • CSS
         • ul { color: pink; } ul li a { color: inherit; }

5. Inspecionar através do NAVEGADOR.

6. MEDIDAS

   • padding: 20px; altura do box
     • A propriedade padding controla o espaço entre o conteúdo de um elemento e sua borda. Espaço interno.
   • margin: 0; epaço entre o box e a margem da página
     • A propriedade margin controla o espaço entre elementos.
   • box-sizing: border-box;
     • configura espaçamento tomando como parâmetro o espaço do conteúdo ou contando conteúdo + borda + padding , etc.
       • controla apenas como a largura e a altura de um elemento deve ser calculada.
         • width junto com o box-sizing = largura é medida pelas bordas, e não pelo espaço interno apenas.
   • line-height: 30px;
     • define espaçamento entre linhas de texto.
   • border: 5px solid #851944;
     • borda completa.
       • border-bottom: 10px solid #851994;
         • borda inferior
           • É possível alterar as cores de cada borda individualmente.
             • transparent; A borda pode ser configurada como transparente.
   • width e higth
     • As propriedades width e height controlam apenas o tamanho de um elemento, e não afetam o espaçamento entre esse elemento e seus vizinhos.

7. reset

   • zera o estilo padrão do navegador
     • Resets famosos Eric Meyer, Normalize
       • Eric Meyer é o mais usado por ser mais leve (1kb enquanto que o Normalize tem 7kb) e zerar toda a configuração do navegador não implementando nenhuma configuração de estilo à página.
         • Ao importar para html, colocar sempre antes de qualquer css.
           • sempre use um reset
             • O que ganhmos?
               • Uma base sólida para desenvolver nosso próprio layout. Eliminar diferenças de renderização entre navegadores. Correção de alguns bugs presentes em navegadores específicos.

8. Empilhamento

   • TAGs com padrão block (Empilhadas. <p>, <li>, etc)
   • TAGs com padrão inline (Não empilhadas. Mesma linha. <strong>, <a>, etc)
     • Elementos inline não podem ter altura definida. Se orienta pelo tamanho da fonte.
       • inline-block = permite configurar tamanho.
         • aside li{ display: inline-block;}

9. *{} altera todos os elementos da página.

10. Identificação

    • HTML = <ul class="icones-sociais"> CSS = .icones-sociais li{
      • É difícil dizermos que um determinado componente visual nunca será repetido. Por isso, mesmo quando queremos identificar um componente único na página para estilizá-lo, é recomendável usar classes para essa estilização.
        • Devemos usar classes sempre que possível. Identificação mais precisa.
          • No HTML, podemos dar mais de uma classe para um elemento: basta separar os nomes das classes por espaços.
            • <header class="pagina-inicial cabecalho-principal">
              • .pagina-inicial { .cabecalho-principal{
                • Um bom nome para a classe não deve ser ligada a aparência do elemento e sim ao seu comportamento.
          • prioridade
            • Tem prioridade quem aparece por último na declaração dentro do CSS. Neste caso "titulo-principal" vem por último.
              • <div class="destaque titulo-principal"> .destaque { .titulo-principal {
                • Se estivesse nesta ordem... .titulo-principal { .destaque { "destque" teria prioridade.

11. Letras maiúsculas:

    • HTML: Deve ficar em letras com caixa normal, pois o mundo e o computador entende palavras escitas com letras maiúsculas como sendo síglas. Para deixar as letras maiúsculas sem prejudicar o entendimento da web utilize o CSS. CSS: text-transform: uppercase;

12. image replacement:

    • HTML = <a href="https://github.com/joaodasilva">Github</a>
      • .icones-sociais a { width: 40px; height: 40px; display: block; text-indent: -99999px; }
      • .github { background-image: url(github.png); } .twitter { background-image: url(twitter.png); } .linkedin { background-image: url(linkedin.png); }
    • A técnica do "image replacement" deve ser usada apenas para imagens secundárias, supérfluas para o conteúdo. Apenas estas serão ignoradas. As imagens mais importantes ficam no HTML e, portanto, são indexadas.

13. float (flutuar):

    • float: left ou right;
      • clear: both (ambos); (clearfix)
        • Empurra o conteúdo que você não quer que fique ao lado do float para baixo.
          • .clearfix{ Boa prática.
    • Os floats aparecem na mesma altura que estavam antes. Formam uma linha.

14. Ocupar % da tela:

    • width: 85%;
      • width: 100%; (ocupa a largura da tela inteira) higth: 100%; (ocupa a altura da tela inteira)

15. position

    • position: reletive;
      • muda a posição do elemento de acordo com a posição original dele. Não altera o fluxo do html
      • pisition: absolut;
        • tem como referencia a tela do navegador
        • position: fixed;
          • fica fixo com relação a tela
          • Sempre que usar position fixed ou absolut deve-se atentar para o resto da página. No caso do fixed deve-se inserir padding-botton no container para que o rodapé não fique em cima do conteúdo.
    • top: 0; botton: 0; left: 0; right: 0;