A melhor maneira de começar com estilos em CSS3 é vê-los simplesmente como um meio de informações de formatação na tela. Porque a maioria das informações que você vai trabalhar com um texto, é mais fácil começar com o texto como base para a compreensão de estilos. Vamos começar com esta página HTML5 formatado básica:

Um simples título
de texto simples para ir com o título.

No momento, o título eo parágrafo são bastante simples. O texto aparece em qualquer fonte padrão que você escolheu para o seu browser. Normalmente, o texto é preto sobre um fundo branco, a menos que você tiver escolhido uma combinação de cor diferente.

Neste ponto, você pode começar a jogar com a página um pouco para ver como formatar de forma diferente. O procedimento a seguir ajuda a modificar a página de base de modo que parece um pouco mais interessante. Você pode usar qualquer editor de texto que quiser, contanto que ele não adiciona qualquer formatação. No entanto, utilizando-se um produto como o Komodo Edit vai tornar a tarefa muito mais fácil.

1. Criar um novo arquivo HTML5 com o seu editor de texto.

   Seu editor pode não suportar arquivos HTML5. Qualquer arquivo de texto vai fazer. Usando um tipo de arquivo específico geralmente significa que o editor insere algum código para você automaticamente, o que vai lhe poupar tempo digitando.

2. Digite o código da página HTML.

   Certifique-se de que você digite o código exatamente como ele aparece no início desta seção.

3. Insira o seguinte código imediatamente após a

   o

   O atributo type informa o navegador da

4. Dentro das entradas, digite o seguinte código.

   p {font-family: cursiva-font-size: large-color: # 0000ff-background-color: # ffff00-}

   Isso parece complicado, mas realmente não é. O p representa o

   (Parágrafo) tag. Tudo neste entrada afetará o

   tags no seu documento.

   As chaves ({}) dizer ao navegador que todas as instruções de formatação entre eles se aplicam ao

   tags no documento. Você sempre incluir as chaves, como parte da definição de estilo.

   Dentro das chaves, você vê atribuir pares nome e valor. Por exemplo, font-family é o nome de um atributo de CSS que define quais fonte a ser usada. Neste caso, o atributo especifica o tipo de letra cursiva padrão para a plataforma e navegador. Usando os nomes genéricos CSS garante que a sua aplicação vai produzir resultados genericamente compatível com todas as plataformas, usando qualquer browser.

   O atributo font-size define um tamanho relativo. Neste caso, grande especifica que você quer fazer o tipo de letra grande em relação ao seu tamanho padrão. Você não está especificando um tamanho de fonte específica, o que significa que cada plataforma e navegador pode tornar a fonte maior do que o normal para esse ambiente individual.

   O atributo de cor especifica um, verde valor vermelho, azul a ser usado para a cor da fonte. O valor é precedida por um sinal (#) seguido de valores de cor hexadecimais de 0 a FF. Neste caso, a fonte será o azul brilhante suportado pela plataforma. Da mesma forma, o atributo de fundo cor-especifica do fundo para o texto, que será neste caso amarelo.

5. Salve a página e carregá-lo no seu browser.

   Você vê os efeitos da mudança de estilo, como mostrado na Figura 1-2. Sua página pode parecer diferente daquele desta página porque sua plataforma ou navegador pode usar valores diferentes para a família da fonte ou tamanho da fonte.

   

6. Digite o seguinte código após o estilo p dentro do

   h1 {font-family: "Times New Roman", Georgia, serif-font-size: 40px; text-align: center-text-decoration: underline-color: # ff0000-background-color: # 00ffff-}

   Isto afecta o estilo

   as entradas de identificação e que tem muitas das entradas utilizadas para a

   estilo de tag. No entanto, repare que este tempo o atributo font-family contém três entradas: O valor Times New Roman é o mais específico, seguido de Georgia, seguido pelo menos específica - serif. Quando se trabalha com um valor que contenha espaços, você deverá colocar o valor entre aspas, como mostrado.

   Usando a abordagem de três a entrada dá-lhe mais controle sobre a aparência da saída, mas ainda torna possível para browsers que não suportam uma fonte específica para processar o conteúdo corretamente. Ao fornecer uma fonte específica, certifique-se de também fornecer fontes menos específicos para navegadores que não têm acesso à sua fonte especificada.

   O atributo font-size também é diferente. Desta vez, o modelo utiliza um tamanho específico de 40 pixels. Mesmo que um valor específico pode tornar isso possível para criar efeitos especiais na tela, usando um valor específico também cria problemas. Uma entrada de 40px vai funcionar muito bem no desktop ou laptop, mas pode causar problemas com um tablet, e vai certamente tornar o conteúdo impossível para exibir em um smartphone.

   Este modelo também inclui algumas entradas que mudam a aparência do texto. O atributo text-align determina onde o texto está colocado na tela, enquanto o atributo text-decoration determina todas as características do tipo de letra especiais. Neste caso, a fonte é exibida centrada na tela com um sublinhado.

7. Salve a página e carregá-lo no seu browser.

   Você vê os efeitos da mudança de estilo, como mostrado na Figura 1-3. O título aparece em texto vermelho em um fundo azul pálido, eo parágrafo é mostrado como texto azul em um fundo amarelo.