Your SlideShare is downloading. ×
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS

1,966

Published on

Curso Técnico de Gestão e Programação de Sistema Informáticos, ano lectivo 2010/2011.

Curso Técnico de Gestão e Programação de Sistema Informáticos, ano lectivo 2010/2011.

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,966
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
66
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Como uma classe – turma tem muito elementos
  • É parecido com as classes, mas faz referência a um só valor
  • Transcript

    • 1. Agrupamento de Escolas da Batalha Miguela Fernandes Novembro 2010
    • 2. Considerações iniciais Vamos aprender como funcionam as CSS e conhecer os seus princípios. Iremos abordar: HTML vs CSS O que é um estilo O que são CSS Aparecimento Onde colocar Tipos de regras MF. 2
    • 3. HTML vs CSS (1) O HTML não foi concebido para lidar com altas definições gráficas ou com multimédia. Foi criada para definir a estrutura de um documento na Internet, para mostrar como uma página deve estar organizada, invés de se preocupar com a aparência. Ao longo dos anos houve uma evolução na linguagem (tags) e também os web designers queixaram-se ao W3C, para que este consórcio preenchesse o vazio do HTML. MF. 3
    • 4. HTML vs CSS (2) A introdução de novas TAGS HTML vieram facilitar a vida do programador, dado que as CSS usam TAGS HTML. Exemplo simples: <bold> - o HTML coloca a negrito o texto Mas nas CSS posso dizer que <bold> pode colocar a NEGRITO mas mudar para maiúsculas. MF. 4
    • 5. O que é um estilo? Vamos pensar no Word que tem estilo já pré- definidos ou que podemos criar novos. Os estilos coleccionam atributos, tais como: tipos de letra, tamanho, cor, negrito, itálico, entre outros. Podemos aplicá-los a títulos, sub-títulos, cabeçalhos, etc.. MF. 5
    • 6. O que é um estilo? Exemplo MF. 6 arial azul bold sublinhado 14 pt Título 1 Hoje, temos uma valorização das empresas do programador Front End, procurando especialistas para solucionar problemas, e principalmente saber o que estão a fazer. Título 2 Hoje, temos uma valorização das empresas do programador Front End, procurando…….. formatatitulo Nome do estilo criado Estilo aplicado
    • 7. CSS: o que são? São um conjunto de estilos guardados estrategicamente para afectar a aparência de uma página HTML. Para usá-las temos de fazer referência da seguinte forma: SELECTOR { propriedade: valor; } " propriedade " é o elemento que pretendemos manipular e o “valor" representa o valor específico da propriedade. MF. 7
    • 8. CSS: Aparecimento Com a evolução dos recursos de programação as páginas web estavam a usar cada vez mais estilos e variações para deixá-las mais elegantes e atractivas aos utilizadores. Com isto, o HTML, que era destinado para apresentar os conteúdos também precisou ser aprimorado. Foram criadas novas tags e atributos de estilo para o HTML e em 1996, a W3C apareceu a 1ª versão das CSS: CSS 1. MF. 8
    • 9. Onde colocar as CSS CSS dentro do corpo do documento (inline rule) <p style="font:16px;color:blue;">No próprio texto</p> CSS no cabeçalho do documento (embedded rule) - Head <style type="text/css"> h1 {color::red;} p {font- size:14px;} </style> CSS num ficheiro externo (external rule) - Head <link rel=stylesheet href=ficheiro.css type=”text/css”> //afecta todo a página web CSS impordado para o documento (import rule) - Head <style type=”text/css”> @import URL </style> MF. 9
    • 10. Os 3 tipos de regras (cont.) HTML selector H1{font: bold, 12pt, times; } Class exemplo{font:bold,12pt,times; } ID #objecto1{position:absolute; top: 10px;} MF. 10
    • 11. Os 3 tipos de regras (1) HTML selector Exemplo do HTML h1| h2 | h3 | h4 | h5 | h6 | p | table | tr | td|… O HTML selector nas CSS é usado para redefinir como são as tags mostradas. Ex: <style type=”text/css”> H1 {font-size:16pt; color:blue;} </style> MF. 11 Exemplo
    • 12. Tipo de regra: HTML Selector <html> <head> <style type="text/css"> p {color: white; font-family:"Arial", Times, serif; text-align: justify; text-decoration: underline; font-size: 14px; text-indent: 20px; margin-top: 200px; line-height: 18px;} body {background-color: black; } </style> </head> <body> <p>A Batalha de Aljubarrota decorreu no final da tarde de 14 de Agosto de 1385.</p> </body> </html> MF. 12
    • 13. Os 3 tipos de regras (2) Class É atribuir um nome a um conjunto de tags HTML. É o mais versátil selector que podemos usar. Ex: •minhaclass{font:bold,12pt,times; } Referência na página: <p class=“minhaclass">Este será o meu 1º texto com classe ;-)</p> MF. 13 Exemplo
    • 14. Tipo de regra: class <html> <head> <style type=”text/css” > p.um { background-color: red; } p.dois { background-color: yellow; } p.tres{ background-color: blue; color: yellow; } </style> </head> <body> <h2>Classes em CSS</h2> <p class="um">Este é o resultado da p.um classe</p> <p class="dois">Este é o resultado da p.dois classe</p> <p class="tres">Este é o resultado da p.tres classe</p>…… MF. 14
    • 15. Os 3 tipos de regras (3) ID Muito parecido com a class. Pode ser aplicado a qualquer tag HTML. No entanto, é usado apenas uma vez numa determinada página (usado para criar um objecto com javascript). Ex: #objecto1{position:absolute; top: 10px;} Referência na página: <p class=“minhaclass">Este será o meu 1º texto com classe ;-)</p> MF. 15 Exemplo
    • 16. Tipo de regra: ID <html> <head> <style> p#exemplo1 { background-color: blue; } p#exemplo2{ text-transform: uppercase; } </style> </head> <body> <p id="exemplo1">Adivinhe o que acontece aqui??</p> <p id="exemplo2">E agora o que vai mudar?</p> </body> </html> MF. 16
    • 17. Webgrafia e Bibliografia http://www.ufpa.br/dicas/htm/htm-fra.htm http://www.sevenseek.com/tutorials/learning-css- important-css-concepts/ http://webstyleguide.com/wsg3/5-site-structure/3- site-file-structure.html http://www.tizag.com/cssT/inline.php Teagu, J. C. (2004). DHTML and CSS for the World Wide Web (2ª Ed.). USA:Peachpit Press. MF. 17

    ×