Explorando os Fundamentos do CSS

Seletores e Propriedades Detalhada

Seletores Avançados:

Seletores de Atributo: Permitem selecionar elementos com base em seus atributos. Exemplo: input[type="text"] { border-color: blue; } seleciona todos os inputs de texto e aplica uma borda azul.
- Seletor de Atributo: input[type="text"] seleciona todos os campos de entrada (input) do tipo texto (type="text") e aplica uma borda azul. Este seletor é especialmente útil para aplicar estilos específicos a diferentes tipos de inputs (como text, email, password, etc.) sem a necessidade de classes ou IDs adicionais.
Pseudo-classes e Pseudo-elementos: Estendem os seletores para definir estilos em estados específicos ou partes de um elemento. Exemplo: a:hover { color: red; } muda a cor do texto para vermelho quando o mouse passa sobre um link.
- Pseudo-classe: a:hover define o estilo para links (a) quando o mouse está sobre eles (hover), neste caso, mudando a cor do texto para vermelho. As pseudo-classes são usadas para definir o estilo de um elemento em seu estado especial, como :hover, :focus, :active, etc.
- Pseudo-elemento: p::first-letter aplica estilos à primeira letra de cada parágrafo (p), como aumentar o tamanho da fonte para 200% e mudar a cor para verde. Os pseudo-elementos, como ::first-letter e ::before, permitem estilizar partes específicas de um elemento.
- Pseudo-classe em inputs: input:focus altera a cor da borda do campo de entrada para verde quando está focado (ou seja, quando o usuário clica ou navega até ele com o teclado). Isso é útil para dar feedback visual ao usuário sobre qual elemento de formulário está ativo.

Exemplo Prático

<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Seletores Avançados CSS</title>
    <style>
        /* Seletor de Atributo */
        input[type="text"] {
            border: 2px solid blue;
            margin: 10px;
            padding: 5px;
        }

        /* Pseudo-classe */
        a:hover {
            color: red;
        }

        /* Pseudo-elemento */
        p::first-letter {
            font-size: 200%;
            color: green;
        }

        /* Pseudo-classe em inputs */
        input:focus {
            border-color: green;
        }
    </style>
</head>

<body>
    <header id="header">Cabeçalho da Página</header>
    <p>Este é um parágrafo comum na página.</p>
    <p class="highlight">Este é um parágrafo destacado com classe.</p>
    <input type="text" placeholder="Campo de texto">
    <a href="#">Clique aqui</a>
    <footer>Rodapé da Página</footer>
</body>

</html>

Propriedades de Texto e Layout:

text-align: Define o alinhamento do texto dentro de um elemento. Exemplo: text-align: center;.
font-family: Especifica a família da fonte. Exemplo: font-family: 'Arial', sans-serif;.
display: Controla o tipo de caixa de um elemento, com valores como none, block, inline, flex, e grid.

Exemplo Prático

<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Propriedades de Texto e Layout CSS</title>
    <style>
        body{
            font-family: Arial, Helvetica, sans-serif;
        }

        /* Propriedades de Texto */
        .texto-centralizado p {
            text-align: center;
            font-family: 'Arial', sans-serif;
        }

        /* Propriedades de Layout */
        .caixa-escondida {
            display: none;
        }

        footer {
            text-align: center;
            font-family: 'Times New Roman', serif;
        }

        .flex-container {
            display: flex;
            justify-content: space-around;
        }
    </style>
</head>

<body>
    <header id="header">Cabeçalho da Página</header>
    <section class="texto-centralizado">
        <p>Este parágrafo está centralizado.</p>
        <h3>Este subtítulo não fica centralizado</h3>
    </section>

    <div class="caixa-escondida">Este elemento será escondido.</div>
    
    <footer>Rodapé da Página</footer>
    <div class="flex-container">
        <div>Primeiro item flex</div>
        <div>Segundo item flex</div>
    </div>
</body>

</html>

Box Model em Profundidade

O entendimento do Box Model é crucial para o controle preciso do layout e espaçamento dos elementos. A manipulação consciente de margin, padding, e border pode impactar significativamente o design e a disposição dos elementos na página.

Margens Colapsadas: Em certas situações, margens adjacentes de elementos block (como parágrafos) podem colapsar em uma única margem, o que é um comportamento único e importante para entender ao estruturar o layout de uma página.

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Margens Colapsadas</title>
    <style>
        .caixa {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin-bottom: 20px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="caixa">Primeira Caixa</div>
    <div class="caixa">Segunda Caixa</div>
</body>

</html>

Flexbox para Layouts Dinâmicos

Flexbox, ou Flexible Box Layout, é um modelo de layout unidimensional que oferece um método eficiente para alinhar e distribuir espaço entre itens em um contêiner, mesmo quando seus tamanhos são desconhecidos ou dinâmicos. É particularmente útil para interfaces responsivas e complexas onde os elementos precisam ser bem ajustados e alinhados de acordo com o espaço disponível.

Propriedades do Contêiner Flex (Flex Container):