Uploaded on

web

web

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
240
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
10
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

Transcript

  • 1. CSSMaterial elaborado pelo Prof. Bruno Gomes
  • 2. Agenda• Introdução• CSS• Sintaxe CSS• Como usar CSS
  • 3. Introdução• Problemas: o HTML nunca foi designado para conter tags para formatação o HTML foi criado para definir o conteúdo de um documento o Tags de formatação (fonte, cores, alinhamento) foram adicionados no HTML (versão 3.1) (iniciou (iniciou-se um pesadelo para os desenvolvedores web!!) o Quando sites eram grandes, se tornava um processo longo e trabalho de formatação
  • 4. Solução?• A World Wide Web Consortium (W3C) criou o CSS• No HTML 4.0 toda a formatação pode ser removida da página HTML e salva em um arquivo separado
  • 5. CSS• Cascading Style Sheets (Folhas de Estilo heets em Cascata)• Mecanismo simples para adicionar estilos às páginas Web• Recomendação W3C• Todos os Browsers suportam CSS
  • 6. CSS• Características: o Definem como exibir os elementos de uma página web o Adicionados no HTML 4.0 o Simplifica e reduz tempo de trabalho o Folhas de estilos externos são armazenados em arquivos CSS
  • 7. CSS• Vantagem o Facilidade e praticidade na hora de definir os estilos de uma página o Permite agrupar em poucas linhas a formatação de uma página o Permite alterar a aparência e o layout de todas as páginas em um site apenas editando um arquivo único
  • 8. Sintaxe CSS• Composta por 3 partes: o seletor, propriedade e um valor: seletor {propriedade:valor}
  • 9. Sintaxe CSS• O seletor é normalmente o elemento HTML ( (tag) que se deseja definir• Propriedade é o atributo que deseja alterar• Propriedade e o valor são separados por dois pontos body {color: black}
  • 10. Sintaxe CSSObservações:• Se o valor tem várias palavras, colocar aspas em volta:• Se quiserpespecificar mais serif"} {font-family:"sans de uma family:"sans propriedade, separar por ponto e vírgula: p {text-align:center;color:red} align:center;color:red}
  • 11. Sintaxe CSS• Para que as definições de estilo sejam mais legíveis, pode-se descrever uma se propriedade em cada linha: p { text-align:center; align:center; color:black; font-family:arial family:arial }
  • 12. Sintaxe CSS• Agrupamento o CSS permite agrupar vários seletores. Eles são separados por uma vírgula: h1,h2,h3,h4,h5,h6 { color:green }
  • 13. Sintaxe CSS• Classe CSS o Permite definir diferentes estilos para o mesmo elemento HTML: p.right {text-align:right} align:right} p.center {text- o Deve-se align:center} class na página: usar o atributo <p class="right">Esse parágrafo será alinhado a direita.</p>• Obs.: Não inicie com número o nome da <p class="center">Esse parágrafo será centralizado</p> Classe
  • 14. Sintaxe CSS• Classe CSS o Para adicionar mais de uma classe em um determinado elemento: <p class="center bold">Parágrafo.</p>
  • 15. Sintaxe CSS• Classe CSS: o Para definir um estilo que será utilizado por todos os elementos HTML que possuírem a mesma classe, é só omitir o nome da tag do seletor: .center {text- align:center}• Na página: <h1 class="center">Título centralizado.</h1> <p class="center">Parágrafo centralizado.</p>
  • 16. Sintaxe CSS• Adicionando estilos em elementos com atributos específicos: input[type="text"] {background {background- color:blue}
  • 17. Sintaxe CSS• O seletor id: o Definição de estilos para elementos com o seletor id #green {color:green} p#para1 <div { id="green"> text- ... align:center; </div> color:red }
  • 18. Sintaxe CSS• Comentário CSS: o Inicia com "/*“ e termina com "*/“ /*This is a comment*/ p { text-align:center; align:center; /*This is another comment*/ color:black; font-family:arial family:arial }
  • 19. CSS – Como Usar• Como usar: o CSS Externo o CSS Interno o CSS em Linha
  • 20. CSS Externo• Ideal quando o estilo é aplicado a muitas páginas• Pode mudar a aparência de um site inteiro mudando somente um arquivo• Cada página tem um link para o arquivo através da tag <link>, que fica dentro de <head>: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
  • 21. CSS Externo• Um CSS Externo por ser escrito em qualquer editor de texto• Arquivo não deve ter nenhuma tag HTML• O arquivo deve ser salvo com a extensão .css• Exemplo: hr {color:sienna} p {margin-left:20px} body {background- image:url("images/back40.gif")} Estilo.css
  • 22. CSS Interno• Utilizado quando um documento tem um estilo único• Deve-se definir o estilo interno dentro da seção header se (<head>) da página HTML• Utiliza a tag <style>• Exemplo: <head> <style type="text/css"> hr {color:sienna} p {margin-left:20px} body {background- image:url("images/back40.gif")} </style> </head>
  • 23. CSS em Linha• Mistura conteúdo com apresentação (problema!!)• Utilizar o atribulo style na tag• Pode conter qualquer propriedade CSS• Exemplo: <p style="color:red;margin style="color:red;margin- left:20px">Parágrafo.</p>
  • 24. Links• Validador para CSS: http://jigsaw.w3.org/css http://jigsaw.w3.org/css- validator/• Mais sobre CSS: http://www.w3schools.com/css http://www.w3schools.com/css/