Vous êtes sur la page 1sur 12

Autoria Web

Professor: Diego Oliveira

Autoria Web Professor: Diego Oliveira Aula 06 – CSS

Aula 06 – CSS

Autoria Web Professor: Diego Oliveira Aula 06 – CSS
Cascading Style Sheets (CSS) • Cascading Style Sheets foram criadas para prover uma rica formatação

Cascading Style Sheets (CSS)

• Cascading Style Sheets foram criadas para prover uma rica formatação para o HTML

• O estilo é definido com opções de formatação que são aplicadas aos elementos do HTML

• Facilita a formatação pois se define o estilo de um elemento apenas uma vez e esse estilo é aplicado à todos os elementos daquele tipo no documento HTML inteiro

de um elemento apenas uma vez e esse estilo é aplicado à todos os elementos daquele

2

Exemplo propriedade/valor seletor 3

Exemplo

propriedade/valor seletor
propriedade/valor
seletor
Exemplo propriedade/valor seletor 3

3

Regras do CSS • O seletor é seguido de chaves: “{“ e “}” • Uma

Regras do CSS

• O seletor é seguido de chaves: “{“ e “}”

• Uma vírgula separa cada par de propriedade/valor

• Nomes com espaços precisam estar entre aspas duplas

– Ex.: font-family: “Times New Roman”;

• Cada par de propriedade/valor termina com um ponto e vírgula: “;”

Ex.: font-family: “Times New Roman”; • Cada par de propriedade/valor termina com um ponto e vírgula:

4

Localizações do CSS • O CSS pode estar inserido dentro do próprio HTML através da

Localizações do CSS

• O CSS pode estar inserido dentro do próprio HTML através da tag <style>

• Também pode estar em um arquivo externo, com a extensão .css

• No caso de estar externo, é introduzido no HTML atravez da tag <link> :

5
5
Localizações do CSS • O CSS também pode ser aplicado à tags individuais: 6

Localizações do CSS

• O CSS também pode ser aplicado à tags individuais:

Localizações do CSS • O CSS também pode ser aplicado à tags individuais: 6
Localizações do CSS • O CSS também pode ser aplicado à tags individuais: 6

6

Precedência de Estilos Vai aparecer de que cor? 7

Precedência de Estilos

Vai aparecer de que cor? 7
Vai aparecer de que cor?
7
Espaçamento com CSS • O CSS trabalha com um conceito de caixas • Todos os

Espaçamento com CSS

• O CSS trabalha com um conceito de caixas

• Todos os elementos estão no HTML como se estivessem dentro de uma caixa

• Há vários espaçamentos das bordas:

de uma caixa • Há vários espaçamentos das bordas: – padding – padding-top – padding-right –

– padding

– padding-top

– padding-right

– padding-bottom

– padding-left

vários espaçamentos das bordas: – padding – padding-top – padding-right – padding-bottom – padding-left OU 8

OU

vários espaçamentos das bordas: – padding – padding-top – padding-right – padding-bottom – padding-left OU 8

8

Seletores • Podem ser escolhidos pelo nome: • Pelo seletor universal: • Pela herança: •

Seletores

• Podem ser escolhidos pelo nome:

Seletores • Podem ser escolhidos pelo nome: • Pelo seletor universal: • Pela herança: • Pela

• Pelo seletor universal:

Seletores • Podem ser escolhidos pelo nome: • Pelo seletor universal: • Pela herança: • Pela

• Pela herança:

Seletores • Podem ser escolhidos pelo nome: • Pelo seletor universal: • Pela herança: • Pela
Seletores • Podem ser escolhidos pelo nome: • Pelo seletor universal: • Pela herança: • Pela

• Pela classe:

Seletores • Podem ser escolhidos pelo nome: • Pelo seletor universal: • Pela herança: • Pela

9

Seletores • Por Identificador: • Por elementos com determinado atributo: • Também é possível uma

Seletores

• Por Identificador:

Seletores • Por Identificador: • Por elementos com determinado atributo: • Também é possível uma combinação
Seletores • Por Identificador: • Por elementos com determinado atributo: • Também é possível uma combinação

• Por elementos com determinado atributo:

Identificador: • Por elementos com determinado atributo: • Também é possível uma combinação de métodos para
• Também é possível uma combinação de métodos para maior precisão 10
• Também é possível uma combinação de
métodos para maior precisão
10
Atividade • Aplicar CSS em uma página simples utilizando os 5 meios de Seletores aprendidos

Atividade

• Aplicar CSS em uma página simples utilizando os 5 meios de Seletores aprendidos e uma forma de Seleção complexa (ex.: classe + atributo) • Utilizar

de Seleção complexa (ex.: classe + atributo) • Utilizar – 3 cores de fonte diferentes –

– 3 cores de fonte diferentes

– 3 tamanhos de fonte diferentes

– 3 fundos de cores diferentes

– 3 elementos diferentes na página

11

Perguntas? 12

Perguntas?

Perguntas? 12
Perguntas? 12

12