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 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 irá aparecer em qualquer fonte padrão que você escolheu para o seu browser. Normalmente, o texto é preto em um fundo branco, a menos que você tenha 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 básica 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, tal como Komodo Edit vai tornar a tarefa muito mais fácil.

1. Criar um novo arquivo de HTML5 com 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 parte do 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

   As 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

   (N) etiqueta. Tudo neste entrada afetará o

   marcas em seu documento.

   
   
   
   

   Os colchetes ({}) 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 de CSS garante que a sua aplicação vai produzir resultados genericamente compatível com todas as plataformas, usando qualquer navegador.

   O atributo de tamanho da fonte define um tamanho relativo. Neste caso, grande especifica que você quer fazer a fonte 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 por valores de cor hexadecimais de 0 a ff. Neste caso, a fonte será o azul brilhante suportado pela plataforma. Da mesma forma, o atributo background-color especifica o fundo para o texto, que será amarela neste caso.

4. 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 em esta página porque a sua plataforma ou navegador pode usar valores diferentes para a família da fonte ou tamanho da fonte.

   

   Video: Criar e Aplicar estilos CSS internos e externos em HTML

5. 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-}

   Este estilo afeta o

   entradas de tags e tem muitas das entradas utilizadas para a

   estilo 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 por Georgia, seguido pelo menos específica - serif. Ao trabalhar com um valor que contenha espaços, você deverá colocar o valor entre aspas, como mostrado.

   Usando a abordagem de três entrada dá-lhe mais controle sobre a aparência da saída, mas ainda torna possível para os navegadores 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 de tamanho da fonte é também diferente. Desta vez, o estilo usa um tamanho específico de 40 pixels. Mesmo que um valor específico pode tornar possível para criar efeitos especiais na tela, usando um valor específico também cria problemas. A entrada 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 estilo 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 será exibida centrada na tela com um sublinhado.

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

   Video: #33 - Las Propiedades de Background Básicas - Curso de CSS3 desde 0

   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.