UFCD0792 Conteudov1

Scripts CGI e folhas de estilo
UFCD0793 (25h)
“Na internet não existe ninguém feio, existe

quem não usa Photoshop”
Augusto Branco
FORMADOR
RUI FERNANDES
Objetivos
❑Avaliação Teórico/Pratica (70%)
❑Realização e entrega das propostas de trabalho (30%);
❑Trabalho de avaliação / Ficha de avaliação(40%);
❑Avaliação. Continua (30%)

❑Participação (20%);
❑Comportamento (5%);
❑Assiduidade (5%);
Conteúdos
❑ Desenvolver páginas para a web, através de scripts CGI e folhas de estilo.
3
Conteúdos
❑Forms
❑Estrutura e desenho
❑Campos de entrada
❑Botões submit e radio
❑CheckBoxes
Conteúdos
❑Forms
❑Selecções
❑Área de textos
❑Campos não visíveis
❑Carregamento de ficheiros através de forms

Conteúdos
❑CGI Script
❑Estrutura e variáveis CGI
Conteúdos
❑HTML dinâmico
❑Posicionar objectos
❑Layers
❑Z-orders
❑Layersvisíveis e invisíveis
❑Posicionamento de objectos
Conteúdos
❑Imagens
❑Imagens online
❑Imagens e ligações
❑Imagens externas e de fundo
❑Atributos das imagens
❑Referência das cores, cor de fundo e de texto
❑Preparação das imagens

Conteúdos
❑Style sheets
❑Conceitos
❑Styles sheets em HTML

T ÉC N I CO M U LT I M É D I A
Folhas de Estilo CSS
•O que é CSS?
•O Cascading Style Sheets (CSS) é uma linguagem utilizada para definir a apresentação (aparência) de
documentos que adotam para o seu desenvolvimento linguagens de marcação (como XML, HTML e XHTML e
etc..).
•O CSS define como serão exibidos os elementos contidos no código de um documento e sua maior vantagem
é efetuar a separação entre o formato e o conteúdo de um documento

O que é possível fazer com CSS?
•Com aplicação das folhas de estilos é possível uma infinidade de coisas, entre elas:
•Estruturar o layout do site;
•Posicionar elementos na página web;
•Mudar a ordem de apresentação das Tags HTML;
•Colocar espaçamentos entre tags;
•Preencher com espaço vazio entre a borda de um bloco e seu conteúdo;
•Colocar diferentes tipos de bordas de diferentes cores nos blocos;
•Inserir bordas arredondadas aos blocos;
•Colocar cor de fundo, gradiente ou imagem de fundo aos blocos;

O que é possível fazer com CSS?
•Trabalhar com diversas propriedades para tipografia.
•Inserir sombras em textos e blocos;
•Fazer pequenas animações, transições;
•Ocultar elementos, entre tantas coisas.

Benefícios da utilização de CSS
Entre os principais benefícios destaca-se:
• A separação da folha de estilo da marcação;

• Facilidade de manutenção visual do site através de um arquivo externo;
• Disponibilidade de diretiva para construção de layouts que atendam diferentes tipos
de dispositivos.
• Aumento na velocidade no carregamento das páginas.
Scripts CGI e folhas de estilo T ÉC N I CO M U LT I M É D I A

Vinculação das folhas de estilos ao documento HTML
A vinculação das folhas de estilos ao documento HTML é uma forma de fornecer estilos
à página web.
Existem 4 formas de fazer essa vinculação.

• Por folha de estilo externa;
• Por folha de estilo incorporada;
• Por folha de estilo em escopo;
• por folha de estilo inline.

• Por folha de estilo externa;
<head> Num documento HTML
<link rel="stylesheet" type="text/css" href="estilos.css">
<head>
</head> <style type="text/css">
@import url(estilos-extras.css);
• Por folha de estilo incorporada; </style>
</head>
Importar de um css para outro css
@import url(estilos-extras.css);
.um-seletor-qualquer {
margin: 0;
padding: 0;
background-color: #ff0000;
font-size: 18px;
}

• Por folha de estilo incorporada;

<head>
<style type=”text/css”>
.umseletorqualquer {
margin: 0;
padding: 0;
background-color: #ff0000;
font-size: 18px;
}
<style>
<head>

• Por folha de estilo em escopo;

