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

2.588 visualizações

Publicada em

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

Publicada em: Educação, Tecnologia, Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
2.588
No SlideShare
0
A partir de incorporações
0
Número de incorporações
739
Ações
Compartilhamentos
0
Downloads
91
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Como uma classe – turma tem muito elementos
  • É parecido com as classes, mas faz referência a um só valor
  • Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS

    1. 1. Agrupamento de Escolas da Batalha Miguela Fernandes Novembro 2010
    2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

    ×