Tradução em progresso.

CSS (Cascading Style Sheet - Folha de Estilo em Cascata) é usado para estilizar e criar layout de paginas web - Por exemplo para alterar fonte, cor, tamanho e espaçamento do conteúdo, dividir o conteudo em múltiplas colunas, ou adicionar animações e outros componentes decorativos. Este módulo te coloca no caminho para começar a dominar o CSS, com o basico de como ele funciona, incluindo seletores, propriedades, escrita dentro dos padrões CSS, aplicação de CSS para HTML, como especificar tamanho, cor, e outras propriedades, como cascata e herança, e depuração de CSS.

Pré-requisitos

Antes de iniciar este módulo, você deve ter:

  1. Familiaridade com o uso de computadores, e usar a web passivamente (i.e. somente repare nisto, consumindo o conteúdo).
  2. Um ambiente de trabalho básico configurado como detalhado em instalação do software básico, e um entendimento de como criar e gerenciar arquivos, como podemos ver em Lidando com arquivos.
  3. Familiaridade básica com HTML, tais como discutido no modulo Introdução ao HTML.

Nota: Se você está trabalhando num computador/tablet ou em outros dispositivos onde você não tem a habilidade para criar arquivos ou não pode, você pode tentar exibir (na maior parte dos casos) o código exemplo em um site de codificação online como JSBin ou Thimble.

Guias


Este módulo contém os seguintes artigos, ao qual levará você através de toda a base teórica de CSS, e providenciará ampla oportunidade para você testar algumas habilidades.

Como o CSS funciona
Neste módulo nós introduzimos alguns conceitos teóricos, entendendo o que é o CSS, como o navegador converte o HTML para um DOM, como CSS é aplicado em elementos do DOM, alguns exemplos básicos de sintaxe, e qual código é usado para incluir o nosso CSS em nossa página.

Sintaxe CSS
Continuando, nós mergulhamos dentro da sintaxe do CSS com muito mais detalhes, olhando como as propriedades e seus valores são declarados, múltiplas declarações dentro de blocos de declaração, e blocos de declarações e seletores dentro das normas CSS. Nós terminamos o artigo olhando para outros componentes da sintaxe CSS tais como comentários e espaços em branco.
Seletores
Os seletores foram mencionados no artigo anterior, mas nesta seção estudaremos com mais detalhes, quais tipos de seletores estão disponíveis, e como cada um funciona.
CSS valores e unidades
Há muitos tipos de propriedade CSS para considerar, desde numerosos valores para colorir, até funções que realizam uma certa ação (como embutir uma imagem de fundo, ou rotacionar um elemento). Alguns deles dependem de unidades particulares para especificar o valor exato que eles estão representando - digamos que sua caixa seja de 30 pixels, ou 30 centímetros, ou 30 ems? Neste guia, nós olharemos valores comuns como tamanho, cor e funções simples, também explorar as unidades menos comuns como graus, e valores numéricos únicos.
Cascata e herança
CSS tem dois sistemas diferentes, mas relacionados para resolver situações em que você tem conflitos de seletor (diferentes seletores selecionam os mesmos elementos, que um ganha e acaba sendo aplicado?) E elementos aninhados dentro de outros elementos (algumas vezes faz sentido herdar parte do estilo aplicado aos elementos pai, mas nem sempre) Este artigo abrange as duas opções com um nível de detalhamento moderado.
O modelo de caixa (box model)
O box model CSS é o fundamento de layout na web - Cada elemento é representado como um retângulo, com o conteúdo ca caixa (box), padding, borda, e margem construidos um em torno de outro como se fossem camadas de uma cebola. Conforme o navegador processa uma página Web, ele determina quais estilos são aplicados ao conteúdo de cada box, o tamanho das camadas de cebola ao redor e onde cada box se encontra em relação às outras. Antes de começar a escrever CSS, você precisa entender o box model.
Depuração CSS
No final deste módulo nós estudaremos o básico do debugging CSS, inclusive explorando o CSS aplicado na página, e outras ferramentas que podem ajudar você à encontrar erros no seu código CSS.

Avaliação

A seguinte avaliação testará seu entendimento básico de CSS apresentado nos artigos anteriores.
Fundamentos e compreenssão do CSS.
Esta avaliação testará seu conhecimento nos artigos apresentados acima com alguns exercícios cuidadosamente selecionados.

Veja também

Literatura Intermediária web: Introdução ao CSS
Um excelente curso da fundação Mozilla que explora e testa as habilidades discutidas neste módulo de Introdução ao CSS. Aprenda a estilizar elementos HTML em páginas usando CSS, seletores, atributos e valores. 

Etiquetas do documento e colaboradores

Última atualização por: mdnwebdocs-bot,