Ferramentas para Sistema Web Sistemas de Informação Aula 6 – 03/04/2013

Revisão Imagens <img> Imagens como links Atributos requeridos: src alt Caminhos absolutos Caminhos relativos Imagens como links

CSS Sigla para Cascading Style Sheets Em português foi traduzido para folhas de estilo em cascata Finalidade de retirar da marcação toda e qualquer declaração que vise a apresentação. Formata a informação Guarde: HTML para estruturação e CSS para apresentação

CSS Podemos aplicar o CSS de três formas em um documento HTML: Definindo as propriedades CSS diretamente no elemento HTML através do seu atributo style. Definindo as regras CSS dentro de um elemento com a tag style. Definindo as regras CSS em arquivo à parte do documento HTML.

Regras e Propriedades Propriedade CSS é uma característica visual de um elemento HTML. A regra é um conjunto de propriedades definidas para um elemento ou para um grupo de elementos HTML.

CSS Inline http://goo.gl/FXE5a Abordagem CSS Inline não é recomendada!

Tag <style> A tag <style> é usada para definir informações de estilo para um documento HTML. Dentro do elemento <style> você pode especificar como elementos HTML devem ser renderizados no navegador. Atributo type => Especifica o tipo MIME do documento linkado.

Exemplo tag <style>

Tag <link> A tag <link> define a relação entre um documento e um recurso externo. É o mais utilizado para vincular documentos HTML a folhas de estilo. Atributo rel => Especifica a relação entre o documento HTML e o documento linkado. Atributo type => Especifica o tipo MIME do documento linkado. Atributo href => Especifica o local do documento linkado.

Tag <link>

Arquivo CSS Arquivo estilo.css

Mais Informações http://pt.wikipedia.org/wiki/Pixel http://pt.wikipedia.org/wiki/Anexo:Tabela_de_cores

Exercícios Dentro da pasta com o seu nome utilizada no capítulo anterior, crie uma subpasta chamada css. Novamente para facilitar, utilize apenas letras minúsculas em todas as pastas e arquivos que criarmos durante esse capítulo. Crie um documento HTML em um arquivo chamado testando-css.html dentro da pasta css. Todos os parágrafos desse documento devem ser exibidos em negrito, com cor azul e com fonte 20px. Defina uma regra CSS para formatar os parágrafos usando a tag <style>. Use os valores abaixo: font-weight:bold; font-size:20px; color:#0000FF;

Solução 2

Exercícios Para organizar melhor o conteúdo e a formatação da página criada no exercício anterior, crie um arquivo CSS chamado regras-de-formatacao.css na pasta css. Modifique o arquivo testando-css.html para aplicar as regras de formatação criadas no exercício anterior. Use a tag <link>.

Solução 3

Solução 4

Fim