Conhecimentos em CSS3

Anatomia de um código CSS

fazer um esquema em imagem depois

Estilo inline

É o tipo menos indicado pois as alterações tem que ser feita em cada tag separadamente

EXEMPLO:

Estilo local

Indicado para projetos pequenos (poucas páginas), mas ainda sim não é a melhor opção. As configurações são aplicadas na área head com a tag <style>, sendo assim são alterações por página.

EXEMPLO:

        
            <head>
            <meta charset="UTF-8">
            <name="viewport" content="width=device-width">
            <title>Estilo local</title>
            <style>
                body {
                    background-color
                    text-align
                    color
                    font-family
                    }
                h1 {
                    background-color
                    font-family
                    color
                    font-size
                    text-align
                    }
            <head>

Estilo externo

É a melhor opção, permite criar um arquivo onde você faz as alterações e o estilo é aplicado em todas as páginas, isso por meio de um link na área head.

Você abre um link:css na área head e cria um arquivo .css, esse arquivo vai abrir uma guia de edição de estilo. Para prevenir erros adicionar a regra @charset = "UTF-8" no início do código. Adicionar esse link em todas as páginas que vão receber o estilo.

Lembrete: segurar Ctrl e clicar em cima do nome sugerido no href para criar o arquivo de stilo

Tipografia e harmonia de cores

Assim como as cores passam sentimento e tem significado as fontes de texto também. É necessário sempre harmonizar texto e cores.

Dicas de sites úteis para criação de peletas de cores:

Tamanhos de fontes

Medidas indicadas pelo W3C px (medida absoluta) ou em (medida relativa). 1em = 2px

Algumas unidade de medida para fonte:

Aplicação de cores em css

As cores podem ser representadas por:

Para aplicação de gradiente utilizar background-image. Você pode editar seu gradiente com quantas cores quiser basta aplicá-las entre parenteses depois do background-image. Também pode encolher o sentido do gradiente usando os comandos to top, right, left, to bottom e em graus caso comece dos cantos.

EXEMPLO 1:

        
            body {
                background-image: linear-gradient (45deg, cor1, cor2, cor3,)
                }

EXEMPO 2:

        
            body {
                background-image: linear-gradient (to top, cor1, cor2)
                }

Seletor id

É um seletor CSS que permite a edição individual de uma tag que tenha outras iguais na página. Toda tag que receber o seletor id vai ter seu estilo editado separadamente das demais, mas atenção, só pode ter um seletor id por página.

        
            No HTML:
            <body>
                <h1 id="principal"> Título principal </h1>
            </body>

            Aplicar no CSS:
            <style>
                h1#principal {
                background-color: blue;
                color: whit;
            }
            <style>

Essa tag h1 que recebeu o seletor id="principal" receberá edições diferentes das outras tags h1 que não tem o id.

Seletor class

Tem basicamente a mesma utilidade do seletor id, porém pode ter classes diferentes e mais de uma igual na mesma página. 

        
            No HTML: 
        <body>
        <h2 class="basico">CSS básico</h2>
        <h2 class="inter">CSS intermediário</h2>
        <h2 class="avan">CSS avançado</h2>
        <body>

        Aplicar no CSS:
        <style>
        .basico {
            color: darkgreen;
        }
        .inter {
            color: darkyellow;
        }
        .avan {
            color: darkred;
        }
        </style>

Cada um dos <h2> receberam uma cor diferente, de acordo com a class.

Pseudo-classes

Fazem alterações de estilo interativas. Você atrela a tag desejada à pseudo-classe por mei do : (dois pontos).

    Ex: div:hover {
        background-color: green;
    }
        div > p {
            display: none;
        }

    O sinal > indica que a tag <p> está localizada dentro do campo de domínio da tag <div>

Pseudo-classes que aprendi até agora:

←Voltar