CSS

- Seletores -

As folhas de estilo CSS's são um mecanismo usado para adiconar estilo a uma página web. Elas são usadas para configurar um resultado visual dos elementos HTML, usando para isso regras.
Não basta ter o melhor conteúdo. Ele precisa estar bem apresentado!

O CSS pode ser inserido na página de três formas distintas:

CSS Inline: O estilo é aplicado dentro de parâmetros de HTML5, usado para alterar áreas pontuais:

    <body style="font-family: Arial; color: blue;" >
        <h1 style="color: red;">Capítulo 1</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, nihil rerum ut error! 
           A laudantium sequi eius exercitationem modi?</p>
        <h2>Capítulo 1.1</h2>
        <p style="font-style: italic;">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
           Pariatur aperiam minus architecto obcaecati a excepturi! Magni!</p>
    </body>

CSS Interno: Podemos adicionar a TAG <style> dentro da área <head> do nosso documento HTML local e dentro dele aplicar as configurações.

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS Interno</title>
        <style>
            body{
                font-family: Arial;
                color: blue;
            }
            h1{
                color: red;
            }
        </style>
    </head>

CSS Externo: A maneira mais comum é usando o CSS em um arquivo externo. Isso permite uma maior organização e possibilita que o código seja reaproveitado em outras páginas.
Para usar o arquivo externo usamos a TAG <link> dentro da área <head>.

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS Interno</title>
        <style>
        <link rel="stylesheet" type="text/css" href="css/style.css">

Esta é a sintaxe usada no CSS:

sintax-css — Fonte: https://www.cursoemvideo.com.br/

Seletor: Aqui definimos a qual ou quais elemento serão aplicados o estilo abaixo.
Declaração: Informamos quais elementos do seletor serão modificados. Estas informações devem estar dentro de {}.
Propriedade e Valor: São palavras reservadas do CSS

Podemos usar os seguintes seletores:

        <body>
            <h1>Olá Mundo!</h1>
            <div id="container">
                <a class="subMenu" href="extra/blog.html" target="_blank">PROJETO 3 - Blog</a>
            </div>
        </body>

Elemento: Usado quando queremos aplicar a regra a um elemento HTLM.

        h1{
            color: red;
            }

Id: Usado quando apenas um elemento deve receber o estilo definido na regra.

        #container{
            background-color: #dedee4ec;
            padding: 20px;
            }

Classe: Usamos a classe quando muitos elementos compartilham do estilo definido nessa regra.

        .subMenu{
            list-style-type: circle;
            padding-left: 10px;
            }

Podemos também agrupar mais de um setor, para que a regra seja aplicada a todos:

Agrupamento por elementos

                h1,p,h3{
                    color: red;
                    }

Agrupamento por descendência de elementos

                div p{
                    color: red;
                    }

Agrupamentos por classes (o elemento tem como atributo duas classes)

                .menu.subMenu{
                    list-style-type: circle;
                    padding-left: 10px;
                    }

Agrupamento por descendência de classes (uma classe é interna a outra)

                .menu .subMenu{
                    list-style-type: circle;
                    padding-left: 10px;
                    }

Width: Usado para controlar a largura de um box. Para ter um maior controle, podemos usar o width com os parâmetros abaixo:

Min-width ou Max-width: Aqui definimos oa valor mínimo e máximo que uma página pode assumir.

                                blockquote {
                                    min-width: 200px;
                                    max-width: 400px;
                                }

Calc: Usando este parâmetro, o CSS vai fazer um cálculo para encontrar o valor da largura ou altura da caixa. O calc suporta operações matemáticas como soma, subtração, multiplicação e divisão.

                                blockquote {
                                    width: calc(100%/2-100px);
                                    }

overflow: Esta propriedade é usada quando uma caixa precisa ter um tamanho menor que o espaço em que ela está.
Overflow pode ser customizado com dois valores principais:

Hidden: Usando este valor, o conteúdo é cortado e fica oculto.
Scroll: Neste caso, uma barra de rolagem é apresentada para que o conteúdo excedente possa ser visto.
Além destes, também existem os valores auto e visible, padrão para a maioria dos elementos.

css-overflow1 — Fonte: https://www.cursoemvideo.com.br/

                                blockquote {
                                    height: 29px;
                                    overflow: hidden;
                                }

css-overflow2 — Fonte: https://www.cursoemvideo.com.br/

                                blockquote {
                                    height: 29px;
                                    overflow: scroll;
                                }

Height:

altura

min-height

max-height

@font-face: A propriedade @font-face do CSS3 para importar fontes (tipografia) externas para nossas páginas. Podemos usar uma fonte que não esteja disponível no Google Fontes ou um arquivo personalizado de fonte.

            @font-face {
                font-family: [nome];
                src: url([caminho]);
                }

CSS - Cascading Style Sheets

- Seletores -