Click here to load reader
Upload
jolvani-morgan
View
158
Download
0
Embed Size (px)
Citation preview
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