<div>
<style type=”text/css” scopped=”scopped”>
/* Aqui vão as regras CSS */
</style>
<!-- Aqui vão os elementos HTML que receberão os estilos
</div>
• por folha de estilo inline.
p style="font-size: 14px; color: #ccc; text-align: center;">Aqui está um parágrafo de cor cinza alinhado no centro.</p>

Regras CSS
Através das regras CSS conseguimos dar forma as páginas web.
A regra CSS é um comando que serve para definir o estilo que um elemento
HTML receberá.
O CSS é composto por um ou mais seletores, e uma ou mais declarações.
As declarações estão contidas/colocadas entre chavetas e são formadas pela
propriedade e o valor da propriedade.
O seletor vincula um elemento do documento HTML a declaração CSS.

Regras CSS
Uma regra básica segue o seguinte esquema: seletor { propriedade: valor }
Chavetas

Seletor: È responsável por selecionar o elemento, ou elementos HTML que receberão determinado estilo.
Propriedade: Se refere às características visuais que um elemento pode possuir.

Tomamos como comparação qualquer objeto que podemos medir suas dimensões.
Altura e largura seriam propriedades deste objeto quando pensamos em tamanho.
Os elementos HTML também possuem propriedades de altura e largura.
Valor: Corresponde ao produto da propriedade. Ou seja, ele define como o elemento será apresentado. Se um
elemento tem uma altura, o valor corresponde ao seu tamanho seguida pela sua unidade de medida.
Um bloco com 2 cm de altura possui a propriedade altura cujo valor é 2 cm.

Outro exemplo para fixar o conceito é selecionar um parágrafo (seletor) para que apresente no navegador uma cor
(propriedade) e cujo valor desta cor é vermelha (valor).
Vejamos na sequência como apresentaríamos esta regra para apresentar um parágrafo vermelho.
p { color: red; }
“p” seleciona todo e qualquer elemento HTML <p> encontrado no documento.

A propriedade “color” define que queremos estilizar a cor dos parágrafos.
E “red”, que quer dizer vermelha, é a cor escolhida para os parágrafos.

Outro ponto importante a saber é que uma regra CSS pode ter mais que uma declaração. Vejamos:
p{
color: red;
font-size: 14px;
}

Tipos de seletores básicos
Existem uma lista repleta de seletores com diferentes objetivos.
Mas existem 3 tipos de seletores básicos cuja aplicação é constante e cujo conhecimento para iniciantes é
obrigatório.
Para conhecer a lista completa podemos visitar o site da W3C.

https://www.w3.org/TR/2018/CR-selectors-3-20180130/
Vamos agora aos 3 tipos básicos.


Tipos de seletores básicos:
• Seletor de tipo
Este tipo de seletor seleciona um elemento html específico para estilização.

A sintaxe muito simples. Depois de escolhido o elemento que queremos estilizar basta digitá-lo antes da abertura
de chavetas da declaração, conforme exemplo a seguir para o elemento <h1>.
h1 {
color: blue;
}
Se só existir um elemento <h1> por página somente este recebe a estilização. Mas caso o elemento estilizado
aparece mais vezes no documento HTML todos receberão o estilo, a menos que um deles receba um seletor
específico.

