13 - Introdução a CSS 3

CSS 3 é a última versão do Cascading Style Sheets (CSS), uma linguagem de estilo usada para controlar a aparência e o layout de documentos HTML. O CSS 3 é mais poderoso do que o CSS 2.1 e oferece muitas novas funcionalidades, como seletores mais sofisticados, animações, transições, gradientes e muito mais.

Recursos do CSS 3

Alguns dos principais recursos do CSS 3 incluem:

• Seletores: O CSS 3 oferece seletores mais sofisticados que permitem selecionar elementos HTML com maior precisão.
• Media Queries: O CSS 3 permite que os desenvolvedores definam regras de estilo diferentes para diferentes dispositivos.
• Flexbox: O CSS 3 permite que os desenvolvedores criem layouts flexíveis usando as propriedades do Flexbox.
• Animations: O CSS 3 permite que os desenvolvedores criem animações usando as propriedades de animação.
• Transições: O CSS 3 permite que os desenvolvedores criem transições suaves entre estados de estilo diferentes.
• Backgrounds: O CSS 3 permite que os desenvolvedores criem fundos de imagem, gradientes e cores de gradiente.
• Outros: O CSS 3 também suporta outras funcionalidades, como fontes personalizadas, sombras, bordas personalizadas e muito mais.

Usabilidade

O CSS 3 permite aos desenvolvedores criar layouts flexíveis, animações, transições, fundos de imagem e outros efeitos visuais mais sofisticados. Com o CSS 3, os desenvolvedores podem criar sites responsivos que se adaptam automaticamente a diferentes dispositivos e tamanhos de tela, criar layouts mais complexos, criar animações para destacar elementos em páginas HTML e muito mais.

14 - Comentários em CSS 3

Em CSS 3, os comentários são usados para adicionar anotações ao código, como por exemplo para explicar o que uma parte do código está fazendo. Eles não afetam o comportamento do código e são ignorados pelo navegador. Comentários em CSS são definidos entre /* e */.

Exemplo de comentário:

/* Deixa o Titulo azul */
h1{
    color: blue;
}

Além disso, os comentários podem ser usados para desabilitar partes do código. Por exemplo, para desabilitar uma regra de estilo, basta colocar um comentário antes da regra de estilo:

/*
  body {
    font-size: 16px;
  }
*/

Neste exemplo, o código entre os comentários foi desabilitado. O código entre os comentários será ignorado pelo navegador e não afetará o comportamento do código.

15 - Seletores

Seletores em CSS são utilizados para definir quais elementos HTML serão afetados pelas regras de estilo. Eles são a base para o funcionamento do CSS e permitem que você defina como os diferentes elementos de uma página devem ser estilizados.

Existem vários tipos de seletores em CSS, incluindo seletores de tipo, seletores de classe, seletores de ID, seletores de atributo e seletores combinados. Alguns exemplos de seletores são:

Seletores de tipo:

são usados para selecionar elementos HTML com base em seu tipo. Por exemplo, o seletor "p" seleciona todos os parágrafos em uma página.

Exemplo:

p {
  color: red;
}