Your SlideShare is downloading. ×
Tecnologias para internet - Aula 6
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

Tecnologias para internet - Aula 6

879
views

Published on

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

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
879
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
1
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

Transcript

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