• Seletor ID
Este seletor seleciona um elemento HTML cujo atributo id tenha o mesmo nome do seletor. Observe o seguinte
elemento HTML:
<div id=“artigo"></div>
Acima vemos um elemento que possui o atributo id com o valor artigo. O nome do valor é um nome de escolha
nossa. Podemos selecioná-lo digitando o nome do valor precedido por cardinal (#). Veja a seguir:
#artigo { background-color: yellow; }
Ao utilizar # estamos selecionando um elemento com atributo id. O elemento <div> que recebe o id com valor
“Artigo” terá uma cor de fundo amarela.

• Seletor ID
Duas observações importantes. O valor do atributo id só pode ser usado em um elemento dentre todas as tags de uma
página. E caso haja conflito entre duas regras o seletor ID prevalecerá. Vejamos .
HTML:
<div id=“artigo"></div>
CSS:
div { background-color: blue; }
#artigo { background-color: yellow; }
/* Isso é um simples comentário em CSS */


• Seletor class
Este seletor seleciona um ou mais elementos HTML cujo atributo class tenha o mesmo nome do seletor.
O fato deste tipo de seletor poder selecionar mais que um elemento HTML torna-o mais vantajoso em relação o do tipo id.
Com uma simples regra é possível definir estilos que poderão ser aplicados por todo documento HTML onde exista necessidade de
repetir estilos. Com isso economiza-se código e tempo de desenvolvimento.
Observe o código HTML a seguir.
<header class="container"></header>
<section class="container"></section>
<footer class="container"></footer>

• Seletor class (classes)
Digamos que você deseja que ambos tenham um padding (propriedade esta que preenche com um espaço vazio
entre a extremidade do elemento até a área do conteúdo) de 15 pixels. Em vez de você criar uma regra para cada
elemento você cria uma para o valor do atributo class que é “container”.
.container { padding: 15px; }
Note que antes de colocar o nome do seletor ele é precedido por um ponto para que funcione.

• Observação sobre nomes de IDs e classes
Os nomes de IDs e classes é algo que você “cria”.
Mas não é indicado inventar números e caracteres especiais.
Simplificar as coisas usando apenas letras e a melhor regra.
Esses nomes não devem ter espaço em branco. Espaço em branco em um atributo de um elemento HTML
indica que existem dois seletores.
Veja:
<div class="bloco maior"></div>
Isso não indica que exista uma class com seletor .bloco maior, e sim que existem duas classes, .bloco e .maior.

• Selecionar elementos aninhados
Em muitos casos tem-se a necessidade de criar um seletor para um elemento aninhado e para isso você precisará indicar o
caminho que indica os elementos antecedentes. Observe-se a lista com links a seguir:
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
Você quer definir um tamanho de fonte de 14 pixels e poderia simplesmente fazer da seguinte forma.
a { fonte-size: 14px; }
criar uma class para o elemento da lista e opção sensata.


<ul>
<li><a href="home.html" class="tamanho-fonte">Home</a></li>
<li><a href="sobre.html" class="tamanho-fonte">Sobre</a></li>
<li><a href="contato.html" class="tamanho-fonte">Contato</a></li>
</ul>
É um pouco trabalhoso colocar um atributo class em cada elemento, imagine uma lista com muitos elementos. E
também é uma decisão pouco inteligente.
A melhor forma nesse caso é indicar os elementos antecedentes do elemento “a”. Veja a seguir.
ul li a { font-size: 14px; }
colocar os elementos que precedem o “a” antes dele e com espaço entre ambos.

A regra com aninhamento também pode ser aplicada quando presente os outros tipos de seletores. Vejamos:
<ul class="menu">
<li><a href="home.html">Home</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
Agora o CSS:
.menu li a { font-size: 14px; }


• Agrupamento de seletores
Um uso também muito comum em CSS é em uma mesma declaração você colocar mais que um seletor com
separação por vírgula. Veja a seguir:
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
O código acima junta todos elementos acima e informa que eles devem ser elementos em bloco.
Estes elementos foram introduzidos no HTML5 e este código é um recurso para que navegadores mais antigos os
reconheçam como elementos em bloco.

• Agrupamento de seletores
Mas também se pode utilizar mais que um seletor não só para elementos HTML mais também misturando os outros
tipos de seletores.
Vejamos o exemplo a seguir:
span, a, #seletor-1, .seletor-2 { font-weight: bold; }


Declaração única
Existem alguns casos que temos propriedades que atuam separadamente para resultar em estilo, mas que
podem estar reunidas numa só declaração. É o que chamamos de declaração única. Este tipo abrevia
declarações reunindo todos seus valores em uma só.
Isso é muito útil para diminuir código e ganhar tempo.

Podemos tomar como exemplo as seguintes propriedades que estilizam bordos/limites.
Border-width: Propriedade que define a espessura da borda;
Border-style: Propriedade que define o tipo de borda (contínua, tracejada, etc);
Border-color: Propriedade que define a cor da borda;

Declaração única
Para reunir os valores das 3 propriedades podemos utilizar uma propriedade única chamada border.
Veja as seguintes declarações para uma div:
div {
border-width: 1px;
border-style: solid;
border-color: black;
}
Agora a junção de seus valores em uma declaração única usando border.
div {
border: 1px solid black;
}

Efeito cascata
O efeito cascata estabelece qual regra é prioritária na aplicação de estilo de um elemento.

Ela é importante quando um elemento recebe mais que um valor de uma determinada propriedade através de
regras diferentes gera um conflito.
Imagine que uma regra determina que um container recebe a cor de fundo amarela e outra regra determina a cor de
fundo azul.
Neste momento alguns fatores vão determinar qual estilo será aplicado, como a localização da folha de estilo, a
ordem da declaração da regra e a especificidade.

Herança
Algumas propriedades quando aplicadas a elementos pai são herdadas por elementos filhos.
A isso chamamos de herança.
Elementos filhos são os elementos contidos no elemento pai. Vejamos a seguir:
<div>
<p>Este é um elemento filho de "div".</p>
</div>
Digamos que definimos um valor de font-size (tamanho da fonte) para a <div> (elemento pai). Automaticamente o
elemento <p> (elemento filho) herdará esse valor
div {
font-size: 14px;
}
p{
color: red;
}

Propriedades mais usadas:
Font-size – Esta define o tamanho da fonte

Font-family – Define a família de fontes. Com ela você pode declarar uma fonte específica e uma genérica.(Verdana, Time New
Roman, Monotype Cursiva, Courier New)
Font-weight – Esta propriedade serve para determinar o peso da fonte. É usada bastante com o valor “bold” para negritar trechos
de textos.(bold, normal, lighter, bolder)
Font-style – Usada para dar estilo. Você pode usar esta propriedade para valores “normal”, “oblique” ou “italic”.
Line-height – É uma propriedade de dimensionamento que permite estipular espaçamento entre linhas.
Font – A propriedade “font” é indicada se quer diminuir o código reunindo todos os valores das propriedades acima em uma só
declaração.
Text-align – Esta é a propriedade usada para determinar o tipo de alinhamento que um texto possuirá. Os valores para esta
propriedade são: left, right, center e justify.

COLOR: A propriedade para cor de textos é a “color”. Você pode usar valores hexadecimais nessa
propriedade.
Para dimensões de blocos

“Width” define a largura do bloco e “height” a altura.
Para fundos do site e de blocos

background: propriedade responsável por atribuir valores para características de fundo de sites, seções
e blocos: background: #fff000 url(imagem-de-fundo.png) repeat;


background: propriedade responsável por atribuir valores para características de fundo
de sites, seções e blocos: background: #fff000 url(imagem-de-fundo.png) repeat;
background-image: url(imagem-de-fundo.png); /* Define a imagem de fundo */

background-color: #fff000; /* Define a cor do fundo amarela */
background-repeat: repeat; /* Define a se a imagem do fundo deve repetir ou não, ou somente no eixo
x, ou no y. No caso se repete em todos os eixos.*/


Outras variações
background-attachment – define se a imagem fica fixa ou não enquanto rolamos a tela;
background-position – define onde a imagem de fundo é posicionada;
background-clip – define a área onde a imagem de fundo é aplicada;
background-origin – define a posição de origem da imagem em um elemento;
background-size – define as dimensões da imagem de fundo.

Para margens
As margens em CSS servem para que um bloco se
distancie de blocos vizinhos e também da
extremidade do navegador. E isso é muito útil para
criar áreas de respiro entre elementos, definir
posicionamentos e auxiliar na diagramação de um
layout quando usado em conjunto com as
propriedades width e height.
A propriedade responsável por definir margens para
um elemento denomina-se “margin”.

Para margens
Exemplo
div {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

Para preenchimentos
Preenchimento ou espaçamento é similar às

margens. Ele também cria uma área de respiro.
Só que desta vez é entre o conteúdo e

extremidade de um box. A propriedade
responsável e : padding
Da mesma forma que vimos em margin, o padding também pode ser aplicado para os lados com padding-top, padding-
right, padding-bottom e padding-left.

Para bordos/limites
A propriedade “border” é responsável por especificar a espessura, o estilo e a cor do bordo de um elemento.
Existem variantes desta propriedade para cada tipo de valor que pretendes usar. São elas:
Border-style: Especifica o estilo do bordo.
Desta propriedade ainda é possível conseguir variações para os lados de uma caixa : border-top-style, border-
right-style, border-bottom-style e border-left-style.

Para bordos/limites
Border-width: Especifica a espessura.

variações: border-top-width, border-right-width, border-bottom-width, border-left-
width.
Border-color: Especifica a cor da borda.
variações: border-top-color, border-right-color, border-bottom-color e border-left-
color.

Para bordos/limites
Border-width: Especifica a espessura.
variações: border-top-width, border-right-width, border-bottom-width, border-left-width.
Border-color: Especifica a cor da borda.
variações: border-top-color, border-right-color, border-bottom-color e border-left-color.

div {
border: 2px solid #000000;
}

z-index (Layers)
CSS usa o espaço tri-dimensional - altura, largura e profundidade. Definimos para cada elemento um número índice
(z-index).
O comportamento é que elementos com número índice maior se sobrepõem àqueles com menor número.

z-index (Layers)
Vamos supor um royal flush no jogo de poker. As cartas podem ser apresentadas como se cada uma delas tivesse um
z-index:
Os números índice estão numa sequência direta (de 1-

5), contudo o mesmo resultado poderia ser obtido com
uso de 5 diferentes números, não em sequência.
O que conta é a cronologia dos números (a ordem).


O código para a ilustração das cartas é mostrado a seguir:
#ten_of_diamonds { #queen_of_diamonds { #ace_of_diamonds {

position: absolute; position: absolute; position: absolute;
left: 100px; left: 130px; left: 160px;
bottom: 130px;
bottom: 100px; bottom: 160px;
z-index: 1; z-index: 3;
z-index: 5;
} }
}
#jack_of_diamonds { #king_of_diamonds {
position: absolute; position: absolute;
left: 115px; left: 145px;
bottom: 115px; bottom: 145px;
z-index: 2; z-index: 4;
} }

