Utilização Inline,

Incorporado e Externo –

CSS

Style SheetProfessor: Jolvani

Aula 03

Utilização Inline, Incorporado e Externo - CSS

Olá, lembrem-se que em CSS existem seletores, declaração

formado pelas propriedades e valores, regras, conceitos estes

que devem ser entendidos da aula passada...

Nesta aula vamos aprender a vincular folhas de estilos a

documentos xhtml.

Então vamos criar nossa aula 03... Aula03.html

Utilização Inline, Incorporado e Externo - CSS

Vamos eliminar alguns marcadores da aula passada reduzindo para a

tag <p>.

Primeiro, podemos usar css de três formas diferentes: No próprio

documento html como é o caso da aula02 e aula03, podendo ser

aplicadas direto na tag (<p style=“color:#FF0000”>) ou com style

dentro da tag head, contendo todas as marcações, e por fim em um

documento aparte, formato .css...

Então, temos marcações inline,

Esse tipo de aplicação dificulta a manutenção dos estilos nos

elementos (não aconselhável) isso tira o poder do CSS que possui o

controle centralizado da apresentação.

Outras formas são as formas incorporadas era o modo como usávamos

anteriormente, e sua vantagem é...

Utilização Inline, Incorporado e Externo - CSS

O estilo incorporado permite localizar e fazer as alterações de todas as

marcações css num mesmo lugar. Obrigatório usar atributo type (validar)

Porem usando css direto no documento html torna-o um código “grande”

e se tivermos muitas páginas com os mesmo estilo termos que abrir todas

as páginas e fazer as alterações em todas elas menos organizado que em

um arquivo externo, a terceira forma de criar CSSs.

Utilização Inline, Incorporado e Externo - CSS

Outro atributo usado no <style> é media que define o tipo de media que

é usado aquele css, então temos:

screen: monitores

tty: teletipo

tv: dispositivos de televisão, google tv, lumis.com.br (portal)

projection: usado para projetores

hendheld: dispositivos moveis.

print: para impressoras

brille: dispositivos táteis

aural: sintetizadores de voz

all: css que será aplicado para todos os dispositivos (podendo ser

acessados por todos os dispositivos.

Utilização Inline, Incorporado e Externo - CSS

Para testar experimente usar media=“tv”... Veja o resultado...

Agora vamos aos estilos externos recomendação da W3C

É um arquivo fora do html, com extensão .css vinculado ao arquivo html.

Então vamos criar outro diretório (css) e criar um arquivo css dentro dele.

Copiamos a regra do html e colamos no css sem as marcações <style>

Adicionamos, no arquivo html, um link ao css...

Chamamos de Folhas de estilo linkada. Temos outra forma...

Utilização Inline, Incorporado e Externo - CSS

Folhas de estilo importada, vejamos o exemplo...

Próxima Aula: Seletores Simples