Introdução do CSS

Tradução em progresso.

CSS

CSS (Cascading Style Sheet - Folha de Estilo em Cascata) é usado para estilizar e criar layout webpages - Por exemplo para alterar 
font (fonte), color(cor), size(tamanho) e espaçamento do conteúdo, quebra dentro múltiplas colunas, ou adicionar animações e outros componentes decorativos. Este módulo te coloca no caminho de CSS maestria com o basico de como isto trabalha, incluindo seletores (selectors) e propriedades, escrita dentro dos padrões CSS, aplicação de CSS para HTML, como especificar tamanho (lenght), cor (color), e outras unidades CSS, cascata e herança, e  depurar CSS.

Pré-requisitos
Antes de iniciar este módulo, você deve terM:

  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 na instalação do software básico, e um entendimento de como criar e gerenciar arquivos, tais como detalhadamente lidar com arquivosm.
  3. Basica familiaridade com HTML, tais como discutido na introdução para o módulo de 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 programação de codificação online como JSBin ou Thimble.

Guias


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

 

Como CSS trabalha

Neste módulo nós iniciamos no campo teórico, repare o que esta classe é, como o browser torna dentro do HTML para um glossário (DOM), como CSS é aplicado para peças de DOM, alguns básicos exemplos de sintáxe, e qual código é usado para atualizar a inclusão do nosso CSS em nossa página.


CSS Sintaxe

Próximo módulo nós mergulhamos dentro da sintáxe com muito mais detalhes, olhando em como propriedades e valores são declarados, múltiplas declarações dentro de blocos de declaração, e blocos de declarações e seletores dentro do CSS norma. Nós terminamos o artigo olhando na sintáxe CSS  do componentes tais como comentários e espaços em branco.

Seletores

Seletore são mencionados no artigo prévio, mas, neste guia, nós vamos dentro de um monte  de detalhes, mostrar o que s seletores são avaliados e como eles fazem.

CSS valores e unidades

Há muitos tipos de propriedade CSS para conciderar, de numerosos valores para colorir funções que realizam uma certa ação(como embutir uma imagem de fundo, ou rodando um elemento.) Alguns destes confia em unidades particulares para especificar o valor exato que eles estão representando - você que sua caixa seja de 30 pixels, ou 30 centímetros, or 30 ems? Nestre guia nós olharemos valores comuns como tamanho, cor e funções simples, também explorar os menos comuns unidades como graus, e até 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 ganham e acabam sendo aplicados?) E elementos aninhados dentro de outros elementos (parte do estilo aplicado aos elementos pai faz Sentido a ser herdado pelos elementos filho, alguns não.) Este artigo abrange ambos os sistemas em detalhe suficiente para ser útil, mas não impressionante.
O modelo de caixa
O modelo de caixa CSS é o fundamento de layout na web - Cada elemento é representado como um retângulo retangular, com o conteúdo da caixa, padding, border, e construção de margem em outro como as camadas de uma cebola. Como browser renderiza uma página, isto exercita qual o estilo será aplicado no conteúdo de cada caixa, quão variada a quantidade de camadas de cebola são, e onde as caixas ficam em relação ao outro. Antes de entender como criar o layout , você precisa entender o modelo caixa.
Debugar 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 a você à encontrar erros no seu 
código CSS.

Avaliação

Na seguinte avaliação testará seu entendimento do básico CSS coberto no guia acima.
Fundamentos e compreenssão do CSS.
A seguinte declaração testarão seu conhecimento CSS básico coberto no item abaixo com alguns exercícios preparados para isto.

Veja também

Literatura Intermediária web: Introdução do CSS
Uma excelente curso da fundação Mozilla que explora e testa um monte de habilidades falada sobre Introdução do módulo CSS. Aprender à estilizar elementos HTML em páginas usando CSS, seletores, atributos e valores.

Etiquetas do documento e colaboradores

 Colaboradores desta página: ThiagoMSArrais, mak213k
 Última atualização por: ThiagoMSArrais,