1-coluna (geralmente usada para navegadores móveis)

2-colunas (frequentemente usado para tablets e portáteis)
3-colunas layout (usado apenas para desktops)

Hiperligações
O selector Tipo: a
a:link - normal e não visitado

a:visited - um link que o utilizador visitou
a:hover – ação ou efeito quando o utilizador passa o mouse sobre ele
a:active - ação ou efeito no momento em que é clicado

Hiperligações
O selector Tipo: a
a:link - normal e não visitado

a:visited - um link que o utilizador visitou
a:hover – ação ou efeito quando o utilizador passa o mouse sobre ele
a:active - ação ou efeito no momento em que é clicado
182

UFCD0792 Conteudov1

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

UFCD0792 Conteudov1

Enviado por

Direitos autorais:

Formatos disponíveis

Scripts CGI e folhas de estilo

“Na internet não existe ninguém feio, existe

❑Avaliação. Continua (30%)

❑Botões submit e radio

❑Campos não visíveis

❑Carregamento de ficheiros através de forms

❑Imagens externas e de fundo

❑Atributos das imagens

❑Referência das cores, cor de fundo e de texto

❑Preparação das imagens

❑Styles sheets em HTML

é efetuar a separação entre o formato e o conteúdo de um documento

•Estruturar o layout do site;

