O que é CSS3?
CSS3, ou Cascading Style Sheets versão 3, é a versão mais recente da linguagem de estilo utilizada para definir a apresentação de documentos HTML. Com CSS3, é possível controlar o layout, cores, fontes, espaçamento e muitos outros aspectos visuais de uma página web.
Estrutura Básica do CSS3
CSS3 pode ser adicionado a um documento HTML de três maneiras principais:
- Inline CSS: Adicionado diretamente aos elementos HTML usando o atributo
style. - Internal CSS: Adicionado dentro da tag
<style>no cabeçalho do documento HTML. - External CSS: Adicionado em um arquivo CSS separado e linkado ao documento HTML usando a tag
<link>.
Exemplo de um arquivo HTML com CSS interno e externo:
Seletores e Propriedades Básicas
- Seletores: São utilizados para escolher quais elementos HTML serão estilizados. Exemplos de seletores incluem elementos (
h1,p), classes (.minhaClasse) e IDs (#meuId). - Propriedades: São usadas para definir os estilos dos elementos. Algumas propriedades comuns incluem
color(cor do texto),background-color(cor do fundo),font-size(tamanho da fonte) emargin(margem).
Exemplo de uso de seletores e propriedades:
Novos Recursos do CSS3
CSS3 introduziu vários novos recursos que facilitam a criação de layouts complexos e estilos sofisticados:
- Gradientes: Permitem criar transições suaves entre duas ou mais cores.
- Sombras: Adicionam sombras aos elementos, criando efeitos de profundidade.
- Transições e Animações: Permitem animar propriedades CSS de maneira suave.
- Flexbox e Grid: Facilitam a criação de layouts responsivos e flexíveis.
Exemplo de uso de gradientes e flexbox:
Conclusão
CSS3 é uma ferramenta poderosa para estilização de páginas web, oferecendo uma ampla gama de recursos para criar designs atraentes e responsivos. Compreender os conceitos básicos e explorar os novos recursos permitirá que você crie sites visualmente impressionantes e funcionais.
