Tecnologias para Internet Thyago Maia Tavares de Farias Aula 6
Sumário <ul><li>Stylesheets </li></ul><ul><ul><li>Cascating Style Sheets (CSS) </li></ul></ul>
Stylesheets <ul><li>Tem a função de separar a formatação da página de seu conteúdo; </li></ul><ul><li>Facilita a adaptação...
Cascating Style Sheets (CSS) <ul><li>Linguagem que define como os documentos HTML serão exibidos; </li></ul><ul><li>Vários...
Cascating Style Sheets (CSS) <ul><li>CSS economiza muito trabalho: </li></ul><ul><ul><li>O mesmo define como os elementos ...
Cascating Style Sheets (CSS) <ul><li>Tag usada em um documento HTML para referenciar um arquivo CSS: </li></ul><ul><li><li...
Cascating Style Sheets (CSS) <ul><li>Sintaxe do CSS: </li></ul><ul><ul><li>Uma regra CSS possui duas partes: um seletor e ...
Cascating Style Sheets (CSS) <ul><li>Sintaxe do CSS: </li></ul><ul><li>seletor </li></ul><ul><li>{ </li></ul><ul><li>propr...
Cascating Style Sheets (CSS) <ul><li>Exemplo: </li></ul><ul><ul><li>Seletor CSS que formata cor e alinhamento de fonte em ...
Cascating Style Sheets (CSS) <ul><li>Exemplo anterior invocado em uma página HTML: </li></ul><ul><li><html> </li></ul><ul>...
Cascating Style Sheets (CSS) <ul><li>O seletor id </li></ul><ul><ul><li>Usado para especificar uma formatação para um únic...
Cascating Style Sheets (CSS) <ul><li>Exemplo: </li></ul><ul><ul><li>Seletor id que alinha o texto de um elemento HTML para...
Cascating Style Sheets (CSS) <ul><li>Exemplo anterior invocado em uma página HTML: </li></ul><ul><li><html> </li></ul><ul>...
Cascating Style Sheets (CSS) <ul><li>O seletor class </li></ul><ul><ul><li>Usado para especificar uma formatação para um g...
Cascating Style Sheets (CSS) <ul><li>Exemplo: </li></ul><ul><ul><li>Seletor class que centraliza o texto de um elemento HT...
Cascating Style Sheets (CSS) <ul><li>Exemplo anterior invocado em uma página HTML: </li></ul><ul><li><html> </li></ul><ul>...
Upcoming SlideShare
Loading in...5
×

Tecnologias para internet - Aula 6

899

Published on

Slides referentes a 6ª aula da disciplina de Tecnologias para Internet, realizada no dia 19/02/2011

Published in: Technology, Education
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
899
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Tecnologias para internet - Aula 6

  1. 1. Tecnologias para Internet Thyago Maia Tavares de Farias Aula 6
  2. 2. Sumário <ul><li>Stylesheets </li></ul><ul><ul><li>Cascating Style Sheets (CSS) </li></ul></ul>
  3. 3. Stylesheets <ul><li>Tem a função de separar a formatação da página de seu conteúdo; </li></ul><ul><li>Facilita a adaptação da apresentação da página à aplicações e clientes diferentes; </li></ul><ul><li>Principais vantagens: </li></ul><ul><ul><li>Adaptação para o formato em diferentes displays; </li></ul></ul><ul><ul><li>Padronização da apresentação gráfica de uma apresentação; </li></ul></ul><ul><li>Por exemplo, no caso de uma mudança de fonte em várias páginas HTML, alteraríamos apenas o documento de estilo; </li></ul>
  4. 4. Cascating Style Sheets (CSS) <ul><li>Linguagem que define como os documentos HTML serão exibidos; </li></ul><ul><li>Vários documentos HTML podem acessar um único arquivo CSS (folha de estilo), facilitando a padronização de aplicações; </li></ul><ul><li>Graças ao CSS, deixamos de utilizar atributos de formatação em tags HTML, e passamos a trabalha com formatação em um arquivo CSS; </li></ul>
  5. 5. Cascating Style Sheets (CSS) <ul><li>CSS economiza muito trabalho: </li></ul><ul><ul><li>O mesmo define como os elementos HTML serão exibidos; </li></ul></ul><ul><ul><li>Arquivos CSS permite mudar a aparência e o layout de todas as páginas em um Web site, apenas editando um único arquivo; </li></ul></ul>
  6. 6. Cascating Style Sheets (CSS) <ul><li>Tag usada em um documento HTML para referenciar um arquivo CSS: </li></ul><ul><li><link rel=“stylesheet” type=“text/css” href=“exemplo.css”> </li></ul><ul><li>Tal tag deverá ser declarada entre as tags <head> e </head> (cabeçalho de uma página HTML; </li></ul>
  7. 7. Cascating Style Sheets (CSS) <ul><li>Sintaxe do CSS: </li></ul><ul><ul><li>Uma regra CSS possui duas partes: um seletor e uma ou mais declarações; </li></ul></ul><ul><ul><li>Um seletor é normalmente um elemento HTML que você deseja formatar (Ex.: html, body, a, p, div, etc.); </li></ul></ul><ul><ul><li>Um arquivo CSS poderá ter vários seletores; </li></ul></ul><ul><ul><li>Cada declaração consiste em uma propriedade e um valor (Ex.: background: #000000, etc.); </li></ul></ul><ul><ul><li>A propriedade é o atributo de estilo (formatação) a ser alterado. Cada propriedade possui um valor; </li></ul></ul>
  8. 8. Cascating Style Sheets (CSS) <ul><li>Sintaxe do CSS: </li></ul><ul><li>seletor </li></ul><ul><li>{ </li></ul><ul><li>propriedade1: valor1; </li></ul><ul><li>propriedade2: valor2; </li></ul><ul><li>... </li></ul><ul><li>propriedaden: valor3; </li></ul><ul><li>} </li></ul>
  9. 9. Cascating Style Sheets (CSS) <ul><li>Exemplo: </li></ul><ul><ul><li>Seletor CSS que formata cor e alinhamento de fonte em parágrafos HTML (<p>); </li></ul></ul><ul><li>p </li></ul><ul><li>{ </li></ul><ul><li>color: red; </li></ul><ul><li>text-align: center; </li></ul><ul><li>} </li></ul>
  10. 10. Cascating Style Sheets (CSS) <ul><li>Exemplo anterior invocado em uma página HTML: </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><link rel=“stylesheet” type=“text/css” href=“exemplo.css”> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p>Parágrafo 1</p> </li></ul><ul><li><p>Parágrafo 2</p> </li></ul><ul><li><p>Parágrafo 3</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  11. 11. Cascating Style Sheets (CSS) <ul><li>O seletor id </li></ul><ul><ul><li>Usado para especificar uma formatação para um único elemento específico; </li></ul></ul><ul><ul><li>Criamos um identificador (id) para declarar um seletor. O mesmo poderá ser utilizado como um atributo de um elemento HTML. </li></ul></ul><ul><ul><li>Seletores id são declarados com # seguido de um nome definido pelo usuário; </li></ul></ul>
  12. 12. Cascating Style Sheets (CSS) <ul><li>Exemplo: </li></ul><ul><ul><li>Seletor id que alinha o texto de um elemento HTML para a direita: </li></ul></ul><ul><li># direita </li></ul><ul><li>{ </li></ul><ul><li>text-align: right; </li></ul><ul><li>} </li></ul>
  13. 13. Cascating Style Sheets (CSS) <ul><li>Exemplo anterior invocado em uma página HTML: </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><link rel=“stylesheet” type=“text/css” href=“exemplo.css”> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p>Parágrafo 1</p> </li></ul><ul><li><p id=“direita”>Parágrafo 2</p> </li></ul><ul><li><p>Parágrafo 3</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  14. 14. Cascating Style Sheets (CSS) <ul><li>O seletor class </li></ul><ul><ul><li>Usado para especificar uma formatação para um grupo de elementos; </li></ul></ul><ul><ul><li>Diferentemente de um seletor id, o seletor class é freqüentemente utilizado para vários elementos. </li></ul></ul><ul><ul><li>Seletores class são declarados com . seguido de um nome definido pelo usuário; </li></ul></ul>
  15. 15. Cascating Style Sheets (CSS) <ul><li>Exemplo: </li></ul><ul><ul><li>Seletor class que centraliza o texto de um elemento HTML: </li></ul></ul><ul><li>. centro </li></ul><ul><li>{ </li></ul><ul><li>text-align: center; </li></ul><ul><li>} </li></ul>
  16. 16. Cascating Style Sheets (CSS) <ul><li>Exemplo anterior invocado em uma página HTML: </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><link rel=“stylesheet” type=“text/css” href=“exemplo.css”> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p>Parágrafo 1</p> </li></ul><ul><li><p id=“direita”>Parágrafo 2</p> </li></ul><ul><li><p class=“centro”>Parágrafo 3</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×