Relatório do GPES Relatório referente ao estudo sobre a Linguagem HTML e CSS. Realizado do dia 19 de Abril de 2011 a 02 de Maio de 2011.

Tamanho: px

Começar a partir da página:

Download "Relatório do GPES Relatório referente ao estudo sobre a Linguagem HTML e CSS. Realizado do dia 19 de Abril de 2011 a 02 de Maio de 2011."

Laís Pacheco do Amaral
7 Há anos
Visualizações:

1 Relatório do GPES Relatório referente ao estudo sobre a Linguagem HTML e CSS. Realizado do dia 19 de Abril de 2011 a 02 de Maio de CSS aplicado com HTML CSS é a sigla para Cascading Style Sheets que em português foi traduzido para folhas de estilo em cascata, que um documento onde são definidas regras de formatação ou de estilos a serem aplicadas aos elementos da marcação de um documento HTML[1]. Efeito cascata é o método pelo qual é aplicada uma regra CSS em função do peso (importância, prioridade) da regra CSS. Quando um elemento HTML aplica mais de uma regra CSS, diz-se que há um conflito de regras e será aplicada aquela que tiver maior peso determinada pela ordem do efeito cascata[2]. Ela traz a conveniência de definir os estilos que estão disponíveis na maioria dos editores de texto, pode-se definir CSS em uma localização central para afetar a aparência das tags HTML em uma única página da WEB ou em todo um sítio da WEB. Embora o uso da CSS funcione com a HTML, não é linguagem HTML, isto porque a CSS é um código separado que aumenta a capacidade da HTML, permitindo a redefinição do modo como as tags funcionam. A finalidade das CSS é a de retirar da marcação toda e qualquer declaração que vise a apresentação do documento. Isto significa dizer que tags do tipo <font>, <b>, <i> bem como uso de colunas e linhas de tabelas para obtenção de espaçamentos não são admitidos ou admitidos com restrições em um projeto Web com CSS. Vale dizer simplificando: HTML para estruturação e CSS para apresentação [1]. O uso e suas finalidades Esta linguagem permite que se retire da marcação HTML toda a formatação (apresentação) do documento WEB. Algumas vantagens do uso das CSS nos documentos Web: [3] controle total sobre a apresentação do site a partir de um arquivo central; agilização da manutenção e design do sítio; saída para diferentes tipos de mídia a partir de uma versão única de HTML; redução do tempo de carregamento dos documentos Web; adequação simplificada aos critérios de acessibilidade e usabilidade; 1

a serem aplicadas aos elementos da marcação de um documento HTML[1]. Efeito cascata é o método pelo qual é aplicada uma regra CSS em função do peso (importância, prioridade) da regra CSS.

2 O Quadro 1 ilustra um exemplo de código de uma página com a CSS. <html> <head> <title>css</title> <style type="text/css">  </style> </head> <body> <br> <h1>página com CSS</h1> <h2>conteúdo da página</h2> <br> <p> CSS CSS<br> CSS CSS<br> CSS CSS<br> </p> </body> </html> Quadro 1: Código fonte de uma página simples de CSS Neste código declara-se a CSS no título da página. No início do código (<head>), se insere o estilo CSS. Já no final (<body>) coloca-se o conteúdo da página, lembrando que a estrutura é a mesma para uma página com linguagem HTML, ou seja, para toda tag de função aberta se tem uma tag fechando o procedimento. 2

CSS<br> CSS CSS<br> CSS CSS<br> </p> </body> </html> Quadro 1: Código fonte de uma página simples de CSS Neste código declara-se a CSS no título da página.

3 A imagem que ilustrada o código contido na Figura 1, se encontra na Figura 2. Figura 1: Página com CSS Na utilização da CSS observam-se alguns comandos específicos para realizar a alteração ou inserção de cada tag e seu respectivo resultado na página. Os atributos para alterar o posicionamento, a fonte, cor de fundo e texto da tabela na página estão descritas no Quadro 2:. 3

realizar a alteração ou inserção de cada tag e seu respectivo resultado na página.

4 Imagem de fundo Imagem.gif Atributos de Texto Word-spacing Espaçamento entre as palavras 1em, 5pt Atributos de Posição Position Tipo de Posicionamento Absolute Top Distância Vertical para o canto 10in, 150px, 30 cm superior esquerdo do quadro Left Distância Horizontal para o canto 10in, 150px, 30 cm superior esquerdo do quadro Width Largura do Quadro 10in, 150px, 30 cm Height Altura do Quadro 10in, 150px, 30 cm Z-index Camada usada quando sobrepondo 1,2,3,4 quadros Padding Margem entre as bordas do quadro 2,5,10,17 e o texto interno ao quadro Border-width Largura da borda do quadro Thin, medium, thick Border-color Cor da borda do quadro Yellow,#00FFAA Border-style Estilo da Borda None,dotted,dashed,solid,double Broder-width Largura da borda do quadro Thin,medium,thick Atributos de Fontes Font-family Fonte que será usada para mostrar Arial, Courier o texto Font-size Tamanho da Fonte 12pt,10cm, 5in Font-style Estilo Normal, italic Font-weight Peso da fonte Bold, lighter,100,300 Atributos e Cores de Fundo da Página Color Cor do texto Marrom,#ffffcc Backgroun- Cor de fundo Marrom,#ffffcc color Backgroundimage Letter-spacing Espeçamento entre as letras 0,1em, 0,1cm, 2 pt Textdecoration Decoração de texto None, underline, blink Vertical-align Alinhamento vertical Middle, top, sub, super 4

superior esquerdo do quadro Left Distância Horizontal para o canto 10in, 150px, 30 cm superior esquerdo do quadro Width Largura do Quadro 10in, 150px, 30 cm Height Altura do Quadro 10in, 150px, 30 cm

5 Text-align Alinhamento Horizontal Left,center, right Text-height Altura da Linha 200%, 1.2, 20pt Quadro 2: Atributos da CSS No Quadro 3, tem-se o código fonte que contém a inserção de alguns atributos do CSS contidos no Quadro 2. <html> <head> <title>bordas</title> <style type="text/css">  </style> </head> <body> <table class="inset"> <tr> <td colspan=2>célula 1</td></tr> </table> <p class="double">texto envolvido por bordas<br>com duas linhas</p> </body> </html> Quadro 3: Código Fonte de uma página com texto e bordas 5

<html> <head> <title>bordas</title> <style type="text/css"> <!--.inset{border-style:inset; border-color:blue; border-width:15px}.

6 Neste exemplo se inseriu a tag <border-width> para definir a espessura da borda, bem como a função border-color, isto para definir uma cor para a borda. Ao abrir o código em um browser se visualizara o resultado mostrado na Figura 2. Referências [1] M. CSS Tutorial FAQ CSS. Disponível em: < > Acessado em 24 de Abril de [2]HTML Tutorial Table of Contents HTML.net. Disponível em: < Acessado em 25 de Abril de [3]Revista PHP O que é CSS? Disponível em: < > Acessado em 23 de Abril de

com/tutorial/faq.php#css > Acessado em 24 de Abril de 2011. [2]HTML Tutorial Table of Contents HTML.net. Disponível em: <http://www.html.

Documentos relacionados

Web Design Aula 15: Propriedades CSS

Web Design Aula 15: Propriedades CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Propriedades de texto Propriedades de Cores Propriedades de Bordas Propriedades de Listas Cor de