Skip to content

Basic-CSS.md

Latest commit

 

History

History
73 lines (54 loc) · 4.76 KB

Basic-CSS.md

File metadata and controls

73 lines (54 loc) · 4.76 KB

CSS

CSS, ou Cascading Style Sheets, é uma linguagem de estilo usada para controlar a apresentação e o layout de elementos HTML em páginas da web. Ela permite que você defina a aparência, o posicionamento e o design dos elementos HTML, como texto, imagens e formulários. Aqui estão alguns conceitos básicos em CSS:

  1. Seletores: Os seletores CSS são usados para identificar os elementos HTML aos quais você deseja aplicar estilos. Por exemplo, você pode selecionar todos os elementos <p> usando p, ou elementos com uma classe específica usando .classe.

  2. Propriedades: As propriedades CSS definem como os elementos selecionados serão estilizados. Por exemplo, a propriedade color define a cor do texto, e a propriedade font-size define o tamanho da fonte.

  3. Valores: As propriedades são acompanhadas de valores que especificam como a propriedade deve ser aplicada. Por exemplo, color: blue define a cor do texto como azul.

  4. Declarações: Uma declaração CSS é composta por um seletor, uma ou mais propriedades e seus valores. Por exemplo:

    p {
    color: blue;
    font-size: 16px;
}

  5. Arquivo CSS externo: É possível colocar todas as regras CSS em um arquivo separado com a extensão .css e, em seguida, vinculá-lo à página HTML usando a tag <link> no <head> do documento HTML. Isso é uma prática recomendada para manter o código organizado.

  6. Estilos embutidos: Você também pode inserir estilos diretamente em um elemento HTML usando o atributo style. Por exemplo:

    <p style="color: red; font-size: 20px;">Este é um parágrafo vermelho.</p>

  7. Comentários: Você pode adicionar comentários ao seu código CSS usando /* para iniciar um comentário e */ para encerrá-lo. Por exemplo:

    /* Isto é um comentário CSS */
p {
    color: green;
}

  8. Herança: Elementos HTML herdam estilos de seus elementos pais. Isso significa que, se você definir um estilo em um elemento pai, ele pode afetar os elementos filhos, a menos que os elementos filhos tenham estilos específicos definidos.

  9. Cascata: A "Cascata" em Cascading Style Sheets refere-se à ordem de prioridade dos estilos quando há conflitos. Existem três níveis de cascata: estilos do usuário, folhas de estilo externas e estilos embutidos. Os estilos embutidos têm a maior prioridade, seguidos pelos estilos de folhas de estilo externas e, por fim, pelos estilos do usuário.

  10. Seletividade: Quando vários seletores se aplicam ao mesmo elemento, a seletividade é usada para determinar qual estilo será aplicado. Por exemplo, um seletor mais específico tem uma seletividade mais alta e, portanto, terá precedência sobre seletores mais genéricos.

Estes são os conceitos básicos em CSS que ajudam a criar uma apresentação atraente para páginas da web. À medida que você se aprofunda no mundo do desenvolvimento web, aprenderá técnicas avançadas e propriedades adicionais para criar designs mais complexos e responsivos.

Exemplo

Aqui está um exemplo simples de código CSS que estiliza um parágrafo em uma página HTML:

/* Este é um comentário CSS */
p {
    color: blue;           /* Define a cor do texto como azul */
    font-size: 16px;       /* Define o tamanho da fonte como 16 pixels */
    font-family: Arial, sans-serif;  /* Define a família da fonte */
    margin: 10px;          /* Define margens de 10 pixels em todos os lados */
    padding: 5px 10px;     /* Define preenchimento de 5 pixels acima/abaixo e 10 pixels à esquerda/direita */
    background-color: #f0f0f0;   /* Define a cor de fundo como cinza claro */
    border: 1px solid #999;      /* Define uma borda de 1 pixel sólido cinza */
    text-align: center;    /* Define o alinhamento do texto como centralizado */
}

/* Estilos para links dentro de parágrafos */
p a {
    text-decoration: none;  /* Remove a decoração de sublinhado de links */
    color: #007acc;        /* Define a cor do link como azul */
}

/* Estilo para links quando o mouse está sobre eles */
p a:hover {
    text-decoration: underline;  /* Adiciona um sublinhado quando o mouse está sobre o link */
}

Neste exemplo, estamos estilizando todos os elementos <p> em uma página, definindo a cor do texto, o tamanho da fonte, a margem, o preenchimento, a cor de fundo, uma borda e o alinhamento do texto. Além disso, também estilizamos os links dentro dos parágrafos, removendo a decoração de sublinhado, definindo a cor do link e adicionando sublinhado quando o mouse passa por cima do link.

Lembre-se de que você deve vincular este arquivo CSS a uma página HTML usando a tag <link> no <head> do documento HTML ou incorporar os estilos diretamente em uma tag <style> no <head> se preferir estilos embutidos.