•Posicionar elementos na página web;

•Mudar a ordem de apresentação das Tags HTML;

•Colocar espaçamentos entre tags;

•Preencher com espaço vazio entre a borda de um bloco e seu conteúdo;

•Colocar diferentes tipos de bordas de diferentes cores nos blocos;

•Inserir bordas arredondadas aos blocos;

•Colocar cor de fundo, gradiente ou imagem de fundo aos blocos;

•Trabalhar com diversas propriedades para tipografia.

•Inserir sombras em textos e blocos;

•Fazer pequenas animações, transições;

•Ocultar elementos, entre tantas coisas.

Entre os principais benefícios destaca-se:

• A separação da folha de estilo da marcação;

Folhas de Estilo CSS

Existem 4 formas de fazer essa vinculação.

Folhas de Estilo CSS

Folhas de Estilo CSS

• Por folha de estilo incorporada;

Folhas de Estilo CSS

• Por folha de estilo em escopo;

• por folha de estilo inline.

Folhas de Estilo CSS

Folhas de Estilo CSS

Uma regra básica segue o seguinte esquema: seletor { propriedade: valor }

Folhas de Estilo CSS

Propriedade: Se refere às características visuais que um elemento pode possuir.

Folhas de Estilo CSS

“p” seleciona todo e qualquer elemento HTML <p> encontrado no documento.

Folhas de Estilo CSS

Folhas de Estilo CSS

Existem uma lista repleta de seletores com diferentes objetivos.

Para conhecer a lista completa podemos visitar o site da W3C.

Vamos agora aos 3 tipos básicos.

Folhas de Estilo CSS

Este tipo de seletor seleciona um elemento html específico para estilização.

Folhas de Estilo CSS

#artigo { background-color: yellow; }

Folhas de Estilo CSS

div { background-color: blue; }

#artigo { background-color: yellow; }

/* Isso é um simples comentário em CSS */

Folhas de Estilo CSS

Folhas de Estilo CSS

.container { padding: 15px; }

Folhas de Estilo CSS

Folhas de Estilo CSS

criar uma class para o elemento da lista e opção sensata.

Folhas de Estilo CSS

Folhas de Estilo CSS